科技资讯网站微信小程序与内嵌网页交互如何实现支付功能小白们来学习吧

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始探索小程序内嵌网页的世界。作为一名曾经只是熟悉安卓操作系统的小白，我对这个新功能感到好奇和挑战。

为了实现小程序与内嵌网页之间的交互，特别是支付功能，我必须深入研究JSSDK 1.3.0提供的接口。然而，当我尝试调用支付接口时，我遇到了一个问题：这些接口并不支持支付操作。这就需要我花时间去理解并解决这个技术难题。

经过一番努力和学习，我终于找到了使两者相互通信的大致流程：

首先，我们需要准备一些文件。在本文中，我们将使用以下几个文件：

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

web-view.vue：这是内嵌网页中的Vue组件，它负责处理用户点击支付按钮时所需传递给原生页面的小程序参数。

在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;

...

},

当用户完成支付并且返回至应用之后，系统会更新全局变量以反映这次交易，并确保其正确性。

paySuccess () {

let currentTime = new Date().getTime()

jumpUrl = options.jumpUrl + encodeURIComponent(`?payResult=1&time=${currentTime}`)

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

最后，在某些情况下，如果你希望实现无刷新加载，你可能需要进一步优化代码，以便正确地处理路由锚点和查询字符串参数。

总之，这是一个复杂但有趣的过程。在实践中，你可能还会发现更多细节和挑战，但通过不断学习和适应，你最终能够克服困难，实现你想要的小程序与内嵌网页之间的完美交互。