公司项目一直都是微信H5,老板突发奇想让更新两年多没发版的微信小程序,愁破脑袋,项目太大,前端组就我一个人实在有心无力,所以选择使用 webview 组件来直接插入整个H5项目,这样省事省力,不用重新埋头苦敲!!!
有了web-view那什么公众号内容、官网、网页有域名的那种直接就可以扔到小程序的webview组件了,反正就是一把梭。。。
关于微信小程序直接上文档
小程序的web-view组件
承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。
webview配置指向的链接去小程序后台->开发管理->开发设置进行配置就好(不配置webview是访问不了的)域名必须支持https;
在公众号里的H5页面内调用JSSDK就可以实现微信支付功能。但是看过webview组件的api文档后:webview 里面的网页(公众号迁移的网页)是调用不了外部的微信支付(也就是说不能直接调用微信h5的支付) 虽然微信支付也提供了小程序的微信支付api,但是我们整个小程序的内容就是一个webview嵌入h5内容的网页,在h5内下单是无法通过webview的api接口通知小程序调起微信支付的。 在查看微信支付小程序的支付文档后,小程序如果要调用微信支付只需要得到以下参数就可以了;
下图为小程序调用微信支付的参数:
回调结果:
示例代码:
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) { },
fail (res) { }
})
看到这应该就有思路了,在小程序内只要能通过某种方式得到webview内h5下单后生成的相关支付参数就能调起微信支付,从而就能实现webview组件内网页微信支付;
实现方式:
1.小程序代码结构
小程序采用的是MVVM模式,整个结构清晰简单!
如果需要小程序的webview组件调起微信支付,需要网页内部统一下单得到支付参数,然后通过小程序api调起微信支付,如下:
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) { },
fail (res) { }
})
如何获取支付参数呢?
查看web-view的api文档发现 web-view的内部网页可以通过JSSDK的api 实现webview网页内部控制小程序。
wx.miniProgram.navigateBack进行小程序页面的跳转比如我们的项目在 index.wxml 的 webview 网页内部使用该api就可以控制小程序从index跳转到wxpay 。
(这里需要注意:在wx 前需要加上 parent ,才可以成功!也就是 “parent.wx.miniProgram.navigateBack”)
具体步骤:
1. 在index.wxml文件添加webview组件(当然具体域名链接你可以写在index.js里,也可以直接写在src中)sitURL是index.js里面data定义的一个变量,方便通过index.js的setData方法对web-view的网页进行动态加载!
<web-view src="{{sitURL}}"/>
2. 新建一个wxpay目录,在wxpay.js下处理支付逻辑;(页面目前是空白的,功能上该页面只是为了收到webview网页的支付参数,也可以增加一些样式提高用户体验)
3. web-view网页用户在生成订单后,选择微信支付即走微信的统一下单流程,生成微信支付的参数和sgin。在webview网页内部通过path携带参数跳转到wxpay页面,具体代码实现如下:
这里需要注意:我这里使用JSSDK提供的getEnv 接口来判断是否为小程序环境,因为在公众号h5的时候还是要使用h5自己的微信支付嘛!(在图中就可以看到上文提到的parent.wx了,如果webview中有使用iframe,iframe中有涉及用到jssdk,那么可能会失效,需要在调用的地方加上parent。)
使用微信JSSDK需要安装依赖且在页面引用:
依赖安装:npm install weixin-js-sdk
引入:import wx from "weixin-js-sdk";
4. 小程序端wxpay页面逻辑实现(wxpay.js),webview内的网页通过`wx.miniProgram.navigateTo({url: path})`携带参数使小程序跳转到wxpay页面。wxpay.js 对url中携带的参数进行处理,然后通过`wx.requestPayment`调起微信支付并对支付的回调通知进行处理:
onLoad: function (options) {
var that = this;
//页面加载调取微信支付(原则上应该对options的携带的参数进行校验)
that.requestPayment(options);
},
//根据 obj 的参数请求wx 支付
requestPayment: function (obj) {
//获取options的订单Id
var orderId = obj.orderId;
console.log(obj)
//调起微信支付
wx.requestPayment({
//相关支付参数
'timeStamp': obj.timestamp,
'nonceStr': obj.nonceStr,
'package': 'prepay_id=' + obj.prepay_id,
'signType': obj.signType,
'paySign': obj.paySign,
//小程序微信支付成功的回调通知
'success': function (res) {
//定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 (index page)
var prevPage = pages[pages.length - 2];
//通过page.setData方法使index的webview 重新加载url 有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
// prevPage.setData({
// url: "https://xxxxxxx.com/wxMyPay.?orderId=" + orderId',
// }),
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
},
//小程序支付失败的回调通知
'fail': function (res) {
console.log("支付失败"),
console.log(res)
var pages=getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据")
// prevPage.setData({
// url: "https://xxxxxxxxx.com/wxMyPay.?orderId=" + orderId',
// }),
console.log("准备结束页面")
wx.navigateBack();
}
})
},
5. 微信支付后的回调通知,当wxpay页面调用`navigateBack`的时候回到index页面的时候webview 已经加载`https://xxxxxxxxxx/wxMyPay?orderId=" + orderId` 这个网页,后台实现相关逻辑。通过orderId查询该订单是否支付成功。如果支付成功就网页重定向到支付成功的页面,如果支付失败还是待支付页面。用户依旧可以点击微信支付按钮进行微信支付。
到这里web-wiew内的h5就可以实现小程序付款了;
如果用原生小程序实现支付的话就没这么麻烦,但是工作量会非常巨大,要重写整个项目,想想我就要晕了。直接把公众号的网页搬到小程序的webview里面,正合我意!!!
好了,就絮叨这么多,坑还是很多的,判断是否是小程序环境就有几种方式,微信文档也写了两种,大家感兴趣的可以去看看!