快捷導(dǎo)航

前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程(jsapi方式)

更新時(shí)間：2024年01月20日 08:54:46 作者：我人麻了啊

vue實(shí)現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號(hào)支付,這篇文章主要給大家介紹了關(guān)于前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下

參考鏈接

微信支付jsapi官方文檔

微信網(wǎng)頁授權(quán)

jsapi介紹

準(zhǔn)備工作

公眾號(hào)
商戶號(hào)
備案域名
配置應(yīng)用
先參考支付指引接入準(zhǔn)備基本步驟
1、在商戶號(hào)關(guān)聯(lián)公眾號(hào)
2、在商戶號(hào)配置支付授權(quán)目錄（支付目錄+回調(diào)目錄）
3、在公眾號(hào)配置網(wǎng)頁授權(quán)域名

第一步微信授權(quán)獲取用戶openid

參考鏈接微信網(wǎng)頁授權(quán)進(jìn)入頁面后從緩存中判斷是否已經(jīng)拿到用戶openid，或者地址欄上是否攜帶code，沒有則調(diào)用下面代碼進(jìn)行申請(qǐng)用戶授權(quán)

let protocol = window.location.protocol;
let host = window.location.host;
let local = protocol + '//' + host；
let appId = '';公眾號(hào)appid
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

用戶同意授權(quán)后會(huì)在回調(diào)地址中攜帶code,下面提供獲取地址欄上code參數(shù)方法

function getUrlParams(name) {
      const queryString = window.location.search;
      const params = new URLSearchParams(queryString);
      const value = params.get(name);
      return value ? decodeURIComponent(value) : null;
    }

然后把code傳給后端，后端通過code獲取access_token，再通過access_token獲取用戶信息并返回給前臺(tái)
網(wǎng)頁授權(quán)對(duì)于前端來說只需要拉起用戶授權(quán)，并將code傳給后臺(tái)

只是測(cè)試網(wǎng)頁授權(quán)可以使用測(cè)試公眾號(hào)，需要先關(guān)注測(cè)試號(hào)并配置授權(quán)域名
測(cè)試公眾號(hào)

第二步調(diào)起微信支付

安裝依賴

npm install weixin-jsapi

在需要調(diào)起支付的頁面引用

import wx from “weixin-js-sdk”;

調(diào)起支付-需要的參數(shù)由后端返回，一般是下完單返回參數(shù)然后調(diào)起支付

wx.config({
	debug: false, // 這里一般在測(cè)試階段先用ture，等打包給后臺(tái)的時(shí)候就改回false, 
	appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí) 
	timestamp: res.data.timeStamp, // 必填，生成簽名的時(shí)間戳     
	nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串 
	signature: res.data.paySign, // 必填，簽名 
	jsApiList: ['chooseWXPay', 'checkJsApi'] // 必填，需要使用的JS接口列表 
})


	wx.ready(() => {
		// wx.checkJsApi({     
		//   jsApiList: ['chooseWXPay'],     
		//   success:function(res){}, 
		//   fail:function(res){}})   

		wx.chooseWXPay({
			timestamp: res.data.timeStamp, // 支付簽名時(shí)間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫其中的S字符     
			nonceStr: res.data.nonceStr, // 支付簽名隨機(jī)串，不長于 32 位         
			package: res.data.package, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=\*\*\*）     
			signType: 'SHA1', // 簽名方式，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'     
			paySign: res.data.paySign, // 支付簽名     
			success: function(payRes) { 
			// 支付成功后的回調(diào)函數(shù)       
			},
			cancel: function(payRes) {
				// that.$message.error('取消支付')
			},
			fail: function(payRes) {
				// that.$message.error('支付失敗')
			}
		})
	})

支付之后會(huì)觸發(fā)支付通知回調(diào)，在回調(diào)中后端應(yīng)該根據(jù)支付狀態(tài)更新訂單狀態(tài)

另外需要判斷是否微信瀏覽器移動(dòng)端來決定是否調(diào)起微信支付，以下是判斷方法

var isWechatBrowser = /micromessenger/i.test(navigator.userAgent);
let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
								.test(navigator.userAgent);
if(isWechatBrowser){
//微信瀏覽器
	if (isMobile) {
		// console.log("當(dāng)前是微信移動(dòng)端");
	｝else{
		// console.log("當(dāng)前是pc端");
	}
}else{
//非//微信瀏覽器
}