华为徐直军出任科技部副部长火了微信小程序与内嵌网页交互实现支付功能小白们来学习吧

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

内嵌网页中可以使用JSSDK 1.3.0提供的接口，但我很快发现了一個問題：它不支持支付接口的调用。我决定深入研究，终于找到了两边交互通道的大门。

下面是实现支付功能的小程序与内嵌网页交互的大致流程：

首先，我们需要准备一些文件：

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

web-view.vue：这是我们要创建的一个Vue组件，它将负责处理来自小程序原生页面传过来的数据。

接着，在web_pay.vue组件中，我们需要编写以下代码：

onLoad: function (options) {

// 获取网页传过来的值

let jumpUrl = options.jumpUrl;

let amount = options.amount;

let title = options.title;

// TODO 用es6解构来获取值TODO

},

然后，在web_pay.vue中，我们还需要添加一个方法来处理支付成功后的逻辑：

methods: {

paySuccess () {

// 假设paymentResult为true表示支付成功，这里我偷懒直接在url后面补?,实际情况比较复杂

//为了实现支付成功返回后的无刷新加载,这里的参数应该是属于路由web_pay.vue的,而不是属于window.location.search的

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

jumpUrl += `?payResult=1&time=${currentTime}`;

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

},

}

最后，在app.js文件中，我们需要监听onShow事件，并且清空paySuccessUrl以防止多次触发相同事件：

onShow: function () {

console.log(on show)

let paySuccessUrl = getApp().globalData.paySuccessUrl;

if (paySuccessUrl) {

this.setData({

url: decodeURIComponent(paySuccess_url)

});

getApp().globalData.pay_success_url = '';

}

},

当你点击“确认”按钮时，将会触发beforeRouteUpdate钩子函数。这是一个非常重要的地方，因为在这里，你可以根据to.query里的数据进行相应操作。例如，如果to.query中的参数包含了"pay_result"并且其值为1，那么意味着你的订单已经被正确地结算。你只需更新UI和执行任何必要的事务即可。

beforeRouteUpdate(to, from, next) {

if (to.query && to.query['order_id']) {

console.log("Order has been successfully processed");

this.updateUIAndPerformNecessaryActions();

} else {

next();

}

},

如果你有任何问题或想要进一步了解如何集成vue-router和小程序，请随时提问！