省科技厅是做什么的微信小程序与内嵌网页交互实现支付功能小白们来学习吧

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将小程序与网页的交互实现支付功能的探索之旅。作为一名初出茅庐的小白，我之前只擅长使用安卓设备。

内嵌网页能够利用JSSDK 1.3.0提供的接口，但令人沮丧的是，它不支持调用支付接口。经过一番深入研究，我终于找到了两边交互的解决方案。

下面是大致流程：

首先，需要说明一下涉及到的文件，我们将会用到：

app.js：小程序的全局变量paySuccessUrl，用于保存支付成功后的跳转URL。

web-view>：内嵌网页中使用JSSDK 1.3.0提供的接口。

然后，在内嵌网页中的web_pay.vue组件中，当触发支付时，我们需要传递一些参数给小程序原生页面，如支付金额、支付说明和跳转URL等，并对这些参数进行编码处理。

具体步骤如下：

在小程序端定义全局变量：

globalData: {

paySuccessUrl: ''

}

在内嵌网页中设置跳转URL并编码处理：

let jumpUrl = encodeURIComponent(window.location)

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

url: path

})

在小程序端接收并解析来自网络页面传递过来的值：

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 += `?payResult=1&time=${currentTime}`

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

}

当页面显示时检查是否有未处理完毕的支付成功事件，并更新界面状态：

onShow: function () {

let paySuccessUrl = getApp().globalData.paySuccessUrl;

if (paySuccessUrl) {

let url = decodeURIComponent(paySuccessUrl);

this.setData({

url,

});

}

},

6 最后，在Vue Router路由发生变化时，根据路由参数查询数据并执行相应操作（如更新界面或触发其他逻辑）:

} next() },

此刻已是深夜，我决定暂停撰写，以便于第二天继续完善这个过程。如果这篇文章对你有所帮助，请点赞以示鼓励！