2025-02-23 数码 0
在上个月，小程序推出了一个新的功能，它支持内嵌网页，这让我开始了探索小程序内嵌网页的旅程。在这之前，我只是一个普通的小安卓用户。然而，当我尝试使用JSSDK 1.3.0提供的接口时，我遇到了一个问题：支付接口的调用并未得到支持。这迫使我深入研究，终于找到了两边交互的解决方案。
以下是实现这一功能的大致流程：
首先，我们需要了解将要使用的一些文件。这些文件包括：
app.js：小程序中的全局数据对象，其中定义了一个名为 paySuccessUrl 的变量，用来存储支付成功后的跳转URL。
web-view>：用于在内嵌网页中展示小程序页面。
web_pay.vue：负责处理支付逻辑和向小程序传递参数。
接下来，我们来看看具体如何操作：
在 web_pay.vue 中，调用支付时，将支付金额、支付说明、以及支付成功后跳转到的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 = options.jumpUrl + encodeURIComponent(`?payResult=1&time=${currentTime}`)
getApp().globalData.paySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里
}
当界面显示时，如果有保存好的支付成功URL，则进行相应处理并清空该变量，以防止重复触发事件。
onShow: function () {
console.log(on show)
let paySuccessUrl = getApp().globalData.paySuccessUrl
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
url,
})
}
},
5 最后，在路由发生变化的时候检查是否有新的数据，并根据情况进行处理。如果是从微信端返回的话，就会触发beforeRouteUpdate方法，该方法可以用来更新界面状态或执行其他任务，如提醒用户已经完成某项操作等。
beforeRouteUpdate (to, from, next) {
console.log(路由发生改变，很有可能是小程序的支付成功回调)
if (to.query && to.query.payResult === '1') {
// 如果查询参数中含有'payResult'且其值为1，那么意味着这是来自微信端的一个通知，不需要重新渲染当前组件，因为前后两个URL只有路由参数query不一样，所以不会触发界面刷新，也不会触发路由重新加载，而是在这里就能拿到最新数据了。
console.log('已知此为微信端通知')
} else {
next()//继续走正常流程，如果不是则继续执行next函数，不做特殊处理
}
},
以上就是如何利用JSSDK与Vue结合实现微信内嵌网页与原生交互，以及通过设置正确路径结构，使得无需刷新即可完成业务逻辑，从而提高用户体验。希望对你也有所帮助！如果你觉得文章内容对你有帮助，请点赞支持一下哦！
