web微信開發技巧總結

時間 2019-11-06

標籤 web 微信開發技巧總結欄目 HTML 简体版

原文原文鏈接

新項目，不論是手機端仍是 PC 端基本上都會有微信登陸、微信支付，甚至還會作一個微信公衆號。整個體系龐大，資料也千奇百怪。因此特意總結一篇微信開發的技巧和相應資料來幫助你提升開發效率。php

微信登陸

PC 端「常規」微信登陸

官方推薦的 PC 端登陸是經過微信開放平臺建立應用來實現的。凡是建立的應用都能用下面微信提供的連接來進行掃碼受權操做html

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
複製代碼

鏈接中包含如下參數：前端

能夠看到 response_type, scope 都是寫死的。appid 會在你建立應用的時候給你（固然還有 AppSecret）。state 主要是爲了用於驗證是不是別人假冒的請求。重點是 redirect_uri。當用戶掃碼以後微信會重定向當前頁面跳轉到 redirect_uri 指向的地址。這個連接須要進行 urlEncode 進行重定向。爲何須要 urlEncode 對連接進行處理呢，我搜了一些資料總結了倆條我認爲最重要的理由：java

url 連接支持的字符有限，不進行編碼是沒法識別的
url 規定了一些特殊字符，如 &, ?, # 要是連接中帶有這些字符會被誤認

對 url 進行編碼也很簡單，下面的 js 代碼直接拷貝便可android

let a = 'http://xuyuechao.top'
// 編碼
let b = encodeURIComponent(a)
// 解碼
decodeURIComponent(b)
複製代碼

這裏須要注意別用 encodeURI 。他是不會對 ASCII 字母和數字進行編碼的。web

到了這裏一個完整的微信受權連接就已經有了，經過 a 連接打開一個新頁面或者是經過 js 打開一個新頁面均可以。這個受權連接打開的頁面會帶有一張二維碼，這時候用戶掃碼分爲倆種操做：贊成受權和不一樣意受權。而他們最大的不一樣是跳轉到重定向鏈接的時候是否帶有 codeajax

// 用戶贊成受權
redirect_uri?code=CODE&state=STATE
// 用戶不一樣意受權
redirect_uri?state=STATE
複製代碼

實現這一步前端的使命基本上已經完成了，由於核心 code 到手剩下的就是後端的事情了，簡單描述一下後續步驟：後端

前端將 code 經過 ajax 傳給後端
後端經過 code, appid, appsecret 獲取到用戶的基本信息生成 token 傳給前端做爲登陸憑證
前端保存 token ，以後的請求攜帶 token 發送給後端便可

上面的那種是打開新窗口的模式，效果以下圖：api

這種方式是強制性跳轉到新頁面並不友好，因此微信還提供了另一種 JS 的方式，在當前頁面打開一個 iframe 窗口來提供整個網站的流暢性。步驟以下：數組

頁面引入以下 JS

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

在須要使用微信登陸的地方實例如下JS對象

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

效果以下：

用戶掃碼獲取到 code 以後就跟上面的操做同樣了。這些信息均可以經過微信文檔看到（文檔地址）官方文檔的資料也更加清楚詳細。這裏只是幫你簡單的順順思路

PC 端「不常規」微信登陸

微信登陸掃碼是能夠關注公衆號的哦，這裏就用到了一種很是規登陸方式。優勢主要有二：

能夠作出更美的界面，上面提供的 js 登陸方式是打開一個 iframe 頁面確定是不美觀的，並且也不可控。此方法只須要一個二維碼，而二維碼你愛怎麼內嵌就怎麼內嵌因此效果要強大的多。特意找了張效果圖：

2. 提升微信公衆號推廣，這種方式掃描的二維碼是直接關注公衆號的，後期還能夠給用戶發消息。

廢話很少說，立刻給你上實現步驟：

申請微信公衆號，這裏須要用到服務號（微信公衆號一共是三種類型，訂閱號、服務號、企業號想查看具體區別能夠看這篇文章:文章地址）
後端調用微信的生成臨時二維碼接口將二維碼和二維碼惟一憑證返回給前端，前端使用憑證輪詢後端提供的用戶是否掃碼接口
用戶掃碼以後微信會通知後端，後端將此憑證的類別變爲用戶已掃碼
前端輪詢的接口有告終果進行相應的操做

能夠看到這個方法對於前端來講更簡單，定義一個 img 標籤，獲取到後端返回的二維碼地址將 img 標籤的 src 屬性修改成這個地址便可。而後開啓輪詢訪問接口。相關資料可參考這篇文章：文章地址

手機端登陸

先聲明此處特指微信內網頁登陸方式

這種方式跟上面提到的 PC 端普通登陸方式基本相似，廢話很少說上實現步驟

