背景：

在微信H5頁面已經(jīng)實現(xiàn)了微信JSAPI的網(wǎng)頁支付，老板要求把整個業(yè)務(wù)線快速轉(zhuǎn)移到微信小程序中，作為懶惰的程序員來說，直接把頁面嵌套到小程序不就行了。說干就干，在小程序中設(shè)置好基本信息后，一預(yù)覽居然成功了，一切看來是那么順利，可到了系統(tǒng)的支付環(huán)節(jié)時，小程序是無法調(diào)用JSAPI微信支付的，難不成要重構(gòu)所有頁面轉(zhuǎn)成小程序？這可是個大工程，作為業(yè)余前端的我來說肯定搞不定。于是在網(wǎng)上就搜索了一下，確實有解決方案，樓主就花點時間給大家整理一下。

前提條件：

了解微信支付相關(guān)的接口文檔，有微信小程序的基本開發(fā)經(jīng)驗。

思路：

小程序打開H5頁面后，在需要調(diào)用微信支付的頁面用js做當(dāng)前頁面環(huán)境判斷：

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

如果是在小程序中打開，則通過wx.miniProgram.navigateTo 方法跳轉(zhuǎn)到小程序的內(nèi)置頁面：

<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});
}

在小程序內(nèi)置頁面pay中獲取傳過來的參數(shù)，做業(yè)務(wù)處理，然后調(diào)用小程序的支付接口，獲取小程序需要的關(guān)鍵支付參數(shù)(該方法可參考微信支付對接文檔：小程序支付開發(fā)指引)：

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

小程序支付需要的openid參數(shù)，這個openid和微信公眾號的openid不是相同的，所以小程序內(nèi)置app.js還需要獲取小程序的openid（微信小程序無需授權(quán)可直接根據(jù)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) {
              //發(fā)起網(wǎng)絡(luò)請求
              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:''
  }
})

小程序頁面構(gòu)造截圖：

說明：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鏈接支付時跳轉(zhuǎn)到的小程序支付頁面文章來源地址http://www.zghlxwxcb.cn/news/detail-512295.html

---pay.js代碼：
let order_id=0,amount=0,quotation_id=0,api_token=0;
var app = getApp();
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {},
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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">確認(rèn)支付</button>
</view>
</form>
</view>

來看一下最后的效果：