微信授权网页前端工作流程及自定义菜单总结☁️

微信授权网页前端工作流程及自定义菜单总结

微信网页授权官方文档：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编码前

编码后

对应：

都写填写完以后，点击检查问题，没有问题后提示：