微信公众号开发若干问题

一、网页授权

  • 官网链接微信开放文档 (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
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。