2025-02-23 数码 0
科学技术部揭秘：微信小程序与内嵌网页交互实现支付功能的新篇章，初学者们准备好了吗？上个月，小程序开放了一个令人振奋的新特性——支持内嵌网页，这激发了我探索小程序内嵌网页世界的热情。作为一名曾经的小安卓开发者，我踏上了这条充满挑战的小程序内嵌网页之路。
在这个过程中，我遇到了一个棘手的问题，那就是JSSDK 1.3.0提供的接口不支持支付接口的调用。这让我的任务变得更加复杂，但我并没有放弃。我深入研究，终于找到了解决方案，让两边之间的交互畅通无阻。
以下是我所采用的流程：
首先，我们需要了解涉及到的文件。我们将会使用到：
app.js：这是小程序中的核心文件，在其中定义了全局变量paySuccessUrl，用于保存支付成功后的跳转URL。
web-view>：这是我们用来展示内嵌网页的地方。
web_pay.vue：这是我们的Vue组件，它负责处理支付逻辑。
现在，让我们进入具体步骤：
在app.js中，我们需要定义全局变量：
globalData: {
paySuccessUrl: ''
}
在web_pay.vue中，当用户触发支付时，我们需要向小程序传递一些必要信息，比如金额、说明和支付成功后的跳转URL。这些信息应该通过encodeURIComponent进行编码，以确保安全传输。
<template>
<view>
<!-- 这里是你的UI组件 -->
<button @tap="toPay">开始付款</button>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
toPay() {
let jumpUrl = encodeURIComponent(window.location)
let path = `/page/pay/pay?amount=$title=$jumpUrl=$`
this.$router.push({ url: path })
}
},
}
</script>
<style scoped></style>
接下来，在小程序原生页面（比如说是/wcpay）中，我们需要监听路由事件，并获取从Web-view传来的参数：
onLoad(options) {
console.log(options)
// 获取参数
jumpUrl = options.jumpUrl
amount = options.amount
title = options.title
// TODO 使用ES6解构赋值获取参数TODO
// 其他代码...
},
当用户完成支付后，我们需要更新全局变量以保存跳转URL，并且添加一个时间戳来防止重复请求：
paySuccess() {
let currentTime = new Date().getTime()
jumpUrl += encodeURIComponent(`&payResult=1&time=${currentTime}`)
// 清空之前的数据以防止重复触发onShow事件
getApp().globalData.paySuccessUrl = jumpUrl
},
最后，在onShow事件中，我们检查是否有新的跳转URL，如果有，就设置它为当前页面的一部分，从而实现无刷新加载效果：
onShow() {
console.log('显示')
let paySuccessUrl = getApp().globalData.paySuccessUrl
if (paySuccessUrl) {
let urlParams;
try{
urlParams=JSON.parse(decodeURIComponent(paySuccessUrl).split('#')[0].replace(/\?.*$/,'{}'))
}catch(e){
console.error("parse params failed");
}
if(urlParams&&urlParams.payResult === '1'){
this.setData({
...urlParams,
});
}
},
6 最后一步是在beforeRouteUpdate钩子函数中处理路由变化并做出相应操作：
beforeRouteUpdate(to, from, next) {
if (to.query && to.query.jumpFrom === 'payment' ) {
var queryParam={...to.query};
delete queryParam.jumpFrom;
this.setData(queryParam);
}
next();
},
经过一番努力和尝试，我最终成功地实现了微信小程序与内嵌网页之间的交互式支付功能。这是一个既兴奋又充满挑战性的过程。如果你对这种技术感兴趣或者想要进一步探索，也可以加入这一行列。你准备好迎接下一次挑战了吗？
