微信授權網頁前端工作流程及自定義菜單總結☁️

微信授權網頁前端工作流程及自定義菜單總結

微信網頁授權官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

本文總結vue前後端分離項目前端的工作流程。對於已經關注公衆號的用戶從公衆號的會話或自定義菜單進入本公衆號的網頁授權頁，即使是scope爲snsapi_userinfo，也是靜默授權，用戶無感知。
第一部分：微信授權網頁前端工作
步驟一 : 用戶同意授權，獲取code

頁面跳轉回調redirect_uri,通過截取url得到code。
在前端頁面內截取url參數，vue項目中，在 src/assets中新建 script文件夾，再創建建utils.js文件，內容如下：

utils.js
export default{
    getUrlKey: function (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
  }

vue頁面注入 import utils from ‘…/assets/scripts/utils’

code:utils.getUrlKey('code'),

即可截取code，作爲參數傳給後端，以得到openid。

步驟二 : 通過code換取網頁授權access_token。
由服務端發起，後端寫一個接口，前端頁面傳code給後端，得到openid，以便獲取頁面所需用戶信息。


前端拿到openid，即可通過openid向後端請求獲取頁面所需微信用戶的信息。

第二部分：公衆號設置自定義菜單
微信公衆平臺，登陸進入服務號， 開發 -> 開發者工具 -> 微信公衆平臺接口調試工具 微信公衆平臺藉口調試工具

接口類型選擇 自定義菜單
接口列表選擇 自定義菜單創建接口
access_token : 服務端通過code換取網頁授權access_token。（項目中，後端大佬給我一個鏈接，點開獲取到access_token。）

body中填寫自定義的菜單內容。
頁面地址要進行URL編碼：http://tool.chinaz.com/tools/urlencode.aspx

例如：
{
    "button": [
        {
            "name": "會員中心", 
            "sub_button": [
                {
                    "type": "view", 
                    "name": "個人中心", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc660e5f5ef9f4c7&redirect_uri=http%3a%2f%2fwww.XXXXX.com%2fvue_wechat%2findex.html&response_type=code&connect_redirect=1&scope=snsapi_base&state=123#wechat_redirect"
                }, 
                {
                    "type": "view", 
                    "name": "充值記錄", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc660e5f5ef9f4c7&redirect_uri=http%3a%2f%2fwww.XXXXX.com%2fvue_wechat%2findex.html%23%2fShoplist&response_type=code&connect_redirect=1&scope=snsapi_base&connect_redirect=1&state=123#wechat_redirect"
                }, 
                {
                    "type": "view", 
                    "name": "消費記錄", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc660e5f5ef9f4c7&redirect_uri=http%3a%2f%2fwww.XXXXX.com%2fvue_wechat%2findex.html%23%2fShoplistConsume&response_type=code&scope=snsapi_base&connect_redirect=1&state=123#wechat_redirect"
                }
            ]
        }, 
        {
            "name": "促銷中心", 
            "sub_button": [
                {
                    "type": "view", 
                    "name": "優惠券查看", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc660e5f5ef9f4c7&redirect_uri=http%3a%2f%2fwww.XXXXX.com%2fvue_wechat%2findex.html%23%2fAllCoupon&response_type=code&scope=snsapi_base&connect_redirect=1&state=123#wechat_redirect"
                }
            ]
        }, 
        {
            "name": "商家信息", 
            "sub_button": [
                {
                    "type": "view", 
                    "name": "商家聯繫方式", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc660e5f5ef9f4c7&redirect_uri=http%3a%2f%2fwww.XXXXX.com%2fvue_wechat%2findex.html%23%2fConnectShop&response_type=code&scope=snsapi_base&connect_redirect=1&state=123#wechat_redirect "
                }, 
                {
                    "type": "view", 
                    "name": "意見反饋", 
                    "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc660e5f5ef9f4c7&redirect_uri=http%3a%2f%2fwww.XXXXX.com%2fvue_wechat%2findex.html%23%2ffeedback&response_type=code&scope=snsapi_base&connect_redirect=1&state=123#wechat_redirect"
                }
            ]
        }
    ]
}
其中url的配置對應最開始的授權回調地址。
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f412536478&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

頁面url編碼前

編碼後

對應：

都寫填寫完以後，點擊檢查問題，沒有問題後提示：