Cómo insertar páginas web en miniprogramas WeChat para realizar pagos

Las páginas web en línea pueden usar la interfaz proporcionada por JSSDK 1.3.0, pero el problema es que no admite llamadas a la interfaz de pago. Después de algunas investigaciones, finalmente se abrió la interacción entre las dos partes.

Acerca del proceso

1. Primero introduzca los archivos involucrados, que se utilizarán a continuación

1.1 app.js: el archivo app.js del mini. programa Defina una variable global paySuccessUrl: '' en globalData para guardar paySuccessUrl

1.2 wxminiwebview.js: coloque la interfaz de vista web en el mini programa 1.3 wxminipay.js: la interfaz de pago nativa del mini programa. . js: la interfaz de pago nativa del miniprograma

1.4 web_pay.vue: la página web integrada llamará a la interfaz del componente de enrutamiento de pagos. Debido a que lo escribí usando vue vue-router, es mejor para. Para que todos comprendan vue y vue-router, recuerden presentar WeChat jssdk1.3.0. La última versión del programa incluye los métodos correspondientes. Desafortunadamente, WeChat no proporciona paquetes npm y el método de importación commonjs proporcionado por alguien en github solo es aplicable a la versión WeChat jssdk1.2.0, por lo que solo puede importarlo de esta manera.

lt;script src="./static/jweixin-1.3.0.js"gt;scriptgt;

2 Primero, incrustamos una inserción como un estilo de sitio web oficial normal. página web, la URL es wxmini_webview.

lt; web-view src="{{url}}"gt; web-viewgt;

3 Determine si es el WeChat actual en la página web integrada web_pay. entorno visual.

window.wx.ready(function(){

isWxMini = window.__wxjs_environment === 'miniprograma'

})

4. Al llamar al pago en la página web integrada web_pay.vue, ingrese el monto del pago, la descripción del pago y la URL a la que acceder después del pago exitoso... (cualquier parámetro que desee, recuerde codificarlo como URIComponent), y páselos a la página nativa del Mini programa.

if (isWxMini) {

let jumpUrl = encodeURIComponent(window.location)

let path = `/page/pay/pay?amount=${ cantidad}amp;title=${desc}amp;jumpUrl=${jumpUrl}`

window.wx.miniProgram.navigateTo({

url: ruta

})

}

5. En la interfaz de pago del mini programa wxmini_pay.js, debe obtener el valor pasado a la página web integrada para facilitar la demostración. , aquí en realidad está en la página web. Almacene estos valores en los datos, que se mostrarán mejor en la interfaz.

onLoad: función (opciones) {

console.log(opciones)

// Obtener el valor pasado por la página web

// TODO usa la desestructuración de es6 para obtener el valor TODO

jumpUrl = options.jumpUrl

cantidad = opciones.cantidad

título = opciones.título

...

},

6. Después de que el pago se haya realizado correctamente, guarde la URL de salto, el resultado del pago y la hora actual en variables globales.

paySuccess () {

let currentTime = new Date().getTime()

// Esto es para evitar errores como La coherencia de los dos. URL, llamar a setData en el archivo wxmini_webview.js no activará la actualización de ruta

jumpUrl = options.jumpUrl encodeURIComponent(`?payResult=1amp; time=${currentTime} `)

//p>/payResult=1 significa que el pago se realizó correctamente. Fui flojo aquí y agregué la URL directamente al final. ?

// Para lograr una carga sin actualización después de que el pago se devuelva correctamente, los parámetros aquí deben pertenecer a la ruta web_pay.vue en lugar de window.location. buscar

//// Por lo tanto, debemos determinar la ubicación del ancla de enrutamiento # y si los parámetros de enrutamiento ya existen (si es el modo histórico de vue-router)

// Por lo tanto, debemos determinar la ubicación del ancla de ruta # y si los parámetros de ruta ya existen (si es el modo histórico de vue-router). No he usado el modo histórico del enrutador, debería ser igual que window.location)

getApp().globalData.paySuccessUrl=jumpUrl //Guarda la URL de salto en la variable global del subprograma

wx.navigateBack() //Devuelve la ubicación del ancla de enrutamiento. navegueBack()//Regrese a la última página, es decir, la página contenedora wxmini_pay.js

}

7. Regrese al mini programa wxmini_webview.js, que activará onshow. Durante este proceso, la interfaz se puede cargar sin necesidad de actualizarla.

onShow: función () {

console.log('on show')

let paySuccessUrl = getApp().globalData.paySuccessUrl

getApp().//Borrar la URL del pago exitoso para evitar que ciertas operaciones activen el evento onShow

if (paySuccessUrl) {

let url = decodeURIComponent(paySuccessUrl)

this.setData({

getApp(.globalData.paySuccessUrl=""")

getApp(.globalData.paySuccessUrl=""")setData( {

//Aquí está la segunda explicación para time=${currentTime} en el paso 6, esto se debe a que si no agregó esto la primera vez que pagóSuccessUrl y regresó aquí

/ /Esta URL es la misma que cuando pagaSuccessUrl y regresa aquí, hará que se inicie el segundo pago y el método setData aquí no funcionará. El método setData para el segundo pago comienza aquí.

url

})

}

},

8. setData en el paso 7 Activará la carga de la vista web en la web. página, porque uso vue-router y solo la consulta del parámetro de enrutamiento es diferente entre las dos URL, por lo que la actualización de la interfaz no se activará y el enrutamiento no se recargará, y solo activará el método beforeRouteUpdate. Por ejemplo, la interfaz antes del pago ahora es https://host/#/pay, y luego, después del pago exitoso, saltará a https://host/?payResult=1amp; time=123456#/ pay, la interfaz no se actualizará en este momento y la ruta de pago no se volverá a cargar. En su lugar, se activará beforeRouteUpdate (hacia, desde, siguiente). Todo lo que tiene que hacer es analizar hasta. consulta en la interfaz y luego qué hacer

beforeRouteUpdate (hacia, desde, siguiente) {

console.log('La ruta ha cambiado, lo más probable es que la devolución de llamada sea exitosa. del mini programa')

let payResult = to.query.payResult