教育与科技的火热融合微信小程序如何与内嵌网页交互实现支付功能来学习吧

在上个月，小程序推出了一个新的功能，它支持内嵌网页。正是这个新功能激发了我的好奇心，我开始探索小程序与内嵌网页的交互之路。在这之前，我只是一个普通的安卓用户。

通过研究，我发现内嵌网页可以使用JSSDK 1.3.0提供的接口，但令人失望的是，它不支持支付接口的调用。我并没有放弃，经过一番努力和挑战，我终于成功地实现了两边之间的数据交换和支付功能的大致流程。

首先，我们需要准备一些文件，这些文件将在后续过程中被频繁引用：

app.js：这是小程序中的核心配置文件，其中定义了全局变量paySuccessUrl，用于存储支付成功后的跳转URL。

web-view.vue: 这是一个Web视图组件，在这里我们可以编写代码来处理来自小程序原生页面的参数传递。

现在，让我们详细说明每一步骤：

在web_pay.vue组件中，当调用支付时，我们需要将支付金额、支付说明、以及跳转URL（或任何其他你想要传递到小程序原生页面中的参数）以 encodeURIComponent 的形式发送给小程序。

<template>

<view>

<!-- 其他内容 -->

<button @click="pay">进行付款</button>

</view>

</template>

<script>

export default {

methods: {

pay() {

const amount = '100'; // 支付金额

const title = '购买商品'; // 支付说明

const jumpUrl = encodeURIComponent(window.location.href); // 获取当前页面URL

wx.navigateTo({

url: `/page/pay/pay?amount=${amount}&title=${title}&jumpUrl=${jumpUrl}`,

});

},

},

};

</script>

接下来，在微信小程序中，我们需要监听这个事件，并获取从外部传来的参数：

// app.js 文件

Page({

onLoad(options) {

console.log('onLoad', options);

this.jumpUrl = decodeURIComponent(options.jumpUrl);

this.amount = options.amount;

this.title = options.title;

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

},

});

当用户完成支付后，小程序会返回一个成功状态，并且更新我们的全局变量以保存该信息：

// app.js 文件

function paySuccess() {

let currentTimeStamp = new Date().getTime();

if (this.paySuccess) {

let timeStr=currentTimeStamp.toString();

let jump_url=this.jumpUrl+ '&time='+timeStr;

getApp().globalData.paySuccessUrl=jump_url;

} else {

alert("未知错误，请联系管理员");

}

}

最后，在小程序显示时，如果有已经保存好的跳转链接，那么就触发相应操作并更新界面：

// app.js 文件

Page({

onShow: function () {

var pay_success_url=getApp().globalData.paySuccessUrl;

if(pay_success_url){

var url=decodeURIComponent(pay_success_url);

this.setData({url:url});

}

},

});

使用Vue Router时，当路径改变但不涉及刷新时，可以使用beforeRouteUpdate钩子函数来处理这些变化：

// web_pay.vue 组件

methods: {

beforeRouteUpdate(to, from, next) {

console.log('路由发生改变');

if(this.$route.query['payResult'] === '1') {

console.log('payment success');

}

next();

},

},

如果您对这一过程感兴趣，并希望看到实际运行效果，请留意我下次分享的小demo。同时，如果本文对您有所帮助，不妨点亮一下赞赏按钮哦！