建立微信服務號，獲取 appid 和 appsecript（這個前端用不到，只對後端有用）
拼寫對應的跳轉連接，參數跟上文中的 PC 端參數基本相似，因此此處就不說明了

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
複製代碼

只獲取用戶的 openid 不須要用戶受權的靜默連接 scope=snsapi_base

須要用戶受權，獲取用的暱稱、性別、所在地 scope=snsapi_userinfo

相同的用戶若是是須要用戶受權的操做也分爲倆種狀況贊成受權和不一樣意受權。區別也僅僅是重定向的連接裏是否帶有 code

// 用戶贊成受權
redirect_uri?code=CODE&state=STATE
// 用戶不一樣意受權
redirect_uri?state=STATE
複製代碼

將 code 傳遞給後端獲取 token，用戶信息完成登陸操做

注意：redirect_uri 的連接須要在微信提供的白名單裏

微信登陸總結

我的感受微信最麻煩的是概念的理解以及相關文章的查找，這倆個是我在日常開發的時候特別頭疼的。當你完成一次的時候概念其實能夠變爲具體的操做步驟，從上文能夠看出不論是 PC 端仍是手機端都是使用微信提供的連接地址，而後用戶進行了相應的操做以後進行 redirect_uri 重定向的時候帶有 code 完成的。相關文章我已經幫你找好了，在這裏在羅列一遍好讓你很是容易的找到相關文章：

PC 端常規微信登陸文章連接: 文章地址
PC 端很是規微信登陸文章連接:文章地址
手機端登陸文章連接: 文章地址

微信支付

手機端微信支付

手機端完成微信支付有倆種方式，一種採用微信支付文章中的支付方式，另一種採用微信公衆號提供的支付方式。微信支付提供的支付方式實現比較簡單，一樣功能也少。我的推薦採用公衆號提供的支付方式。

倆種支付的共同點

都須要先搞一個微信服務號來獲得 appid 和 appsecript
都須要讓用戶登陸獲取到用戶的 openid （具體的步驟就能夠看上面的手機端登陸方式了）

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

這種支付的重點在於微信內瀏覽器提供了一個叫 WeixinJSBridge 的全局變量。須要作的是判斷是否在微信內。這裏送你一個判斷手機端環境的方式：

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))
}
複製代碼

好了開始介紹支付步驟

判斷是不是手機端微信內瀏覽器，是接着往下執行。不是按照產品制定的規則進行操做
從後端哪裏獲取微信支付須要的相關參數。參數能夠看下文步驟四中提供的代碼
在合適的位置執行 onBridgeReady 方法，這個方法存在的一個問題是你調用的時候他不必定初始化了所以須要判斷一下是否初始化，方法以下

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();
}
複製代碼

上面的 onBridgeReady 方法代碼以下

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公衆號名稱，由商戶傳入     
         "timeStamp":"1395712654",         //時間戳，自1970年以來的秒數     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信簽名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判斷前端返回,微信團隊鄭重提示：
            //res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
      } 
   }); 
}
複製代碼

整個支付流程到此結束，難點主要是 paySign 的簽名方式，可是這一步是放在後端的，因此前端要實現這種支付方式仍是異常簡單的。在 Java 中 package 這個參數每每會給你用別的名字，由於 package 在 java 中是一個關鍵字，因此後端無法直接給你返回正好符合格式的對象，這點有點不友好但也不要怪後端哦。相關文檔連接地址: 文檔地址

公衆號文章提供的支付方式

這種支付方式要比上面的流程更復雜，可是功能也多（主要指支付以外的功能）。直接上步驟

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」
界面引入微信提供的 js

// 注意這個是帶有版本號的，最好經過下面提供的文章連接用最新的連接地址
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
複製代碼

經過config接口注入權限驗證配置(相關的參數都是後端維護的，直接請求後端提供的接口地址便可)

wx.config({
  debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
  appId: '', // 必填，公衆號的惟一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，須要使用的JS接口列表
});
複製代碼

微信提供了 ready 和 error 鉤子函數來通知你是否完成了相關操做。若是你須要一加載完成就執行相應的支付操做就須要將相關步驟寫入 ready 函數裏

wx.ready(function(){
  // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});
複製代碼

調用微信支付提供的支付方法(相關的參數都是後端維護的，直接請求後端提供的接口地址便可),須要注意 chooseWXPay 這個方法要添加進微信配置時參數 jsApiList 的數組裏

wx.chooseWXPay({
  timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
  nonceStr: '', // 支付簽名隨機串，不長於 32 位
  package: '', // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
  paySign: '', // 支付簽名
  success: function (res) {
    // 支付成功後的回調函數
  }
});
複製代碼