科技部人才与科学普及司微信小程序与内嵌网页交互实现支付功能小白们能否轻松掌握

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将小程序与网页的交互实现支付功能的探索之旅。作为一名初出茅庐的小安卓开发者，我面临着许多挑战，尤其是在尝试使用JSSDK 1.3.0提供的接口时发现支付接口无法调用。

经过一番深入研究和实践，我最终成功打通了两者的交互流程。以下是大致的步骤：

首先，我们需要准备一些文件。在这个过程中，我们会用到：

app.js：小程序的app.js文件，其中定义了一个全局变量paySuccessUrl，以保存支付成功后的跳转URL。

web-view：用于内嵌网页中的组件。

在内嵌网页web_pay.vue中，当触发支付时，我们需要将相关参数（如金额、说明和跳转URL）传递给小程序原生页面：

let jumpUrl = encodeURIComponent(window.location)

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

this.setData({

url: path

})

然后，在原生页面 onLoad 中获取这些传递过来的值，并解构赋值：

onLoad: function (options) {

console.log(options)

// 获取网页传过来的值

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

jumpUrl = options.jumpUrl

amount = options.amount

title = options.title

...

},

当支付成功后，我们需要更新全局变量并保存跳转URL，同时附带支付结果和当前时间：

paySuccess () {

let currentTime = new Date().getTime()

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

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

}

最后，在 onShow 方法中检查是否有未处理的支付成功事件，并清空全局变量以防止重复触发事件：

onShow: function () {

console.log(on show)

let paySuccessUrl = getApp().globalData.paySuccessUrl

if (paySuccessUrl) {

let url = decodeURIComponent(paySuccessUrl)

this.setData({

url: url,

})

getApp().globalData.paySuccessUr