微信公众号2

一、运行环境。（微信类的开发，测试最好是放在开发者工具上，在浏览器上微信的网页是受到限制的）

　　公众号是基于传统H5 开发与运行，传统H5 运行环境是浏览器。因为公众号网页是在微信这个容器中运行的，所以使用微信的SDK，可以调用微信原生的一些功能。

二、微信JS-SDK ：  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

　　 （个人）微信SDK应该的是给微信公众号网页所有的，可以使网页调用微信开放的一些接口，如拍照。

三、微信公众号 授权登录：https://www.cnblogs.com/sunshq/p/5132811.html（推荐，亲测有效） 或  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842（官方文档）

　　步骤：1、配置回调函数

　　　　　2、组装授权Url.

                        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填入 经过encodeURIComponent()的参数,SCOPE填入snsapi_userinfo, state=#wechat_redirect即可

                        eg:https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef450dbeb79f6c72&redirect_uri=http://5ed286c2.ngrok.io/wx/mp&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect

 　　　　  3、把组装后的url填入微信开发者工具地址栏中就可以发起授权弹窗了。授权后直接进入页面。

 　　　　  注意：这里直接在微信中扫码，授权后，域名必须是备案的才可以直接打开。（微信中，必须是备案的域名才能打开网页。微信开发者可以打开没有备案的域名）

微信公众号：后台生成的二维码（一般是域名 open.weixin.qq.com/），在微信中打开会重定向 URL 的。使用 微信开发者工具就可以 调试。 

---

 express做后端服务器  开发  微信公众号网页  https://segmentfault.com/a/1190000016445803  或  https://www.cnblogs.com/wuyuchang/p/7170949.html（推荐，亲测有效，注意里面有几个单词字母有错别字，程序会报错。如，timestamp 有的地方变成了 timpstamp）

1、修改接口配置信息（同时也是一个经验加密签名的算法是否正确）

router.get('/wxJssdk', function(req, res, next) {
  
  // var token = config.wechat.token
  var token = "wxexpress"
  var signature = req.query.signature
  var nonce = req.query.nonce
  var timestamp = req.query.timestamp
  var echostr = req.query.echostr

  console.log("req", req);
  console.log("signature", signature);
  console.log("nonce", nonce);
  console.log("timestamp", timestamp);
  console.log("echostr", echostr);

  var str = [token, timestamp, nonce].sort().join('')
  var sha = sha1(str)
  console.log("sha", sha);
  res.send(echostr);
  if (sha === signature) {  // 这里就可以校验自己的加密算法和微信要求的加密算法是不是一致
      res.send(echostr);
  } else {
      res.send(wong);
  }
});

2、填写安全域名

3、生成signature

/* 前端传入参数： url*/
router.post('/getJssdk', (req, res) => {
  const request = require('request')

  const grant_type = 'client_credential'
  const appid = 'wx1**********e'     // 微信公众号的appid
  const secret = 'f1********************a'   // 微信公众号的secret

  request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
    let access_token = JSON.parse(body).access_token

    request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
      let jsapi_ticket = JSON.parse(body).ticket
      let nonce_str = '123456'    // 密钥，字符串任意，可以随机生成
      let timestamp = new Date().getTime()  // 时间戳
      let url = req.body.url   // 使用接口的url链接，不包含#后的内容
      console.log('jsapi_ticket', jsapi_ticket);
      console.log('nonce_str', nonce_str);
      console.log('timestamp', timestamp);
      console.log('url', url);
      
      // 将请求以上字符串，先按字典排序，再以'&'拼接，如下：其中j > n > t > u，此处直接手动排序
      let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url
      console.log('str', str);
      // 用sha1加密
      let signature = sha1(str)
      console.log('signature', signature);
      res.send({
        appId: appid,
        timestamp: timestamp,
        nonceStr: nonce_str,
        signature: signature,
      })
    })
  })
})

4、前端 调用  getJssdk 方法，获取需要的参数

       axios.post('/getAccessToken/getJssdk', {url: location.href}).then((response) => {
            var data = response.data

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

        })

5、前端  在 wx.ready( )方法中，执行微信 JS-SDK的方法；或在  wx.error( ) 中告诉用户，微信接口不可用

        wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.checkJsApi({
                jsApiList: ['onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                }
            });
        });

        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log('微信config失败');
            
        });