web微信開(kāi)發(fā)技巧總結(jié)

時(shí)間：2022-08-06 19:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-06 19:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

新項(xiàng)目，不管是手機(jī)端還是 PC 端基本上都會(huì)有微信登錄、微信支付，甚至還會(huì)做一個(gè)微信公眾號(hào)。整個(gè)體系龐大，資料也千奇百怪。所以特地總結(jié)一篇微信開(kāi)發(fā)的技巧和相應(yīng)資料來(lái)幫助你提高開(kāi)發(fā)效率。

微信登錄

PC 端“常規(guī)”微信登錄

官方推薦的 PC 端登錄是通過(guò)微信開(kāi)放平臺(tái)創(chuàng)建應(yīng)用來(lái)實(shí)現(xiàn)的。凡是創(chuàng)建的應(yīng)用都能用下面微信提供的鏈接來(lái)進(jìn)行掃碼授權(quán)操作

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect連接中包含以下參數(shù)：







可以看到 response_type, scope 都是寫(xiě)死的。appid 會(huì)在你創(chuàng)建應(yīng)用的時(shí)候給你（當(dāng)然還有 AppSecret）。state 主要是為了用于驗(yàn)證是否是別人假冒的請(qǐng)求。重點(diǎn)是 redirect_uri。當(dāng)用戶掃碼之后微信會(huì)重定向當(dāng)前頁(yè)面跳轉(zhuǎn)到 redirect_uri 指向的地址。這個(gè)鏈接需要進(jìn)行 urlEncode 進(jìn)行重定向。為什么需要 urlEncode 對(duì)鏈接進(jìn)行處理呢，我搜了一些資料總結(jié)了倆條我認(rèn)為最重要的理由： 1. url 鏈接支持的字符有限，不進(jìn)行編碼是無(wú)法識(shí)別的 2. url 規(guī)定了一些特殊字符，如 &, ?, # 要是鏈接中帶有這些字符會(huì)被誤認(rèn)

對(duì) url 進(jìn)行編碼也很簡(jiǎn)單，下面的 js 代碼直接拷貝即可

let a = 'http://xuyuechao.top'// 編碼let b = encodeURIComponent(a)// 解碼decodeURIComponent(b)這里需要注意別用 encodeURI 。他是不會(huì)對(duì) ASCII 字母和數(shù)字進(jìn)行編碼的。

到了這里一個(gè)完整的微信授權(quán)鏈接就已經(jīng)有了，通過(guò) a 鏈接打開(kāi)一個(gè)新頁(yè)面或者是通過(guò) js 打開(kāi)一個(gè)新頁(yè)面都可以。這個(gè)授權(quán)鏈接打開(kāi)的頁(yè)面會(huì)帶有一張二維碼，這時(shí)候用戶掃碼分為倆種操作：同意授權(quán)和不同意授權(quán)。而他們最大的不同是跳轉(zhuǎn)到重定向連接的時(shí)候是否帶有 code

// 用戶同意授權(quán)redirect_uri?code=CODE&state=STATE// 用戶不同意授權(quán)redirect_uri?state=STATE實(shí)現(xiàn)這一步前端的使命基本上已經(jīng)完成了，因?yàn)楹诵?code 到手剩下的就是后端的事情了，簡(jiǎn)單描述一下后續(xù)步驟： 1. 前端將 code 通過(guò) ajax 傳給后端 2. 后端通過(guò) code, appid, appsecret 獲取到用戶的基本信息生成 token 傳給前端作為登錄憑證 3. 前端保存 token ，之后的請(qǐng)求攜帶 token 發(fā)送給后端即可

上面的那種是打開(kāi)新窗口的模式，效果如下圖：







這種方式是強(qiáng)制性跳轉(zhuǎn)到新頁(yè)面并不友好，所以微信還提供了另外一種 JS 的方式，在當(dāng)前頁(yè)面打開(kāi)一個(gè) iframe 窗口來(lái)提供整個(gè)網(wǎng)站的流暢性。步驟如下： 1. 頁(yè)面引入如下 JS

<script>http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js</script>

1. 在需要使用微信登錄的地方實(shí)例以下JS對(duì)象

var obj = new WxLogin({ self_redirect:true, id:"login_container", appid: "", scope: "", redirect_uri: "", state: "", style: "", href: ""});


效果如下：

用戶掃碼獲取到 code 之后就跟上面的操作一樣了。這些信息都可以通過(guò)微信文檔看到（文檔地址）官方文檔的資料也更加清楚詳細(xì)。這里只是幫你簡(jiǎn)單的順順?biāo)悸?br>

PC 端“不常規(guī)”微信登錄

微信登錄掃碼是可以關(guān)注公眾號(hào)的哦，這里就用到了一種非常規(guī)登錄方式。優(yōu)點(diǎn)主要有二： 1. 可以做出更美的界面，上面提供的 js 登錄方式是打開(kāi)一個(gè) iframe 頁(yè)面肯定是不美觀的，而且也不可控。此方法只需要一個(gè)二維碼，而二維碼你愛(ài)怎么內(nèi)嵌就怎么內(nèi)嵌所以效果要強(qiáng)大的多。特地找了張效果圖：




