Este artículo ha compartido una versión detallada de la interfaz JS WeChat para su referencia. El contenido específico es el siguiente
Instrucciones básicas
Instrucciones de uso
1. Introducir archivos 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
Nota: Carga de soporte utilizando el método de carga del módulo estándar AMD/CMD
2. Inyectar y configurar la interfaz de configuración
Todas las páginas que necesitan usar JSSDK primero deben inyectar información de configuración, de lo contrario, no se les llamará (la misma URL debe llamarse solo una vez, y la aplicación web del SPA que cambia la URL puede llamarse cada vez que cambie la URL).
wx.config ({debug: true, // activar el modo de depuración, los valores de retorno de todas las API llamadas se alertarán en el cliente. Para ver los parámetros pasados, puede abrirlos en el lado de la PC, la información de parámetros se imprimirá a través del registro y solo se imprimirá en el lado de la PC. AppID: '', // requerido, el identificador único del TimestAM de cuenta oficial: // Non -Cestr: '', // requerido, la cadena aleatoria generada para la firma de la firma: '', // requerida, la firma se muestra en el Apéndice 1 JSapilist: [] // requerido, la lista de interfaces JS que se utilizarán, y todas las interfaces JS se enumeran en el Apéndice 2});3. Verifique a través de la interfaz lista
wx.ready (function () {// 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 asíncrona de un cliente. Por lo tanto. ser colocado en la función lista.4. Interfaz de error fallido de verificación
wx.error (function (res) {// Si la información de configuración no puede verificar, se ejecutará la función de error. Si la firma expira, la verificación fallará. Para mensajes de error específicos, puede abrir el modo de depuración de configuración para ver, o puede verla en el parámetro RES devuelto. Para SPA, puede actualizar la firma aquí.});Instrucciones de llamadas de interfaz
Todas las interfaces se llaman a través de objetos WX (también se pueden usar con objetos Jweixin). Los parámetros son un objeto. Además de los parámetros que cada interfaz en sí misma necesita pasar, también existen los siguientes parámetros generales:
1. Éxito: la función de devolución de llamada ejecutada cuando la interfaz se llama con éxito.
2. Falta: una función de devolución de llamada ejecutada cuando la interfaz llama fallas.
3. Completo: la función de devolución de llamada ejecutada cuando se completa la llamada de interfaz y se ejecutará independientemente del éxito o el fracaso.
4. Cancelar: la función de devolución de llamada cuando el usuario hace clic para cancelar, solo se utilizarán algunas API que tienen usuarios de cancelación de operaciones.
5. Disparador: un método que escucha el disparador cuando se hace clic en un botón en el menú. Este método solo admite interfaces relacionadas en el menú.
Las funciones anteriores tienen un parámetro, tipo de objeto, además de los datos devueltos por cada interfaz en sí, también hay una propiedad común ERRMSG, cuyo formato de valor es el siguiente:
1. Cuando la llamada es exitosa: "xxx: ok", donde xxx es el nombre de la interfaz de la llamada
2. Cuando el usuario cancela: "xxx: cancelar", donde xxx es el nombre de la interfaz llamado
3. Cuando la llamada falla: su valor es un mensaje de error específico
Interfaz básica
Determine si la versión actual del cliente admite la interfaz JS especificada
wx.checkjsapi ({jsapilist: ['ElimeImage'] // La lista de interfaces JS que deben detectarse, todas las interfaces JS se enumeran en el Apéndice 2, Succes: Function (Res) {// Return como pares de valor clave, el valor API disponible está verdadero y no está disponible como falso // por ejemplo:::: {"checkResult": {"ChoiceImage": true}, "errmsg": "checkJSapi: ok"}});Interfaz de intercambio
Obtenga el estado de clic del botón "Compartir en momentos" y personalice la interfaz de contenido para compartir
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 compartir}, cancelar: function () {// Función de devolución de llamada ejecutada después de los cántelos de usuario compartiendo}});Obtenga el estado de clic del botón "Compartir a amigos" y personalice la interfaz de contenido compartido
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 llene el enlace predeterminado Determinado: '' ', // si el tipo es musical u video, debe proporcionar un enlace de datos predeterminado, 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}});Obtenga el estado de clic del botón "Compartir en QQ" y personalice la interfaz de contenido para compartir
wx.onmenushareqq ({title: '', // Share Title Desc: '', // Compartir el enlace Descripción: '', // Compartir enlace imgurl: '' '// Compartir icon éxito: function () {// función de devolución de llamada ejecutada después de que el usuario confirme el intercambio}, cancel: function () {// Función de devolución de llamada ejecutada después del usuario Cancel el usuario el intercambio}});Obtenga el estado de clic del botón "Compartir en Tencent Weibo" y personalice la interfaz de contenido para compartir
wx.onmenushareweibo ({title: '', // Share Title Desc: '', // Compartir Descripción Enlace: '', // Compartir enlace imgurl: '' // Compartir icon éxito: function () {// función de devolución de llamada ejecutada después del usuario confirma el compartir}, cancelar: function () {// function de devolución de llamada ejecutado después de los usuarios del usuario el uso compartido}});Interfaz de imagen
Tome una foto o seleccione una imagen de la interfaz del álbum del teléfono móvil
wx.ChooseImage ({Success: function (res) {var localIDs = res.localids; // Devuelve la lista de identificación local de la foto seleccionada. Localid puede mostrar imágenes como el atributo SRC de la etiqueta IMG}});Interfaz de imagen de vista previa
wx.previewImage ({actual: '', // Las urlas de enlace de imagen actualmente se muestran: [] // La lista de enlaces de imagen que deben previsamente});Cargar la interfaz de imagen
wx.uploadImage ({localID: '', // La identificación local de la imagen que se cargará, obtenida de la interfaz de ChoiceImage isshowProgressTips: 1 // El valor predeterminado es 1, y el indicador de progreso se muestra exitoso: function (res) {var serverid = res.serverid; // devuelve la identificación del servidor de la imagen}});Nota: puede descargar la imagen cargada de WeChat usando la interfaz de archivo multimedia. El servidor obtenido aquí es Media_ID. Documento de referencia ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
Descargar la interfaz de imagen
wx.downloadImage ({ServerId: '', // El ID del lado del servidor de la imagen que se descargará, obtenido de la interfaz de carga de carga ISSHOWProgressTips: 1 // El valor predeterminado es 1, y el indicador de progreso se muestra éxito: function (res) {var localID = res.localid; // regreso a la ID local después de la imagen se descarga}}});Interfaz de audio
Comience a grabar la interfaz
wx.startrecord ();
Deja de grabar la interfaz
wx.stopRecord ({Success: function (res) {var localID = res.localid;}});Interfaz de parada automática para monitorear la grabación
wx.onvoicerecordend ({// La devolución de llamada completa se ejecutará cuando el tiempo de grabación exceda un minuto y no se detenga. Complete: function (res) {var localID = res.localid;}});Interfaz de voz reproducir
wx.playvoice ({localID: '' // La identificación local del audio a reproducir, obtenida por la interfaz StopRecord});Interfaz de reproducción de pausa
wx.PauseVoice ({localID: '' // La identificación local del audio que debe detenerse, obtenida por la interfaz StopRecord});Detener la interfaz de reproducción
wx.stopVoice ({localID: '' // La identificación local del audio que debe detenerse, obtenida por la interfaz StopRecord});Monitoreo de la interfaz de reproducción de voz
wx.onvoicePlayend ({serverId: '', // La identificación del lado del servidor del audio que debe descargarse, obtener éxito: function (res) {var localid = res.localid; // devuelve la identificación local del audio}});Subir la interfaz de voz
wx.uploadvoice ({localID: '', // La identificación local del audio que debe cargarse, obtenida de la interfaz stopRecord isshowprogresstips: 1 // El valor predeterminado es 1, mostrando el éxito de progreso: function (res) {var serverid = res.serverid; // devuelve el ID de servicio del servidor del audio}});Nota: Puede descargar la interfaz de archivo Multimedia de Voice cargado por WeChat. El servidor obtenido aquí es Media_ID. Documento de referencia ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
Descargar la interfaz de voz
wx.downloadVoice ({ServerId: '', // La ID del lado del servidor del audio que debe descargarse, obtenida de la interfaz iboLeadVoice isshowProgressTips: 1 // El valor predeterminado es 1, y el aviso se muestra éxito: function (res) {var localID = res.localid; // devuelve el ID local del audio}});Interfaz inteligente
Identificar audio y volver a la interfaz de resultados de reconocimiento
wx.translateVoice ({localID: '', // La identificación local del audio que debe reconocerse, isshowprogresstips: 1, // El valor predeterminado es 1, mostrando progreso de éxito: function (res) {alert (res.translateresult); // el resultado del reconocimiento de voz}}});Información del equipo
Obtener la interfaz de estado de red
wx.getNetWorkType ({Success: function (res) {var networkType = res.networkType; // return Tipos de red 2G, 3G, 4G, WiFi}});Ubicación geográfica
Use el mapa incorporado de WeChat para ver la interfaz de ubicación
wx.openlocation ({latitud: 0, // latitud, número de punto flotante, el rango es 90 ~ -90 longitud: 0, // longitud, número de punto flotante, rango es 180 ~ -180. Nombre: '', // Nombre de ubicación Dirección: '', // Detalles de Detalles Escala: 1, // Nivel de zoom de mapa, valor de cambio, rango de 1 ~ 28. El valor predeterminado es el valor de máximo de máxima Hyperlink que se muestra en la parte inferior de la interfaz de posición de visualización, puede hacer clic para saltar});Obtenga la interfaz de geolocalización
wx.getLocation ({timestamp: 0, // Posicion Signature TimeStamp, proporcionó noncestr: '', // Cadena aleatoria de la firma de posición, proporcionada solo cuando es compatible con la versión 6.0.2, addrsign: '', // posición firma, proporcionó solo cuando es compatible con la versión 6.0.2, ver los apéndice 4 para obtener detalles. éxito: function (res) {var longitude de varilla de res. 90 ~ -90 Var Latitude = Res.latitude;Operación de interfaz
Ocultar la interfaz de menú wx.HideOptionMenu () en la esquina superior derecha;
Muestre la interfaz de menú wx.showOptionMenu () en la esquina superior derecha;
Cierre la interfaz de ventana web actual wx.closewindow ();
Interfaz de botón de función de ocultación por lotes
wx.hidemenuitems ({menulist: [] // para ocultar elementos del menú, ver Apéndice 3});Interfaz del botón de función de visualización por lotes
wx.showmenuitems ({menulist: [] // Todos los elementos del menú que se mostrarán se muestran en el Apéndice 3});Ocultar todas las interfaces de botones no base wx.hideAllnonBaseMenuitem ();
Mostrar todas las interfaz de botón de función wx.showallnonBaseMenuitem ();
Escanear el WeChat
Haga clic en la interfaz de escaneo WeChat
wx.scanqrcode ({desc: 'scanqrcode Desc', NeedResult: 0, // El valor predeterminado es 0, el resultado de escaneo se procesa por WeChat, y 1 devuelve directamente el resultado de escaneo, scantype: ["qrcode", "Barcode"], // puede especificar si escaneo el código QR o el código 1R. Awards Tusks to to Success: Function () {) {RES. // Cuando NeedResult es 1, el resultado devuelto escaneando el código}});Dirección de cosecha
Editar interfaz de dirección de entrega
wx.editaddress (timestamp: 0, // ubicación de la marca de tiempo de firma de ubicación, solo si es necesario ser compatible con la versión 6.0.2, noncestr: '', / 'Strandation de la firma de ubicación String, solo si debe ser compatible con la versión 6.0.2, Addrsign:' ', // Location Signature, solo si es necesario ser compatible con la versión 6.0.2, consulte el Apéndice 4 para los detalles: Actualización: Actualización: Actualización. nombre de usuario = res.userno; Dirección de nivel VAR VAR DIRECCIÓN = Res.address;
Obtenga la interfaz de dirección de entrega más cercana
wx.getLateStAddress ({timestamp: 0, // La marca de tiempo de firma de ubicación, solo si necesita ser compatible con la versión 6.0.2, no -CESTR: '', // ubicación firma de firma cadena aleatoria, solo si debe ser compatible con la versión 6.0.2, addrsign: '', // la firma de ubicación, solo si es necesario que sea compatible con la versión 6.0.2, 2, 2, vea los detalles de la ubicación. (res) {Var UserNeN = Res.Username; // Dirección de entrega estándar National Dirección VAR DIRECCIÓN VAR = Res.Address;Tienda WeChat
Saltar a la interfaz de la página del producto WeChat
wx.openproductspecificView ({productID: '', // producto idviewType: '' '// 0. Valor predeterminado, detalles del producto ordinario Página 1. Escanee los detalles del producto Página 2. Página de detalles del producto de la tienda});Cupón de tarjeta WeChat
Libere la lista de cupones de tarjetas para tiendas y obtenga la lista de selección de usuarios
wx.ChoosECard ({shopID: '', // store id cardType: '', // Tipo de tarjeta CardID: '', // Tarta de tarjetas Timestamp: 0, // ID de tarjeta TimeStamp: Noncestr: '', // Card Voucher Signature String CardLign: '', // Signature de vouche de tarjeta, ver apendix 6 para detalles. Sucesión: Función (Rese (Rese) »String Cardign. // información de la lista de comprobantes de tarjeta seleccionada por el usuario}});Agregar interfaz de cupón de tarjeta en lotes
wx.addcard ({cardlist: [{cardID: '', cardext: '' '}], // La lista de cupones de cartas que debe agregarse con éxito: function (res) {var cardlist = res.cardList; // La información de la lista de cupones de la tarjeta}});Revise la interfaz de cupón de la tarjeta en el paquete de tarjeta WeChat
wx.opencard ({cardlist: [{cardID: '', código: ''}] // Lista de cupones de tarjetas a abrir});Pago de WeChat
Iniciar una solicitud de pago de WeChat
wx.ChooseWxPay ({Timestamp: 0, // PAGO Signature TimeStamp Noncestr: '', // Paquete de cadenas aleatorias de firma de pago: '', // Los detalles de la orden se extenden cadena, ver Apéndice 5, PaySign: '', // Las firmas de pago son para detalles, ver Apéndice 5});Apéndice 1 - Algoritmo de firma de permiso JSSDK
jsapi_ticket
Antes de generar una firma, primero debe comprender JSAPI_Ticket. JSAPI_Ticket es un boleto temporal utilizado por la cuenta oficial para llamar a la interfaz WeChat JS. En circunstancias normales, el período de validez de JSAPI_Ticket es de 7200 segundos, que se obtiene a través de Access_Token. Dado que el número de llamadas de API para obtener JSAPI_Ticket es muy limitado, la actualización frecuente de JSAPI_Ticket hará que las llamadas API sean limitadas y afecten su propio negocio. Los desarrolladores deben almacenar en caché JSAPI_Ticket a nivel mundial en sus servicios.
1. Consulte el siguiente documento para obtener Access_Token (válido para 7200 segundos, los desarrolladores deben almacenar en caché de acceso a nivel mundial en su servicio): ../12/4b08382e91217687730a2dfc71e9218c.html
2. Use el access_token obtenido en el primer paso para solicitar el jsapi_ticket (válido para 7200 segundos, el desarrollador debe almacenar en caché jsapi_ticket en su servicio): https://api.weixin.qq.com/cgi--bin/ticket/getticket?access_token=access_toke&type=jsapi
Devuelve con éxito el siguiente JSON:
{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200}Después de obtener JSAPI_Ticket, puede generar una firma para la verificación del permiso JSSDK.
Algoritmo de firma
Las reglas de generación de la firma son las siguientes: los campos que participan en la firma incluyen Non -Cestr (cadena aleatoria), JSAPI_Ticket válido, Timestamp (Timestamp), URL (la URL de la página web actual, sin incluir # y sus partes posteriores). Después de clasificar todos los parámetros que se firmarán de pequeño a grande (orden de diccionario) de acuerdo con el código ASCII del nombre del campo, el formato del par de valores clave de URL (es decir, Key1 = Value1 & Key2 = Value2 ...) se usa para empalmarse en una cadena String1. Cabe señalar aquí que todos los nombres de parámetros son caracteres en minúsculas. String1 está encriptado, y el nombre de campo y el valor de campo son valores originales y no se realiza un escape de URL.
Es decir, firma = Sha1 (String1). Ejemplo:
• Non -CESTR = WM3WZYTPZ0WZCCNW
• JSAPI_Ticket = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSYY3-SL-HHTDFL2FZFY1AOCHKP7QGG
• Marca de tiempo = 1414587457
• url = http: //mp.weixin.qq.com
Paso 1. Después de clasificar todos los parámetros que se firmarán de pequeño a grande (orden de diccionario) de acuerdo con el código ASCII del nombre del campo, empapealos en cadena String1 usando el formato del par de valores clave de URL (es decir, key1 = value1 & key2 = value2 ...)::
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSYY3-SLL-HHTDFL 2fzfy1aochkp7qg & noncestr = wm3wzytpz0wzccnw × tamp = 1414587457 & url = http: //mp.weixin.qq.com
Paso 2. Firme String1 con SHA1 y obtenga firma:
F4D90DAF4B3BCA3078AB155816175BA34C443A7B
Cosas a tener en cuenta
1. La marca de tiempo sin captura y tiempo utilizada para la firma debe ser la misma que la marca de tiempo sin capas y el tiempo en wx.config.
2. La URL utilizada para la firma debe ser la URL completa de la página que llama a la interfaz JS.
3. Por razones de seguridad, los desarrolladores deben implementar la lógica de firma en el lado del servidor.
Apéndice 2 - Lista de todas las interfaces JS
• Onmenusharetimeline
• OnmenushareApmessage
• Onmenushareqq
• Onmenushareweibo
• Startrecord
• Stoprecord
• Onvoicerecordend
• PlayVoice
• PauseVoice
• StopVoice
• OnvoicePlayend
• SubirVoice
• Descargar Voice
• ChooseMage
• PreviewImage
• CargarImage
• Descargar EMPLEA
• TraduceVoice
• GetNetWorkType
• Localización abierta
• GetLocation
• HideoPtionMenu
• Showoptionmenu
• Hidemenuitems
• Showmenuitems
• Hideallnonbasemenuitem
• showallnonbaseMenuitem
• ventanilla cerrada
• Scanqrcode
• Elijawxpay
• GetLatestaddress
• EditarAddress
• OpenProductSpecificView
• Addcard
• Choossecard
• OpenCard
Apéndice 3 - Lista de todos los botones
Categorías básicas
• Informe: "Menuitem: exposición"
• Ajuste la fuente: "Menuitem: SetFont"
• Modo diurno: "Menuitem: DayMode"
• Modo nocturno: "Menuitem: Nightmode"
• Actualizar: "Menuitem: Refresh"
• Ver cuenta oficial (agregado): "Menuitem: Perfil"
• Ver cuenta oficial (no agregado): "Menuitem: AddContact"
Categoría de comunicación
• Enviar a un amigo: "Menuitem: Share: AppMessage"
• Compartir en momentos: "Menuitem: Compartir: Línea de tiempo"
• Compartir a QQ: "Menuitem: Compartir: QQ"
• Compartir a Weibo: "Menuitem: Compartir: Weiboapp"
• Colección: "Menuitem: Favorito"
• Compartir a FB: "Menuitem: Compartir: Facebook"
Clase de protección
• Debug: "Menuitem: Jsdebug"
• Editar etiqueta: "Menuitem: Edittag"
• Eliminar: "Menuitem: Eliminar"
• Enlace de copia: "Menuitem: CopyUrl"
• Página web original: "Menuitem: OriginPage"
• Modo de lectura: "Menuitem: ReadMode"
• Abierto en el navegador QQ: "Menuitem: OpenWithqqBrowser"
• Abierto en Safari: "Menuitem: OpenWithSafari"
• Correo electrónico: "Menuitem: Compartir: correo electrónico"
• Algunas cuentas públicas especiales: "Menuitem: Share: Brand"
Apéndice 4 - Algoritmo de generación de firma de ubicación y dirección
Las reglas de generación de ADDRSIGN son las mismas que las de la verificación del permiso de JSSDK (ver Apéndice 1), pero los parámetros de firma participantes son diferentes. Los parámetros de firma que participan en AdDRSIGN son: APPID, URL (URL web actual), Timestamp, Non -Cress, Accessoken (credenciales de autorización del usuario, consulte el protocolo OAuth2.0 para obtener).
Apéndice 5 : campo de extensión de pago y algoritmo de generación de firmas
Detalles del pedido (paquete) Definición de cadena de extensión
Cuando el comerciante redirige la API JS, el comerciante necesita determinar los detalles del pedido en este momento y combinar los detalles del pedido en el paquete de cierta manera. Después de que se llama a la API JS, WeChat generará una orden de prepago a través del contenido del paquete. Lo siguiente definirá la lista de campo requerida y el método de firma para el paquete. Se debe tener en cuenta la interfaz: ¡todos los parámetros entrantes son tipos de cadenas!
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.