Explicación detallada de los peligros del pago Html5 WeChat

Durante el desarrollo de las cuentas públicas de WeChat, no tenía experiencia anterior con el desarrollo relacionado con WeChat, por lo que caí en trampas y me metí en trampas. Sin embargo, también aumentó en gran medida mi familiaridad con los documentos públicos y oficiales de WeChat.

Error 1: problemas con SPA de una sola página y enrutamiento de back-end

Error 2: existe una alta probabilidad de que Android no pueda activar el pago de WeChat (no se pudo introducir el paquete js-sdk de WeChat)

En la documentación oficial de WeChat: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

Hay una DEMO como esta:

 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //Nombre de cuenta oficial, ingresado por el comerciante timeStamp:1395712654, //Marca de tiempo, número de segundos desde 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444, //Paquete de cadenas aleatorias:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //Método de firma WeChat: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //Firma de WeChat}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ // Utilice el método anterior para juzgar el retorno del front-end. El equipo de WeChat recuerda solemnemente: //res. err_msg se utilizará cuando el usuario pague correctamente. Devuelve bien, pero no se garantiza que sea absolutamente confiable. }); }if (tipo de WeixinJSBridge == indefinido){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', enBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}else{ onBridgeReady();}

Después de que el colega de back-end autorizó con éxito el código, introduje este código en la página de actividad, felizmente, y envié la compilación para probar. Bueno, Apple no tiene ningún problema y Android parece no tener ningún problema. Sin embargo, a veces Android no puede adaptarse. El pago, inicialmente pensé que era la versión WeChat. Hay otras razones, pero la probabilidad de éxito es demasiado baja. Solo se puede hacer una vez cada 10 veces. Cámbialo.

Abra las herramientas de desarrollo de WeChat, inicie sesión y finalmente encuentre que en este paso si (tipo de WeixinJSBridge == undefinido)

1.ios puede activar el js-sdk del navegador WeChat

2. La mayoría de los Android han pasado al estado indefinido.

De hecho, no sé el motivo aquí. Personalmente, creo que es un problema con la versión de navegador integrada de WeChat para Android y el método WeixinJSBridge. (espero que alguien pueda darme una respuesta)

Dado que js-sdk no se puede ajustar, introduzcamos la configuración manualmente // Entonces, a veces ser vago es más problemático, aprende de la lección

 if (typeof WeixinJSBridge == indefinido){ console.log( WeixinJSBridge); if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false }else if (document.attachEvent){ document.attachEvent('); WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}else{ onBridgeReady();}

 npm i -S weixin-js-sdk

Importe el módulo a la página que debe introducirse.

 importar wx desde 'weixin-js-sdk'

Configuración (consulte la documentación oficial de WeChat: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):

 wx.config({ debug: true, // Activa el modo de depuración. Los valores de retorno de todas las llamadas a la API se alertarán en el lado del cliente. Si deseas ver los parámetros entrantes, puedes abrirlo en el lado de la PC La información del parámetro se generará a través del registro. Solo se imprimirá en el lado de la PC: '', // Requerido, el identificador único de la marca de tiempo de la cuenta oficial: // Requerido, la marca de tiempo de la firma generada. nonceStr: '', // Obligatorio, la marca de tiempo de la firma generada Firma de cadena aleatoria: '', // Obligatorio, firma jsApiList: [] // Obligatorio, lista de interfaces JS que deben usarse. Por ejemplo, si quiero llamar a la interfaz de pago, es [chooseWXPay]});

Aquí la marca de tiempo está en minúsculas, s está en minúsculas y el tipo de datos es de tipo int.

Ahora que la configuración fue exitosa, continúe leyendo la documentación oficial.

La documentación oficial dice que existe un método listo después de que la verificación de la configuración sea exitosa, la interfaz se coloca en él para garantizar la ejecución.

 wx.ready(function(){ // El método listo se ejecutará después de que se verifique la información de configuración. Todas las llamadas a la interfaz deben realizarse después de que la interfaz de configuración obtenga el resultado. La configuración es una operación asincrónica en el lado del cliente, por lo que si necesita llamar a la interfaz relevante cuando se carga la página, la interfaz relevante debe llamarse en la función lista para garantizar una ejecución correcta. Para las interfaces que se llaman solo cuando las activa el usuario, se pueden llamar directamente y no es necesario. colocado en la función lista });

Importe parámetros listos (preste atención al tipo de datos y coopere bien con los colegas de back-end - -)

 wx.chooseWXPay({timestamp: 0, // Marca de tiempo de la firma de pago. Tenga en cuenta que todos los campos de marca de tiempo utilizados en WeChat jssdk están en minúsculas. Sin embargo, el nombre del campo timeStamp utilizado por la última versión del fondo de pago para generar firmas debe estar en mayúscula carácter nonceStr: '', // Cadena aleatoria de firma de pago, no mayor a 32 bits paquete: '', // El valor del parámetro prepay_id devuelto por la interfaz de pago unificada, el formato de envío es: prepay_id=/*/*/*) signType: '', // El método de firma, el valor predeterminado es 'SHA1' y debe pasar ' MD5' cuando se utiliza la nueva versión de pago paySign: ' ', // Firma de pago exitosa: función (res) {// Función de devolución de llamada después de un pago exitoso}});

Cuando utilicé los datos en Vue listos, accidentalmente caí en el pozo señalado por esto. Si no se agrega el enlace, los parámetros en wx.chooseWXPay no pueden obtener los datos solicitados desde el backend. Esto aquí no apunta a VueComponent, naturalmente. Obtenga los datos que asigné al objeto de matriz this.wx_config después de la solicitud.

 getConfig(){ wx.config({ debug: this.wx_config.debug, // Activa el modo de depuración. Los valores de retorno de todas las API llamadas serán alertados en el lado del cliente. Si deseas ver el parámetros entrantes, puede abrirlos en el lado de la PC, la información del parámetro se imprimirá a través del registro y solo se imprimirá en el lado de la PC appId: this.wx_config.appId, // Requerido, el identificador único del oficial. marca de tiempo de la cuenta: this.wx_config.timestamp, // Requerido, generar marca de tiempo de firma nonceStr: this.wx_config.nonceStr, // Requerido, generar cadena aleatoria de firma firma: this.wx_config.signature, // Requerido, firma jsApiList: this.wx_config.jsApiList // Requerido Complete la lista de Interfaces JS que deben usarse}); //Pago WeChat wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ marca de tiempo: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, paquete: this.wechat_code.package, signType: this.wechat_code.signType, paySign: this.wechat_code.paySign, éxito: función () { // Función de devolución de llamada después de una alerta de pago exitosa (pago exitoso window.location.href =); /hd/becomevip }, cancelar: función() {alerta(pago fallido);

Siempre es inevitable pisar obstáculos. En resumen, no hagas lo correcto sólo porque tienes miedo de tener problemas ~.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.