2025-02-23 数码 0
在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始探索小程序与内嵌网页的交互之旅。之前，我仅擅长于安卓开发。在研究中，我发现JSSDK 1.3.0提供的接口并不支持支付功能调用，这让我陷入了困境。但经过一番努力，终于找到了解决方案。
以下是实现过程的大致流程：
首先，需要说明涉及到的文件和步骤：
app.js：小程序的app.js文件，其中定义了全局变量paySuccessUrl，用来存储支付成功后的跳转URL。
web-view: 内嵌网页组件。
web_pay.vue: 网页中的Vue组件。
在web_pay.vue中，当用户点击进行支付时，将必要信息（如支付金额、说明和跳转URL）通过参数传递给原生页面。
let jumpUrl = encodeURIComponent(window.location);
let path = `/page/pay/pay?amount=${title}=${jumpUrl}&=`;
this.url = path;
在 onLoad 方法中获取这些参数，并进行解构赋值：
onLoad: function(options) {
console.log(options);
// 获取网页传过来的值
// TODO 用es6解构来获取值TODO
jumpUrl = options.jumpUrl;
amount = options.amount;
title = options.title;
},
当支付成功后，在paySuccess方法中更新全局变量paySuccessUrl并保存当前时间作为查询参数：
paySuccess () {
let currentTime = new Date().getTime();
jumpUrl += `?payResult=1&time=${currentTime}`;
getApp().globalData.paySuccessUrl=jumpUrl; //保存跳转url到小程序全局变量里
}
然后，在onShow方法中检查是否有未处理的支付成功URL，并清空该URL以防止重复触发事件：
onShow: function () {
let paySuccessUrl = getApp().globalData.paySuccessUrl;
if (paySuccessUrl) {
this.setData({
url: decodeURIComponent(paySuccessUrl)
});
getApp().globalData.paySuccessUrl=''; //清空支付成功url，防止一些操作触发onShow事件
}
},
最后，在beforeRouteUpdate钩子函数中处理路由变化并根据query参数判断是否为支付成功情况，从而避免界面刷新或重新加载路由：
beforeRouteUpdate (to, from, next) {
if (to.query && to.query.payResult === '1') {
console.log('Payment successful');
}
next();
},
这就是我的经验分享，如果对你有帮助，请点赞支持！
