一、注冊微信公眾號服務號并填寫企業信息（個人訂閱號沒有開發微信支付的權限）

鏈接：?https://mp.weixin.qq.com/

二、在微信公眾號內進行微信認證（3-5個工作日）

三、在微信公眾號內開通微信支付功能（3-5個工作日）

四、在微信商戶平臺上配置相關信息（回調域名等）

鏈接：https://pay.weixin.qq.com/index.php/public/cms/content_detail?lang=zh&id=37000

五、開始正式開發

1.微信公眾號配置

鏈接：?https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1472017492_58YV5

2.頁面開發

頁面開發部分可以分為四個步驟；（可以全部由后臺去完成，也可以由前端去完成第一步，后臺去完成后三部）

步驟一：綁定域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發者中心”查看對應的接口權限。

步驟二：引入JS文件

在index.html頁面引入js文件：<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

步驟三：微信code獲取js

1、自定義截取code方法

在由公眾號進入項目首頁面時候進行微信授權判斷是否需要去授權

// 授權 進入公眾號后判斷是否授權、是否登錄

const APPID = '11111111111111111111'? ? ? ? ? ? ? ? ? ? ? ? //?APPID是已知的公眾號里有

redirect_uri 為重定向的回調地址（公眾號配的域名）

main.js 入口文件授權代碼

router.beforeEach((to, from, next) => {
? /**
? ?* 檢測當前是否需要登錄驗證
? ?* 1. 確定當前頁面是否需要登錄
? ?*/
? if (!__getItem('isOauth')) {
? ? // 微信授權
? ? if (!getUrlKey('code') || !getUrlKey('state')) {? ? ? ? ? ? ? ? ? ? ? ?// 沒有code 去授權獲取code
? ? ? // 去授權
? ? ? // const URI = encodeURIComponent(window.location.href)
? ? ? let URI = ''
? ? ? if (window.location.href.indexOf('FriendsCertification?') > 0) {
? ? ? ? URI = encodeURIComponent(window.location.href)
? ? ? } else {
? ? ? ? URI = encodeURIComponent(window.location.href.split('?')[0])
? ? ? }
? ? ? var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + URI + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
? ? ? window.location.href = url
? ? } else {? ? ? // 有code通過code調后臺接口去獲取用戶信息（uid、oppind等）
? ? ? __setItem('isOauth', true)
? ? ? axios.get('/api/fe/mobile/wx/authorization',
? ? ? ? {
? ? ? ? ? code: getUrlKey('code')
? ? ? ? }
? ? ? ).then((res) => {
? ? ? ? __setItem('openId', res.data.data.openid)
? ? ? ? __setItem('unionId', res.data.data.unionid)
? ? ? ? if (res.data.data.user) {
? ? ? ? ? if (res.data.data.user.token) {
? ? ? ? ? ? __setItem('auth', res.data.data.user.token)
? ? ? ? ? }
? ? ? ? ? if (res.data.data.user.phone) {
? ? ? ? ? ? __setItem('phone', res.data.data.user.phone)
? ? ? ? ? }
? ? ? ? ? if (res.data.data.user.name) {
? ? ? ? ? ? __setItem('name', res.data.data.user.name)
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? ? next({name: 'Station'})
? ? ? return false
? ? }
? } else {
? ? next()
? }

})

步驟四：微信支付

1、首先需要授權拿到的openid 去調取支付接口 （接口調通喚起微信支付）

this.$axios.post(
? ? ? ? ? '/api/fe/mobile/charge/payment',
? ? ? ? ? {
? ? ? ? ? ? 'type': '1',
? ? ? ? ? ? 'reservation': reservation,
? ? ? ? ? ? 'dep': this.child.addresName,
? ? ? ? ? ? 'depAddress': this.depAddress,
? ? ? ? ? ? 'arr': this.child.backAddresname,
? ? ? ? ? ? 'arrAddress': this.arrAddress,
? ? ? ? ? ? 'passenger': this.busUserCode, // this.loginName,
? ? ? ? ? ? 'slat': this.slat,
? ? ? ? ? ? 'slng': this.slng,
? ? ? ? ? ? 'elat': this.elat,
? ? ? ? ? ? 'elng': this.elng,
? ? ? ? ? ? 'time': this.child.selectDate,
? ? ? ? ? ? 'uct': this.uct,
? ? ? ? ? ? 'openId': __getItem('openId')
? ? ? ? ? }).then((response) => {
? ? ? ? ? console.log(response)
? ? ? ? ? let json = JSON.parse(response.data.data.payParm)
? ? ? ? ? console.log('22222' + json)
? ? ? ? ? if (response.data.code === 200) {
? ? ? ? ? ? if (typeof WeixinJSBridge === 'undefined') {
? ? ? ? ? ? ? if (document.addEventListener) {
? ? ? ? ? ? ? ? document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(json), false)
? ? ? ? ? ? ? } else if (document.attachEvent) {
? ? ? ? ? ? ? ? document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(json))
? ? ? ? ? ? ? ? document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(json))
? ? ? ? ? ? ? }
? ? ? ? ? ? } else {
? ? ? ? ? ? ? this.onBridgeReady(json)
? ? ? ? ? ? }
? ? ? ? ? } else if (response.data.code === 4009) {
? ? ? ? ? ? Toast('請設置用戶名')
? ? ? ? ? ? this.$router.push({name: 'LoginName'})
? ? ? ? ? }
? ? ? ? }).catch(function (err) {
? ? ? ? ? console.log(err)

? ? ? ? })

微信支付方法

// 微信支付
? ? onBridgeReady (json) {
? ? ? let that = this
? ? ? window.WeixinJSBridge.invoke(
? ? ? ? 'getBrandWCPayRequest', {
? ? ? ? ? 'appId': json.appId, // 公眾號名稱，由商戶傳入
? ? ? ? ? 'timeStamp': json.timeStamp, // 時間戳，自1970年以來的秒數
? ? ? ? ? 'nonceStr': json.nonceStr, // 隨機串
? ? ? ? ? 'package': json.package,
? ? ? ? ? 'signType': json.signType, // 微信簽名方式：
? ? ? ? ? 'paySign': json.paySign// 微信簽名
? ? ? ? }, function (res) {
? ? ? ? ? if (res.err_msg === 'get_brand_wcpay_request:ok') {
? ? ? ? ? ? Toast('支付成功')
? ? ? ? ? ? // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。
? ? ? ? ? ? let params = {
? ? ? ? ? ? ? carName: that.dataPrice[that.activeIndex].lev,
? ? ? ? ? ? ? date: that.child.selectDate,
? ? ? ? ? ? ? price: that.dataPrice[that.activeIndex].price,
? ? ? ? ? ? ? depAddress: that.child.addresName,
? ? ? ? ? ? ? arrAddress: that.child.backAddresname}
? ? ? ? ? ? that.$router.push({name: 'orderpay', params: params})
? ? ? ? ? } else {
? ? ? ? ? ? // 失敗
? ? ? ? ? ? Toast('支付失敗, 請稍后重試')
? ? ? ? ? }
? ? ? ? })
? ? },

總結

以上是生活随笔為你收集整理的vue开发项目微信公众号授权支付开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。