vue 微信公眾號支付 jssdk
最近專案搞了公眾號 涉及到支付和登陸授權 微信公眾號開發沒啥特別 不像小程式 這裡主要講一下 這兩個地方
首先要支付就必須要微信登陸 所以就先說一下微信登陸授權 其實很簡單 可以看一下 下面的文件
看了這個文件登入沒問題的
登陸不是我做的但是因為有很多地方的要用到 還有bug 處理 所以還是去看了下 也看懂了 支付那裡主要需要這個登陸獲取來的openid 發到後端進行計算 就是拼接加密之類的 反給你簽名 所以就一定要微信登陸授權之後才能來研究支付了
開發支付之前還需要去公眾號平臺那 進行一些開發者配置
1、在進行微信支付時，除了需要一個公眾號之外，你還需要一個微信商戶。根據商戶申請規則進行商戶申請
2、開始配置開發所需要的引數如下所示：
這是公眾號的基本開發配置，這裡在微信授權的時候就已經需要配置了 但是注意AppSecret在你第一次配置的時候就需要備份下來，如果沒有備份那麼下次使用的話你就需要去重置它
網頁域名授權，你需要填寫正確的可以訪問的專案域名，確保微信可以訪問
3、公眾號配置好後我們需要開始配置微信商戶平臺的內容了
商戶平臺需要進行的配置是：商戶號，支付金鑰
商戶號一般都是和自己公眾號的商戶號是一樣的
主要是一個支付金鑰的配置
然後是域名配置 和公眾號差不多
配置支付的引數完成之後就可以開始進行開發了 不過在支付開發中可能會有些許的麻煩 那就是你不能線上下本機測試，因為IP白名單的限制 除非你將自己的本機地址進行地址對映，但是對映操作比較繁瑣，如果自己的專案不是很大的話那就自己麻煩一點部署專案然後進行測試吧，如果你想進行對映之後本機測試這裡可以推薦一個元件給你訪問連結https://natapp.cn/
jssdk 引入
然後需要在vue專案中引入jssdk，微信為了方便使用者使用，將官方的jssdk釋出到了npm上，有一個叫weixin-js-sdk的，但我們需要使用的不是這個，網上很多在vue中引用的是這個，但是這個是為commonjs釋出的版本，只能通過require引入，很多人發現在vue中引入import wx from 'weixin-js-sdk'，console.log(wx)會出現undefined，實際為了方便es6使用，官方釋出了一個weixin-jsapi，這個才是我們能在vue中引用的jssdk。我也在這裡被坑了很久。
然後拿到後臺返回的配置引數，通過wx.config來驗證配置後，在wx.ready裡面就可以呼叫jssdk提供的api了 看程式碼
import wx from 'weixin-jsapi'
import * as API from "@/api/affirm";
export default {
data () {
return {
}
},
mounted () {
API.getconfig(這裡如果後端要url 是#前面的部分不包括#號).then((data) => {
console.log(wx)
wx.config({
debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: data.appId, // 必填，公眾號的唯一標識
timestamp: data.timestamp, // 必填，生成簽名的時間戳
nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
signature: data.signature,// 必填，簽名，見附錄1
jsApiList: ['chooseWXPay']
})
})
},
methods: {
click(){ //點選觸發
API.getpay(這裡是後端要你傳的引數).then((data) => {
var args = data
wx.ready(function(){
wx.chooseWXPay({
timestamp: args.timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元
nonceStr: args.nonceStr, // 支付簽名隨機串，不長於 32 位
package: args.package, // 統一支付介面返回的prepay_id引數值，提交格式如：prepay_id=***）
signType: 'MD5', // 簽名方式，預設為'SHA1'，使用新版支付需傳入'MD5'
paySign: args.paySign, // 支付簽名
success: function (res) {
這裡寫成功後的動作 我試過跳轉路由好像不靈 或者是執行太快後端處理訂單未變化呢 我改成了這個 window.location.href="你所要跳轉的頁面";
},
cancel: function (res) {
alert('已取消支付');
},
fail: function (res) {
alert('購買失敗，請重新建立訂單')
}
});
});
})
}
}
}
請注意 這裡有兩個簽名 他們是不一樣的！！！！ debug: true 除錯的時候這裡這樣設定 我報了一個錯誤 驗證簽名失敗 後來找到服務端 發現是他演算法有問題 支付簽名演算法上網搜一下 後端計算時候可能會出錯 我這裡是因為timestamp 這個時間戳什麼大小寫的問題 他改了之後我就可以支付了
這裡的
統一支付介面返回的prepay_id引數值，提交格式如：prepay_id=***）
package這個引數格式要注意 如果後端沒有加上 你自己加上
支付的內個api 後端要我傳ip 這個也是我剛接觸的東西
這裡分享一個方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>獲取ip地址</title>
</head>
<body >
</body>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
//瀏覽器返回結果：（前提是需要有網路）
//var returnCitySN = {"cip": "14.153.20.119", "cid": "440300", "cname": "廣東省深圳市"};
console.log(returnCitySN.cip);
</script>
</html>
根據專案框架不同自己研究下 怎麼引入
支付報錯的話 根據打印出的錯誤資訊 一個一個排除吧 我這裡遇到的都寫出來了
開發時有個坑，就是在@click事件中剛進入頁面有300ms的延時，導致無法執行點選喚起微信支付；後來改為@touchstart事件可以了；看相關文章https://www.jianshu.com/p/6f85e957a725移動端事件總結
這方面的知識我也是第一次接觸而且有些地方的坑可能忘記了 回頭會補上
有什麼問題歡迎大家提問一起解決