微信公众号网页授权（以vue框架，在App.vue主入口文件中为例）

1、变量设置

data () {
    isWechat: true,         // 是否为微信环境（true：是；false：否）
    wx: {                   
        wxAppId: '',        // 微信公众号 ID
        wxSecret: '',       // 微信公众号 密钥
        code: '',           // 授权获取的 code
        openid: '',         // 授权获取的 openid
        unionid: ''         // 授权获取的用户唯一标识 unionid
    },
    query: {
        a: '',
        b: ''
    }               // 页面路径带参
    ...
}

2、确定程序所属环境

created () {
    // 检测是浏览器端还是微信端
    let ua = navigator.userAgent.toLowerCase();
    if (String(ua.match(/MicroMessenger/i)) === 'micromessenger') {
        this.isWechat = true
    } else {
        this.isWechat = false
    }
    ...
}

3、微信公众号网页授权函数，获取code（假设页面路径为：https://www.baidu.com?a=1&b=2）

methods: {
    /**
     * 微信公众号获取code及授权处理
     * 注意：页面路径上的自定义带参不要使用code和state，授权时会根据这两个参数处理逻辑
     * 再授权成功，并重定向之后，微信会在重定向路径上带上code和state参数
     */
    handleAuthorize () {
        /**
         * 判断是否是微信环境
         * 是微信环境：进行授权处理
         * 不是微信环境：不进行授权处理
         */
        if (!this.isWechat) return;
        /**
         * 判断是否有 微信公众号 ID和密钥