Este artículo resume el uso de WeChat JSSDK y lo comparte con usted para su referencia. El contenido específico es el siguiente
1. Atar el nombre de dominio
2. Introducir el archivo JS
Presente el siguiente archivo JS en la página que necesita llamar a la interfaz JS (soporte https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Tenga en cuenta que si su página tiene https habilitados, asegúrese de introducir https://res.wx.qq.com/open/js/jweixin-1.0.0.js, de lo contrario, no podrá usar con éxito JSSDK en iOS9.0 o por encima de los sistemas.
3. Verifique la configuración a través de la interfaz de configuración
Este paso es obtener una serie de parámetros enviando una solicitud al fondo utilizando la URL actual. Es decir, el fondo usará mi URL para verificarla en WeChat. Las cosas a tener en cuenta aquí se utilizan para verificar el método actual de escritura de URL.
Let url = ubicación.href.split ('#') [0];
Asegúrese de escribir la situación anterior. De lo contrario, se realizará la firma de configuración no válida.
Confirme que la URL es la URL completa de la página (confirme en la alerta de página actual (ubicación.href.split ('#') [0])), incluido 'http (s): //' par y '? 'El parámetro Get Part después de él, pero no incluye la parte después de'#'hash.
Asegúrese de que la URL que se acostumbra se obtiene dinámicamente. Puede consultar el método de implementación de PHP en el código de ejemplo para la página dinámica. Si la página estática de HTML se pasa al backend a la firma de la URL a través de AJAX en la parte delantera, la parte delantera debe usar JS para obtener la página actual y eliminar el enlace a la parte "#" hash (puede obtener el lugar. Si el enlace actual no se obtiene dinámicamente, la firma de la página después de compartir fallará.
Presta atención a la dinámica aquí, no la empalmes por ti mismo y codifique Uricomponent al mismo tiempo.
$ .AJAX ({type: 'get', url: url, dataType: 'jsonp'}). Entonces ((data) => {wx.config ({debug: true, // activar el modo de depuración, los valores de retorno de todas lado.4. Verificado con éxito a través del procesamiento de interfaz listo
Después de verificar la información de configuración, se ejecutará el método listo. Se deben obtener todas las llamadas de interfaz después de que la interfaz de configuración obtenga el resultado. La configuración es una operación asincrónica de un cliente. Por lo tanto, si necesita llamar a la interfaz relevante cuando se carga la página, debe colocar la interfaz relevante en la función lista para llamar para garantizar la ejecución correcta. Para las interfaces que se llaman solo cuando el usuario se desencadena, se las puede llamar directamente sin ponerlas en la función lista.
wx.ready (() => {// alert ('listos'); //$('#onmenusharaAppMessage').on('tlick ', () => {// Compartir con amigos wx.onmenusharaAppMessage ({title:' ', desc:' ', link: compartirRl, imgururl:' ', TRIGGR: function (function (ses) Friends '); // Compartir en momentos wx.onmenusharetimeline ({title: '', // Compartir el enlace de título: compartirChoml, // Compartir enlace imgurl: '' '', // share icon éxito: function () {alert ('compartido'); // alert ($ ($ ('. No-num'). Html ());}, cancel: function () {alerta ('cancelado'); compartir // alerta ('cancelado'); });5. Verificación fallida a través de la interfaz de error
La función de error se ejecutará si la información de configuración falla. Si la firma expira, la verificación fallará. Para mensajes de error específicos, puede abrir el modo de depuración de configuración, o puede verlo en el parámetro RES devuelto.
wx.error ((res) => {alert (res.errmsg);})6. Interfaz básica
• Compartir a la interfaz de momentos
wx.onmenusharetimeline ({title: '', // Compartir el enlace de título: '', // Compartir enlace imgurl: '', // Share icon Success: function () {// función de devolución de llamada ejecutada después del usuario confirma el intercambio}, cancelar: function () {// función de devolución de llamada ejecutada después del usuario que el usuario se puede compartir el intercambio}});• Interfaces para compartir con amigos
wx.onmenusharaAppMessage ({title: '', // Compartir el título Desc: '', // Compartir Descripción Enlace: '', // Compartir el enlace imgurl: '', // Compartir el tipo de icono: '', // Compartir Tipo, música, video o enlace, no complete el enlace predeterminado DataRurl: '', // Si el tipo es musical u video, debe proporcionar un enlace de datos, el enlace de datos predeterminado (es el enlace predeterminado (). Función de devolución de llamada ejecutada después de que el usuario confirme el intercambio}, cancelar: function () {// función de devolución de llamada ejecutada después de que el usuario cancela el intercambio}});Si necesita agregar contenido obtenido con una solicitud asíncrona AJAX al contenido compartido aquí, la interfaz de intercambio debe llamarse nuevamente en la función exitosa después de que se devuelve la solicitud AJAX, pero la interfaz de intercambio debe colocarse en la función WX.Ready y no se puede llamar por separado. Debido a que la operación de intercambio de clientes es una operación sincrónica, los datos que usan AJAX aún no se han devuelto.
7. Estos pasos parecen simples, pero inevitablemente hay muchos problemas durante la depuración , porque la interfaz JSSDK todavía tiene muchas restricciones. Accidentalmente pisé el pozo.
8. Finalmente, encapsulé esta interfaz .
'use strict';let wxDefaultOptions = { debug: true, appId: '', timestamp: 0, nonceStr: '', signature: '', jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'ChooseImage', 'PreviewImage', 'uploadImage', 'downloadImage', 'getNetWorkType', 'OpenLocation', 'getLocation', 'hideoPtionMenu', 'showoptionMenu', 'CloseWindow', 'Scanqrcode', Choos 'OpenProductSpecificView', 'addCard', 'ChooseCard', 'OpenCard']}; // Let shareUrl = 'http: // xxx' + ubicación.pathName; dejar getwxparam = (url, wxOptions) => {let url = ubicación.href.split ('#') [0]; url = encodeuricomponent (url); Let promise = new Promise ((resuelve, rechazar) => {$ .AJAX ({type: 'get', url: 'http: // xxx/xxx? 'WXEB5C3F4A03B880F0'; resolve (); return promise;} // Compartir en momentos deje que SharesOcial = (param) => {wx.onmenusharetimeline ({title: param.title, // compartir el enlace de título: param.link, // compartir enlace imgurl: param.imgurl, // share icon stitsuts: function () {// Callback function Param.sucallback () Ejecutado Ejecutado después del usuario Confirma el Usar. // función de devolución de llamada param.failcalback () ejecutado después de que el usuario cancele el intercambio; function (res) {param.sucallback (); {// Compartir a los momentos Sharesocial (param); Título: '', DESC: '', enlace: '', imgurl: '', Sucallback: Func, FailCalback: func} Module.Exports = {WxDefaultOptions, // Cambia la configuración Callwx, // Configuración predeterminada, personalize WeChat Compartir Contenido después de configuración y listo,}Este artículo se ha compilado en "Resumen de las habilidades de desarrollo de JavaScript WeChat", y todos son bienvenidos a aprender y leer.
Me gustaría recomendar un tutorial sobre el programa WeChat Mini que esté muy preocupado: "Tutorial de desarrollo del programa WeChat Mini" ha sido cuidadosamente compilado por el editor de todos, espero que les guste.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.