和平精英免费开启科技软件下载微信小程序与内嵌网页交互实现支付功能小白们来学习吧

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始探索小程序内嵌网页的世界。作为一名曾经只是安卓开发者的初学者，我遇到了许多挑战，特别是在尝试使用JSSDK 1.3.0提供的接口时发现支付接口调用被禁用。这迫使我深入研究，并最终找到了两边交互的解决方案。

以下是实现这一功能的大致步骤：

首先，我们需要了解涉及到的文件和流程。这里有几个关键文件和概念：

app.js：这是小程序的主要JavaScript文件，其中定义了全局变量paySuccessUrl来保存支付成功后的跳转URL。

web-view: 这是一个Web视图组件，它可以加载外部网页并与小程序进行交互。

web_pay.vue：这个Vue组件负责处理支付逻辑，它会将支付金额、说明以及支付成功后的跳转URL等信息传递给小程序原生页面。

下面是具体的实现步骤：

在web_pay.vue中，当用户触发支付操作时，将必要参数编码后传递给原生页面：

let jumpUrl = encodeURIComponent(window.location)

let path = `/page/pay/pay?amount=$title=$jumpUrl=$`

url: path

})

在原生页面中，通过onLoad事件获取这些参数：

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 += `?payResult=1&time=${currentTime}`

// payResult=1表示支付成功，这里我偷懒了直接在url后面补?,实际情况比较复杂

getApp().globalData.paySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里

}

7-8. 在onShow事件中检查是否存在全局变量中的跳转URL，如果存在，则解析并设置数据，以便于界面显示正确，同时清空该变量以防止重复触发：

onShow: function () {

let paySuccessUrl = getApp().globalData.paySuccessUrl

if (paySuccessUrl) {

let url = decodeURIComponent(paySuccess Url)

this.setData({

url,

})

}

},

beforeRouteUpdate (to, from, next) {

console.log(路由发生改变，很有可能是小程序的支付成功回调)

if (to.query && to.query.payResult === '1') {

console.log('payment successful')

}

next()

},

这样就完成了从内嵌网页到原生页面之间数据传递，并且保证了无刷新加载效果。如果你对此有任何疑问或想要进一步了解，请随时提问！