详细讲解微信小程序与嵌入式网页交互实现支付功能

上个月小程序开辟了新功能，支持嵌入式网页，于是我在小程序中开始了嵌入式网页之路。在此之前，我只是一个小小的安卓。

JSSDK 1.3.0提供的接口可以在嵌入式网页中使用，但是会出现漏洞，不支持支付接口的调用。经过一番研究，双方的互动终于打开了。

一般过程

1.首先解释所涉及的文件，这些文件将在下面使用

1.1 app.js :小程序的app . js文件在globalData中定义了一个全局变量paySuccessUrl: ' '。用于保存成功的支付跳转网址：1.2wxminiwebview.js:小程序中放置web-view的接口：1.3wxminipay.js3360小程序的原生支付接口：1.4 web _ pay.vue:嵌入式网页会调用支付的路由组件接口。既然是用vue vue-router写的，大家最好了解一下vue和vue-router，记得介绍一下微信js。可惜微信不提供npm包，github提供的微信jssdk版本只有1.2.0，只能这样介绍。

脚本src=' http:/static/jweixin-1 . 3 . 0 . js ' script 2。首先，我们通常会像官方网站一样嵌入一个嵌入式网页。url是在wxmini_webview.js中的数据中定义的变量，webview加载的网页就是这个url。

Web-view src=' http : { { URL } } ' Web-view 3。在嵌入式网页web_pay.vue中，判断目前是否是微信环境。

window . wx . ready(function(){ isw xmini=window。_ _ wxjs _ environment==' mini program ' })4。当嵌入式网页web_pay.vue调用支付时，发送支付金额、支付描述、支付成功跳转url.(任何你想要的参数，记住encodeURIComponent)到小程序的本地页面

if(isWxMini){ let jump URL=encodeURIComponent(window . location)let path=`/page/pay/pay？amount=$ { amount } title=$ { desc } jump URL=$ { jump URL } ` window . wx . mini program . navigateto({ URL : path })} 5。在小程序支付界面wxmini_pay.js中获取从嵌入式网页传来的值，这里演示很方便，但实际上在页面的数据中。

Onload:函数(选项){console.log(选项)//从网页获取值//TODO使用es6解构获取值todo jumpurl=options。jumpurl数量=选项。金额标题=选项。标题.}.6.支付成功后，将跳转网址附带的支付结果和当前时间保存到全局变量中。

pay success(){让currenttime=newdate()。gettime()//这是为了防止在wxmini_webview.js文件中调用setData，导致路由不触发刷新的bug。jump URL=options . jump URL encodeuricomponent(`？pay result=1 time=$ { current time } `)//pay result=1表示支付成功，我这里比较懒，可以直接在url后填写。实际情况复杂。//为了实现成功退付后不刷新加载，这里的参数应该属于routing web_pay.vue而不是window.location.search//Therefore,需要判断路由锚点#的位置以及是否有路由参数(如果是vue-router的历史模式，我从来没有用过。它应该与window.location) GetApp()相同。global data . paysuccessurl=jump url//将跳转URL保存到小程序全局变量wx.navigateBack() //返回上一页，即容器页wxmini_pay.js}7。返回到小程序wxmini_webview.js，它将触发onshow。

onShow : function(){ console . log(' on show ')让paySuccessUrl=getApp()。因为如果不加这个，第一次成功回到这里//这个网址和第二次成功回到这里是一样的，会导致第二次支付开始，这里的setData方法会失败。url })} }，8。步骤7中的setData将触发webview中的网页加载，因为我使用的是vue-router。而且前后两个URL只有路由的参数查询不同，所以不会触发接口刷新和路由的重载，只会触发beforeRouteUpdate方法。比如付款前的界面现在是https://host/#/pay，然后跳转到https://host/？PayResult=1time=123456#/pay。此时，不会刷新界面，也不会重新加载支付路线。相反，它将触发beforeRouteUpdate(到、从、下一个)。你所要做的就是分析to.query中的数据，然后做你应该做的事情。

beforrouteupdate(to，from，next) {console.log('路由变了，很可能小程序的支付成功被回调了')让pay result=to.query.pay result if(支付结果){//小程序的支付成功if(支付结果===' 1') {console.log('支付成功，下班打卡')}} next()}，这么晚了，先睡觉吧。如果我有时间，我会组织一次演示。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。