「 微信小程序开发之webview组件内网页实现微信原生支付」2023年7月3日

公司项目一直都是微信H5，老板突发奇想让更新两年多没发版的微信小程序，愁破脑袋，项目太大，前端组就我一个人实在有心无力，所以选择使用 webview 组件来直接插入整个H5项目，这样省事省力，不用重新埋头苦敲！！！

有了web-view那什么公众号内容、官网、网页有域名的那种直接就可以扔到小程序的webview组件了，反正就是一把梭。。。

关于微信小程序直接上文档

微信小程序

小程序的web-view组件

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里面，正合我意！！！

好了，就絮叨这么多，坑还是很多的，判断是否是小程序环境就有几种方式，微信文档也写了两种，大家感兴趣的可以去看看！