Fork me on GitHub

微信公众号

发表于 |
字数统计: 1.1k字 | 阅读时长 ≈ 5分

微信公众号开发记录

微信公众号开发

  • 微信登录

    • 用户同意，获取 code
      链接：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

      • appid 基本配置中的 AppID

      • redirect_uri 请求 code 之后重定向的域名，也是在基本配置中设置的，如果需要跳转到下级路由需要配置

        1
        <Route path='/' exact render={()=>(<Redirect from='/' to='/loading'/>)}/>

      • state 参数，可以是要绑定的 uid

      • scope
        • snsapi_base:不弹出授权页面，直接跳转，只能获取用户 openid
        • snsapi_userinfo:弹出授权页面，可通过 openid 拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息
          code 说明 ： code 作为换取 access_token 的票据，每次用户授权带上的 code 将不一样，code 只能使用一次，5 分钟未被使用自动过期。
          如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

    • 根据 code 获取用户的 openid

      • 请求

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        request.get({
            url: `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${wxConfig.appID}&secret=${wxConfig.appSecret}&code=${code}&grant_type=authorization_code`
        }, function (error, response, body) {
            console.log('openid', body)
            let {  openid } = JSON.parse(body)
            let body1={
                params: {openid:openid},
                model,
                method
            }
            request_primary_server('/login',{body:body1},res)
        })
        • appid:公众号唯一标识
        • secret：公众号的 appsecret
        • grant_type:authorization_code
        • code

      • 返回值

        1
        2
        3
        4
        5
        6
        7
        {
            "access_token":"ACCESS_TOKEN",//网页授权接口凭证
            "expires_in":7200,  //凭证超期时间 s
            "refresh_token":"REFRESH_TOKEN",
            "openid":"OPENID", //公众号和用户唯一的
            "scope":"SCOPE"
        }

    • 如果 scope 为 snsapi_userinfo 可以通过 access_token 和 openid 拉取用户信息

      • GET 方法请求

        1
        https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

      • 返回

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        {
            "openid":" OPENID",//用户唯一的标识
            " nickname": NICKNAME,//昵称
            "sex":"1",//性别1是男，2为女，0是未知
            "province":"PROVINCE", //省份
            "city":"CITY", //城市
            "country":"COUNTRY", //国家
            "headimgurl":       "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",//头像
            "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],//用户特权信息
            "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" //只有公众号绑定到微信开发平台账号后，才会出现该字段
        }

  • 微信公众平台 JS-SDK
    面向网页开发者提供基于微信内的网页开发工具包

    • 绑定域名
      微信公众平台，微信公众号设置，填写 JS 接口安全域名

    • 引入 JS 文件

      1
      <script src='http://res.wx.qq.com/open/js/jweixin-1.4.0.js'/>

    • 前台配置 window.wx.config

    1
    2
    3
    4
    5
    6
    7
    8
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳  new Date().getTime()
        nonceStr: '', // 必填，生成签名的随机串 'fdd'
        signature: '',// 必填，签名
        jsApiList: [] // 必填，需要使用的JS接口列表 地理位置 ['getLocation']
    });

    • signature

      • 获取 access_token 存入全局

        • GET 请求

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11

          request.get({//获取access_token
             url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${wxConfig.appID}&secret=${wxConfig.appSecret}`,
             },(error, response, body) => {
                 if (!error && response.statusCode === 200) {
                     let {  access_token } = JSON.parse(body);
                     global.access_token = access_token;
                     let expires_out = timestamp + 7200 * 1000;
                     global.expires_out=expires_out;
                 }
             })

      • 返回值

        1
        {"access_token":"ACCESS_TOKEN","expires_in":7200}

    • 获取 ticket,生成 js-sdk 权限签名

      • GET 请求

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        request.get({
            url:`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
        },(error, response, body) => {
            if (!error && response.statusCode === 200) {
                console.log('body',body)
                let {  ticket } = JSON.parse(body);
                let result={
                    signature: getSignature(timestamp, nonceStr, URL, ticket),
                }
                res.json({'result':result})
            }
        })

    • 签名算法

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      var crypto = require('crypto')
      function sha1(str) {
          let shasum = crypto.createHash("sha1")
          shasum.update(str)
          str = shasum.digest("hex")
           return str
      }

      function getSignature(timestamp,nonceStr,URL,ticket){
          var string = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${URL}`
          return sha1(string)
      }
      module.exports =  getSignature;

    • 前端 通过 ready 接口处理成功验证,error 接口处理失败

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
          window.wx.ready(()=>{
              //示例获取地理位置
          window.wx.getLocation({
              type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
              success: (res) => {

              }
          });
          })

          window.wx.error(function(res){

      });
-------------本文结束感谢阅读-------------