2. 提高微信公眾號(hào)推廣，這種方式掃描的二維碼是直接關(guān)注公眾號(hào)的，后期還可以給用戶發(fā)消息。

廢話不多說(shuō)，馬上給你上實(shí)現(xiàn)步驟：

1. 申請(qǐng)微信公眾號(hào)，這里需要用到服務(wù)號(hào)（微信公眾號(hào)一共是三種類型，訂閱號(hào)、服務(wù)號(hào)、企業(yè)號(hào)想查看具體區(qū)別可以看這篇文章:文章地址）
2. 后端調(diào)用微信的生成臨時(shí)二維碼接口將二維碼和二維碼唯一憑證返回給前端，前端使用憑證輪詢后端提供的用戶是否掃碼接口
3. 用戶掃碼之后微信會(huì)通知后端，后端將此憑證的類別變?yōu)橛脩粢褣叽a
4. 前端輪詢的接口有了結(jié)果進(jìn)行相應(yīng)的操作

可以看到這個(gè)方法對(duì)于前端來(lái)說(shuō)更簡(jiǎn)單，定義一個(gè) img 標(biāo)簽，獲取到后端返回的二維碼地址將 img 標(biāo)簽的 src 屬性修改為這個(gè)地址即可。然后開(kāi)啟輪詢?cè)L問(wèn)接口。相關(guān)資料可參考這篇文章：文章地址

手機(jī)端登錄

先聲明此處特指微信內(nèi)網(wǎng)頁(yè)登錄方式

這種方式跟上面提到的 PC 端普通登錄方式基本類似，廢話不多說(shuō)上實(shí)現(xiàn)步驟

1. 創(chuàng)建微信服務(wù)號(hào)，獲取 appid 和 appsecript（這個(gè)前端用不到，只對(duì)后端有用）
2. 拼寫(xiě)對(duì)應(yīng)的跳轉(zhuǎn)鏈接，參數(shù)跟上文中的 PC 端參數(shù)基本類似，所以此處就不說(shuō)明了

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect只獲取用戶的 openid 不需要用戶授權(quán)的靜默鏈接 scope=snsapi_base

需要用戶授權(quán)，獲取用的昵稱、性別、所在地 scope=snsapi_userinfo

1. 相同的用戶如果是需要用戶授權(quán)的操作也分為倆種情況同意授權(quán)和不同意授權(quán)。區(qū)別也僅僅是重定向的鏈接里是否帶有 code

// 用戶同意授權(quán)redirect_uri?code=CODE&state=STATE// 用戶不同意授權(quán)redirect_uri?state=STATE

1. 將 code 傳遞給后端獲取 token，用戶信息完成登錄操作

注意：redirect_uri 的鏈接需要在微信提供的白名單里

微信登錄總結(jié)

個(gè)人感覺(jué)微信最麻煩的是概念的理解以及相關(guān)文章的查找，這倆個(gè)是我在平常開(kāi)發(fā)的時(shí)候特別頭疼的。當(dāng)你完成一次的時(shí)候概念其實(shí)可以變?yōu)榫唧w的操作步驟，從上文可以看出不管是 PC 端還是手機(jī)端都是使用微信提供的鏈接地址，然后用戶進(jìn)行了相應(yīng)的操作之后進(jìn)行 redirect_uri 重定向的時(shí)候帶有 code 完成的。相關(guān)文章我已經(jīng)幫你找好了，在這里在羅列一遍好讓你非常容易的找到相關(guān)文章： - PC 端常規(guī)微信登錄文章鏈接: 文章地址 - PC 端非常規(guī)微信登錄文章鏈接:文章地址 - 手機(jī)端登錄文章鏈接: 文章地址

微信支付

手機(jī)端微信支付

手機(jī)端完成微信支付有倆種方式，一種采用微信支付文章中的支付方式，另外一種采用微信公眾號(hào)提供的支付方式。微信支付提供的支付方式實(shí)現(xiàn)比較簡(jiǎn)單，同樣功能也少。個(gè)人推薦采用公眾號(hào)提供的支付方式。

倆種支付的共同點(diǎn)

1. 都需要先搞一個(gè)微信服務(wù)號(hào)來(lái)得到 appid 和 appsecript
2. 都需要讓用戶登錄獲取到用戶的 openid （具體的步驟就可以看上面的手機(jī)端登錄方式了）

微信支付文章提供的支付方式

這種支付的重點(diǎn)在于微信內(nèi)瀏覽器提供了一個(gè)叫 WeixinJSBridge 的全局變量。需要做的是判斷是否在微信內(nèi)。這里送你一個(gè)判斷手機(jī)端環(huán)境的方式：

