2025-02-23 数码 0
在上个月，小程序推出了一个新的功能，它支持内嵌网页。因此，我开始了探索小程序内嵌网页的旅程，之前我只是一个普通的安卓用户。
为了实现支付功能，我们需要使用JSSDK 1.3.0提供的接口。但是，这个接口并没有直接支持支付调用。这就需要我们进行一些研究来打通两边的交互流程。
下面是大致的步骤：
首先，我们需要准备一些文件。在这个过程中，我们会用到：
app.js：这是小程序中的全局配置文件，其中定义了一个全局变量paySuccessUrl，用于保存支付成功后的跳转URL。
web-view>：这是内嵌网页中的组件，它可以与小程序通信。
接着，在内嵌网页中，当我们调用支付时，我们需要将支付金额、说明和跳转URL等参数传递给小程序原生页面。这些参数应该通过encodeURIComponent进行编码，以确保它们能够正确地传递。
然后，在小程序端，我们需要设置监听器以接收来自内嵌网页的数据，并根据这些数据更新界面状态。具体来说，以下是监听器的一部分代码：
onLoad: function (options) {
console.log(options);
// 获取网页传过来的值
jumpUrl = options.jumpUrl;
amount = options.amount;
title = options.title;
},
当支付成功后，我们需要更新全局变量以保存跳转URL和支付结果。此外，还要添加当前时间作为查询参数，以便区分不同次调用的请求。
paySuccess () {
let currentTime = new Date().getTime();
jumpUrl += encodeURIComponent(`?payResult=1&time=${currentTime}`);
// payResult=1表示支付成功，这里我偷懒了直接在url后面补?,实际情况比较复杂
}
最后，在显示页面时，如果有存储的跳转URL，则解析它并更新界面状态。
onShow: function () {
let paySuccessUrl = getApp().globalData.paySuccessUrl;
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl);
this.setData({
url,
});
}
},
在这种情况下，因为我们的路由模式采用的是哈希模式（即#），所以即使前后两个URL仅仅是在query参数上有所不同，也不会触发界面的刷新或重新加载，而是在beforeRouteUpdate钩子函数中处理。这意味着我们可以在这里解析新路由上的query参数，并做出相应操作。
如果你对这个过程感兴趣，或许可以点赞鼓励一下！
