微信公众号开发若干问题

一、网页授权

• 官网链接微信开放文档 (qq.com)
• 用户在微信客户端中访问了第三方网页，公众号就要通过微信网页授权机制获取用户基本信息如’open_id’，才能实现后续业务逻辑。
• 一般开发公众号项目第一步就是网页授权，通过授权获取openId和access_token来给用户推送消息或者识别用户等。
• 需要注意的就是第一步获取code通过code来获取openId和access_token。

//获取code的访问链接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec
//需要注意的是参数的拼接顺序一定要和上方的一致，微信会做正则强匹配校验

参考链接 里面的source_key是项目中需要的自己的参数 后面会自动带到重定向页面的后面
https://open.weixin.qq.com/connect/oauth2/authorize?appid=********&redirect_uri=https%3A%2F%2Ftstscreening.u-breath.cn%2Felk-aitmgmt-web%2Findex.html%3Fsource_key%3D*****&response_type=code&scope=snsapi_base&state=123#/pages/index/index_no_add

参数说明

• appid 公众号的唯一标识
• redirect_uri 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理 主要注意点就是记得把放上的项目访问地址编码下。如https%3A%2F%2Ftstscreening.u-breath.cn%2Felk-aitmgmt-web%2Findex.html%3Fsource_key%3D*****
• response_type 返回类型，请填写code固定写死即可
• scope应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
• state 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节 不是必须的可填可不填
• #wechat_redirect 无论直接打开还是做页面302重定向时候，必须带此参数 一般都是填写需要跳转的页面
• code说明 ： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

同意授权后，页面会自动跳转到redirect_uri/?code=CODE&state=STATE页面。
一般拿到code后就能获取到open_id这时就可以通过open_id来访问接口获取数据开发项目，记得把open_id保存下以方便开发项目，不用每次在通过code再去获取方便很多。

二、JSSDK使用注意点

• 官网访问链接概述 | 微信开放文档 (qq.com)
• 微信 JS 接口签名校验工具 (qq.com)
• 博主遇到的问题是传递给后台的URL，后台没有全部接收到，只接收到部分解析了部分，所以后台接收到不完整的访问链接加密后传递给前端，前端写入配置也是不完整的一直报错。所以实际访问页面和写入配置的访问一直不匹配，导致报config:invalid signature错误，后台修改后返回的路径正确就好了。

//微信权限配置
let wxConfig = function(dispatch,jsApiList,wxReady){
    let url = location.href.split('#')[0];   //正确
    console.log('原始链接 = ',url);
    console.log('encodeURIComponent = ',encodeURIComponent(url));
    wxAuthorization({
        sourceKey,
        url:encodeURIComponent(url)
    }).then((config) => {
        const auth = config.record;
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: auth.app_id, // 必填，公众号的唯一标识
            timestamp: auth.timestamp, // 必填，生成签名的时间戳
            nonceStr: auth.nonce_str, // 必填，生成签名的随机串
            signature: auth.signature, // 必填，签名，见附录1
            jsApiList: jsApiList // 必填，需要使用的JS接口列表，这里只说扫描，例如分享等都可以，只要写在数组里面就可以调用
        });
        //权限验证出错
        // config信息验证失败会执行error函数，如签名过期导致验证失败，
        // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        wx.error(function (res) {
            alert(res.errMsg);
        });
        // 通过ready接口处理成功验证
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
        // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
        // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.ready(wxReady);
    })
}
export {
    wxConfig
}