BrowserInfo = { isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), isIpad: Boolean(navigator.userAgent.match(/ipad/ig)), isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)), isAli: Boolean(navigator.userAgent.match(/AlipayClient/ig)), isPhone: Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent))}好了開(kāi)始介紹支付步驟 1. 判斷是否是手機(jī)端微信內(nèi)瀏覽器，是接著往下執(zhí)行。不是按照產(chǎn)品制定的規(guī)則進(jìn)行操作 2. 從后端哪里獲取微信支付需要的相關(guān)參數(shù)。參數(shù)可以看下文步驟四中提供的代碼 3. 在合適的位置執(zhí)行 onBridgeReady 方法，這個(gè)方法存在的一個(gè)問(wèn)題是你調(diào)用的時(shí)候他不一定初始化了因此需要判斷一下是否初始化，方法如下

if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }}else{ onBridgeReady();}

1. 上面的 onBridgeReady 方法代碼如下

function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":"wx2421b1c4370ec43b", //公眾號(hào)名稱，由商戶傳入 "timeStamp":"1395712654", //時(shí)間戳，自1970年以來(lái)的秒數(shù) "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信簽名方式： "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ){ // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示： //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對(duì)可靠。 } }); }整個(gè)支付流程到此結(jié)束，難點(diǎn)主要是 paySign 的簽名方式，但是這一步是放在后端的，所以前端要實(shí)現(xiàn)這種支付方式還是異常簡(jiǎn)單的。在 Java 中 package 這個(gè)參數(shù)往往會(huì)給你用別的名字，因?yàn)?package 在 java 中是一個(gè)關(guān)鍵字，所以后端沒(méi)法直接給你返回正好符合格式的對(duì)象，這點(diǎn)有點(diǎn)不友好但也不要怪后端哦。 相關(guān)文檔鏈接地址: 文檔地址

公眾號(hào)文章提供的支付方式

這種支付方式要比上面的流程更復(fù)雜，但是功能也多（主要指支付之外的功能）。直接上步驟 1. 先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名” 2. 界面引入微信提供的 js

// 注意這個(gè)是帶有版本號(hào)的，最好通過(guò)下面提供的文章鏈接用最新的鏈接地址<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

1. 通過(guò)config接口注入權(quán)限驗(yàn)證配置(相關(guān)的參數(shù)都是后端維護(hù)的，直接請(qǐng)求后端提供的接口地址即可)

wx.config({ debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。 appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí) timestamp: , // 必填，生成簽名的時(shí)間戳 nonceStr: '', // 必填，生成簽名的隨機(jī)串 signature: '',// 必填，簽名 jsApiList: [] // 必填，需要使用的JS接口列表});

1. 微信提供了 ready 和 error 鉤子函數(shù)來(lái)通知你是否完成了相關(guān)操作。如果你需要一加載完成就執(zhí)行相應(yīng)的支付操作就需要將相關(guān)步驟寫(xiě)入 ready 函數(shù)里

wx.ready(function(){ // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。});

1. 調(diào)用微信支付提供的支付方法(相關(guān)的參數(shù)都是后端維護(hù)的，直接請(qǐng)求后端提供的接口地址即可),需要注意 chooseWXPay 這個(gè)方法要添加進(jìn)微信配置時(shí)參數(shù) jsApiList 的數(shù)組里

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

1. 至此微信支付完成

相關(guān)文檔鏈接地址: 文檔地址

PC 端微信支付

這個(gè)咋說(shuō)呢，重點(diǎn)全部在后端，前端要做的事情確實(shí)不多，步驟如下： 1. 調(diào)用后端的接口獲取微信支付二維碼內(nèi)容 2. 根據(jù)內(nèi)容生成二維碼圖片。我這里用的是 qrcode 的庫(kù) 3. 輪詢后端接口獲取支付結(jié)果

相關(guān)文檔鏈接地址: 文檔地址

全文總結(jié)

可以看到整個(gè)微信登錄和支付過(guò)程并不復(fù)雜，但是新手剛開(kāi)始操作肯定會(huì)碰到各種問(wèn)題。其中簽名不對(duì)是最麻煩的，因?yàn)樗枰岸颂峁┗卣{(diào)地址，而回調(diào)地址的設(shè)置又通常不是前端設(shè)置的，我這里給出的建議是出現(xiàn)類似問(wèn)題可以優(yōu)先查找白名單和回調(diào)地址的配置跟前端設(shè)置的是否一致。

再安利一波文章中提到的各種連接地址 - PC 端常規(guī)(開(kāi)放平臺(tái))微信登錄文章鏈接: 文章地址 - PC 端非常規(guī)(公眾號(hào))微信登錄文章鏈接:文章地址 - 手機(jī)端登錄文章鏈接: 文章地址 - 手機(jī)端微信支付文章連接:文章地址 - 手機(jī)端公眾號(hào)支付文章連接:文章地址 - PC 端支付文章連接:文章地址

為了文章更好的完善特地建立了群提供交流環(huán)境，當(dāng)然支付遇到問(wèn)題也可以進(jìn)行提問(wèn)。歡迎掃描下方二維碼加群。手機(jī)端掃碼不便，可以復(fù)制微信號(hào)進(jìn)行添加。 xu645352780