微信小程序内嵌H5页面实现微信支付

背景：

在微信H5页面已经实现了微信JSAPI的网页支付，老板要求把整个业务线快速转移到微信小程序中，作为懒惰的程序员来说，直接把页面嵌套到小程序不就行了。说干就干，在小程序中设置好基本信息后，一预览居然成功了，一切看来是那么顺利，可到了系统的支付环节时，小程序是无法调用JSAPI微信支付的，难不成要重构所有页面转成小程序？这可是个大工程，作为业余前端的我来说肯定搞不定。于是在网上就搜索了一下，确实有解决方案，楼主就花点时间给大家整理一下。

前提条件：

了解微信支付相关的接口文档，有微信小程序的基本开发经验。

思路：

小程序打开H5页面后，在需要调用微信支付的页面用js做当前页面环境判断：

var is_weixin_app = window.__wxjs_environment === 'miniprogram';

如果是在小程序中打开，则通过wx.miniProgram.navigateTo 方法跳转到小程序的内置页面：

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
if(is_weixin_app){
wx.miniProgram.navigateTo({url:'/pages/pay/pay?api_token='+api_token+'&order_id='+order_id+'&amount='+order_amount});
}

在小程序内置页面pay中获取传过来的参数，做业务处理，然后调用小程序的支付接口，获取小程序需要的关键支付参数(该方法可参考微信支付对接文档：小程序支付开发指引)：

'timeStamp': mydata.timeStamp,
'nonceStr': mydata.nonceStr,
'package': mydata.package,
'signType': mydata.signType,
'paySign': mydata.paySign,

小程序支付需要的openid参数，这个openid和微信公众号的openid不是相同的，所以小程序内置app.js还需要获取小程序的openid（微信小程序无需授权可直接根据code获取openid，微信公开接口：https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code），并将openid存在全局变量中:

App({
  onLaunch() {
    let that = this;
    wx.login({
      success (res) {
          if (res.code) {
              //发起网络请求
              wx.request({
                  url: 'https://localhost/api/home/wxapp_openid', //接口地址
                  data: {
                    code: res.code
                  },
                  success: function (res){
                    that.globalData.openid = res.data.data.openid;
                  }
              })
          }
      }
  })
  
  },
  globalData: {
    userInfo: null,
    openid:''
  }
})

小程序页面构造截图：

说明：index是小程序的首页，用来打开H5的链接

---index.js代码：
Page({
  data: {
    bg_url : "https://localhost"
  },
  onLoad() {
  },
})


---index.wxml代码：
<!--index.wxml-->
<official-account></official-account>
<web-view src="{
    
    {bg_url}}"></web-view>

pay是H5链接支付时跳转到的小程序支付页面

---pay.js代码：
let order_id=0,amount=0,quotation_id=0,api_token=0;
var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    order_id=options.order_id;
    amount=options.amount;
    quotation_id=options.quotation_id;
    api_token=options.api_token;
    this.submitInfo();
  },
  submitInfo(){
    wx.showLoading({
      title: '微信支付...',
      mask: true
    });
    wx.request({
      url: 'https://localhost/api/order/pay_request', 
      data: {
        type:1,
        pay_mode:3,
        order_id: order_id,
        amount:amount,
        quotation_id:quotation_id,
        api_token:api_token,
        openid:app.globalData.openid
      },
      success: function (res) {
        wx.hideLoading();
        if (res.data.ret == "200") {
          let mydata = res.data.data.data;
          wx.requestPayment(
            {
              'timeStamp': mydata.timeStamp,
              'nonceStr': mydata.nonceStr,
              'package': mydata.package,
              'signType': mydata.signType,
              'paySign': mydata.paySign,
              'success': function (e) { //支付成功
                wx.showToast({
                  title: '支付成功',
                  icon: 'success',
                  duration: 1200,
                  mask: true,
                  success: function ()
                  {
                    setTimeout(function () {
                      wx.navigateBack(); 
                    }, 1500);
                  }
                });

              },
              'fail': function (e) { //支付取消或出错
              //  wx.navigateBack();
              }
            })
        }
        else {
          wx.showToast({
            title: '该订单已失效',
            icon: 'success',
            duration: 3000,
            mask: true,
            success: function () {
              setTimeout(function () {
                wx.navigateBack();
              }, 1500);
            }
          })
        }
      }
    });
  }
})

---pay.wxml代码
<view class='body'>
<form bindsubmit="submitInfo" report-submit='true'>
<view class='body-view'><text >微信小程序支付</text></view>
<view class="btn-area">
<button type="primary" form-type="submit">确认支付</button>
</view>
</form>
</view>