科技改变生活小白们能否轻松掌握微信小程序与内嵌网页交互实现支付功能的秘诀

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了探索小程序与内嵌网页交互的旅程。作为一名曾经只是使用安卓设备的开发者，我面临了许多挑战。其中之一是发现JSSDK 1.3.0提供的支付接口无法直接调用。这促使我深入研究，终于成功打通了两端之间的数据流动。

为了实现这一目标，我需要了解和配置多个文件：

app.js：这里定义了一个全局变量paySuccessUrl，用来存储支付成功后的跳转URL。

web-view: 在这个组件中，我们可以通过编码URL参数来传递信息给小程序原生页面。

接下来是在内嵌网页web_pay.vue中进行支付操作时，将所需参数（如金额、说明、跳转URL等）通过小程序原生页面传递：

let jumpUrl = encodeURIComponent(window.location)

let path = `/page/pay/pay?amount=$title=$jumpUrl=$`

url: path

})

然后，在 onLoad 方法中，我们获取这些参数并进行解析：

onLoad: function (options) {

console.log(options)

// 获取网页传过来的值

// TODO 用es6解构来获取值TODO

jumpUrl = options.jumpUrl

amount = options.amount

title = options.title

},

当支付成功后，我们更新全局变量paySuccessUrl，并附加支付结果和当前时间以便于返回处理：

paySuccess () {

let currentTime = new Date().getTime()

jumpUrl = options.jumpUrl + `?payResult=1&time=${currentTime}`

getApp().globalData.paySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里

}

最后，在 onShow 方法中，当检测到全局变量中的paySuccess Url存在时，我们会将其设置为界面的数据，触发webview中的网页加载，从而执行beforeRouteUpdate方法，该方法用于处理路由变化的情况，如在本例中，当用户从未完成的支付状态回到已完成状态时，可以根据to.query里的数据进行相应处理。

如果文章对你有帮助，请点赞支持！