2025-02-23 数码 0
在上个月，小程序推出了一个新的功能，它支持内嵌网页。作为一名曾经只是小安卓开发者，我开始了我的小程序内嵌网页之旅。在这次探索中，我遇到了一个挑战：JSSDK 1.3.0提供的接口不支持支付调用。这迫使我深入研究，直到最终成功实现了两端的交互。
以下是大致的流程：
首先，我们需要准备相关文件。这些文件将在后续过程中被使用。
app.js：这是小程序的app.js文件，其中定义了全局变量paySuccessUrl，用于保存支付成功后的跳转URL。
web-view.vue：这个组件负责处理网页中的支付逻辑。
在web_pay.vue组件中，当用户触发支付时，我们需要将支付金额、说明以及跳转URL（及其他想要传递的参数）传递给原生页面。我们通过编码URI来确保正确传输这些信息。
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 = options.jumpUrl encodeURIComponent(`?payResult=1time=$`)
// ... 其他代码 ...
getApp().globalData.paySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里
}
最后，在onShow方法中，当应用显示时，我们检查是否有存储的paySuccessUrl并进行相应操作。如果存在，则设置数据以触发界面更新，但由于采用的是vue-router且两个URL仅在query参数上有差异，因此不会触发界面刷新或重新加载路由，而是会触发beforeRouteUpdate事件，允许我们根据新查询参数更新界面状态。
onShow: function () {
console.log(on show)
let paySuccessUrl = getApp().globalData.paySuccessUrl
if (paySuccess) {
let url = decodeURIComponent(paySuccess)
this.setData({
url
})
}
},
通过这种方式，即使是在没有完整刷新的情况下，也能确保用户体验得到优化。此外，如果你使用的是vue-router history模式，你可能还需要考虑如何处理路由锚点#位置和现有的路由参数问题。
