中央部委排名顺序火了微信小程序与内嵌网页交互实现支付功能小白们来学习吧

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将网页集成到小程序中的探索之旅。之前，我只是一个普通的安卓用户。

为了实现支付功能，内嵌网页可以使用JSSDK 1.3.0提供的接口，但令人失望的是，它不支持直接调用支付接口。我花时间研究后终于找到了解决方案，打通了两端的交互流程。

下面是大致的步骤：

首先，我们需要了解涉及到的文件：

app.js：小程序中定义全局变量paySuccessUrl用于保存支付成功后的跳转URL。

web-view.vue：在这个组件中，我们会调用支付接口，并传递必要参数，如金额、说明和跳转URL等。

在网页中的Vue组件中，通过以下代码进行调用：

<template>

<view>

<!-- 其他内容 -->

<button @click="callPay">触发支付</button>

</view>

</template>

<script>

export default {

data() {

return {};

},

methods: {

callPay() {

let jumpUrl = encodeURIComponent(window.location);

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

this.$wx.navigateTo({ url: path });

}

}

};

</script>

<style scoped></style>

然后，在小程序原生页面中接收这些参数并处理：

onLoad(options) {

console.log(options);

// 获取来自网络页面传递过来的值

const { amount, title, jumpUrl } = options;

// ...其他逻辑处理...

}

当支付完成后，我们需要更新全局变量以保存结果和当前时间：

paySuccess() {

const currentTime = new Date().getTime();

const jumpUrlWithParams = encodeURIComponent(`?payResult=1&time=${currentTime}`);

getApp().globalData.paySuccessUrl = jumpUrlWithParams; // 更新全局变量

}

最后，在小程序显示时检查是否有已保存的支付成功信息，并根据情况更新界面：

onShow() {

const paySuccessUrl = getApp().globalData.paySuccessUrl;

if (paySuccessUrl) {

const decodedJumpLink = decodeURIComponent(paySuccessUrl);

this.setData({ url: decodedJumpLink }); // 更新界面数据以反映最新状态

}

// 清空已存储的成功回调地址，以防止误触发重复操作。

getApp().globalData.paySuccessUrl = '';

}

此外，当界面路由发生变化时（如由前述过程触发），我们可以利用Vue Router来捕获这种变化并执行相应逻辑：

beforeRouteUpdate(to, from, next) {

if (to.query && to.query.hasOwnProperty('payResult')) {

console.log('路由发生改变，可能是因为微信的小程序返回');

if (to.query['payResult'] === '1') {

console.log('支付成功');

next();

} else {

next();

}

} else {

next();

}

}

这样就完成了从内部网络到微信小程序之间通信所需的大部分工作。如果你对这方面感兴趣，请关注我的未来的教程或示例代码。此文如果对你有帮助，不妨点亮一下赞赏按钮。