记一次微信公众号开发

产品要作一个分享传播的活动考虑微信公众或者小程序

功能/是否支持	微信公众号	小程序
一键分享好友	❎	✅
分享朋友圈	✅	❎
直接获取手机号	❎	✅
下载app	✅	❎

权衡利弊之后决定使用微信公众号生态，获取手机号能够用户输入，分享好友能够引导用户进行操做。 要使用公众号分享后好友能看到标题的描述的内容须要使用JSSDK。

微信文档

这里我走进了个误区，觉得使用JSSDK须要用户受权，实际不须要也能使用。 接下来咱们开搞。

JSSDK开发

1. 第一步，绑定域名，主要是在公众平台填写js接口安全域名
2. 第二步，在页面中引入http://res.wx.qq.com/open/js/jweixin-1.4.0.js或者http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
3. 第三步，在填写wx.config
4. 第四部，在wx.ready里使用微信分享，配置对应的标题描述图片和访问地址
5. 第五步，大功告成

哇，好简单！固然不可能了，这么简单不就很差玩了。在第三步的填写wx.config时还需作比较多的工做

配置wx.config

主要是要生成signature

jsapi_ticket文档

1. 首先须要后端小伙伴配合获取jsapi_ticket
2. 生成signature，虽然说微信建议在后端生成，实际在前端也能够作。 (1). 用jsapi_ticket、noncestr（随机字符串）、timestamp（任意时间戳）、url（当前页面url，若是有#，#后不须要）。按照顺序，拼接成一个字符串 (2). 对字符串进行sha1加密 (3). 获得signature

const signArgs = {
    timestamp: parseInt(new Date().getTime() / 1000), // 时间戳
    noncestr: Math.random().toString(36).substr(2), // 随机字符串
    url: location.href.split('#')[0],
    jsApiTicket
  }
  const preSha = `jsapi_ticket=${signArgs.jsApiTicket}&noncestr=${signArgs.noncestr}&timestamp=${signArgs.timestamp}&url=${signArgs.url}`
  const signResult = {
    noncestr: signArgs.noncestr,
    timestamp: signArgs.timestamp,
    signature: sha1(preSha)
  }
  wx.config({
    debug: false,
    appId: weixinAppid,
    timestamp: signResult.timestamp,
    nonceStr: signResult.noncestr,
    signature: signResult.signature,
    jsApiList: self.jsApiList
})
复制代码

---

我在过程当中遇到两个坑

1. 第一个坑，经过微信官方给的signature生成验证工具,无论怎么样都不同，最后发现官方的时间戳是10位，我这边生成的是13位，因此在代码里我作了除以1000parseInt操做
2. 第二个坑，两边生成的signature同样了，可是在页面里仍是报invalid signature，最后发现是我appid填写错误，填写正确之后就正常了。

微信 JS 接口签名校验工具 常见错误及解决方法

---

我在作的时候仍是作了用户受权（虽然作完发现不须要注释了） 这里仍是记录一下。 主要是从微信获取code

微信文档

用户受权，获取用户信息

1. 跳转到中间页获取用户受权authorize为我这里的页面

const url = encodeURIComponent(window.location.href)
    window.location.replace(
      `${authorize}?appid=${weixinAppid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    )
复制代码

2. 用户受权后会跳回，并在参数后拼上code
3. 经过code换取网页受权access_token，必须从后端发起了

{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE" 
 }
复制代码

4. 经过access_token和openid就能够拿到用户信息了

{   
    "openid":" OPENID",
    " nickname": NICKNAME,
    "sex":"1",
    "province":"PROVINCE"
    "city":"CITY",
    "country":"COUNTRY",
    "headimgurl":       "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
    "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
    "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
复制代码