最近做公眾號開發(fā)，需要做充值功能調(diào)起微信支付，項目是Vue框架寫的h5頁面，研究了很多微信的官方文檔和一些文章。終于開發(fā)完成，在此總結(jié)一下jssdk-jsapi微信支付的開發(fā)流程。
前端開發(fā)(vue-cli)：

1、項目中下載jsapi文件包

（1）npm install weixin-jsapi
（2）在頁面中引入文件 import wx from 'weixin-jsapi'

如果是html文件中可以<script>標(biāo)簽引入

// 只需要引入weixin-1.4.0.js 調(diào)試不成功時引入jq 
// <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2、頁面授權(quán)

頁面授權(quán)可以根據(jù)項目需求選擇靜默授權(quán)和用戶手動授權(quán)兩種方式

（1）對于已關(guān)注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進入本公眾號的網(wǎng)頁授權(quán)頁，即使是scope為snsapi_userinfo，也是靜默授權(quán)，用戶無感知；
（2）對于以snsapi_base為scope的網(wǎng)頁授權(quán)，就靜默授權(quán)的，用戶無感知。

打開此鏈接獲取到code值
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec

參數(shù)說明.png

3、拿到code傳給后端接口，后端返回openid,token等用戶信息，主要是為了獲取openid

4、【立即充值】點擊事件提交充值金額等頁面信息，成功后執(zhí)行以下代碼

  wx.config({ 
    debug: true, // 這里一般在測試階段先用ture，等打包給后臺的時候就改回false, 
    appId: this.wx_config.appId, // 必填，公眾號的唯一標(biāo)識 
    timestamp: this.timestamp, // 必填，生成簽名的時間戳     
    nonceStr: this.nonceStr, // 必填，生成簽名的隨機串 
    signature: this.paySign, // 必填，簽名 
    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 
  }) 
  wx.ready(() => {  
    wx.checkJsApi({     
      jsApiList: ['chooseWXPay'],     
      success:function(res){ 
        console.log("seccess") 
        console.log('hskdjskjk', res) 
      }, 
      fail:function(res){      
        console.log("fail");       
        console.log(res) }   
      })   
    wx.chooseWXPay({     
        timestamp: this.timestamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的timeStamp字段名需大寫其中的S字符     
        nonceStr: this.nonceStr, // 支付簽名隨機串，不長于 32 位         
        package: this.package, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=\*\*\*）     
        signType: this.signType, // 簽名方式，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'     
        paySign: this.paySign, // 支付簽名     
        success: function (res) {  // 支付成功后的回調(diào)函數(shù)       
          alert(res.errorMsg)     
        },     
        fail: function (res) {       
          alert("支付失敗");       
          alert(res.errMsg);     
        }   
      }) 
  }) 
  wx.error(err => { 
    alert(err) 
  })

5、測試支付功能時需要在微信公眾號后臺綁定開發(fā)者微信號，必須發(fā)測試線測試，本地不能測試

屏幕快照 2020-01-17 上午10.15.05.png

原生頁面開發(fā)參考微信支付開發(fā)文檔：https://pay.weixin.qq.com/wiki/doc/api/external/jsapi.php?chapter=7_7&index=6