2025-02-23 数码 0
在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始探索小程序与内嵌网页的交互之旅。之前，我仅擅长于安卓开发。在研究中，我发现JSSDK 1.3.0提供的接口对支付功能不具备调用能力，于是我决心打通这两者之间的连接。
为了实现这一目标，我设计了以下步骤：
首先，需要准备涉及到的文件。主要包括app.js和web-view.vue两个文件。
在app.js中，我们定义了一个全局变量paySuccessUrl，用以保存支付成功后的跳转URL。
接着，在web-view.vue中，当触发支付时，我们将所需参数如金额、说明以及跳转URL等通过encodeURIComponent进行编码，然后传递给小程序原生页面。
在 onLoad函数中，我们获取这些传递过来的值，并进行处理。此外，还需要注意的是，要使用ES6解构来获取这些值。
当支付成功后，我们更新全局变量paySuccessUrl，并附加支付结果和当前时间，以便后续处理。
最后，在onShow函数中，当应用显示时，如果有保存的paySuccessUrl，则清空该变量并设置数据到界面上。这样，当用户从支付状态返回时，界面会自动刷新显示最新信息，而不会导致重复触发支付逻辑。此外，由于我们采用的是vue-router路由管理系统，并且前后两个URL仅在query参数不同，因此不会导致界面刷新或重新加载路由，只会触发beforeRouteUpdate方法供我们进一步处理。在这个方法中，我们可以解析to.query中的数据并根据需求进行相应操作。如果是来自小程序的支付成功回调，我们还可以做出进一步判断和响应。
尽管已经很晚，但我希望我的文章能够为您带来帮助。如果有兴趣，您可以点赞鼓励一下！
