记一次微信公众号开发

叫我王珩hnghnghng
450 阅读2分钟

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

功能/是否支持 微信公众号 小程序
一键分享好友 ❎ ✅
分享朋友圈 ✅ ❎
直接获取手机号 ❎ ✅
下载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`
    )
  1. 用户授权后会跳回，并在参数后拼上code
  2. 通过code换取网页授权access_token，必须从后端发起了
{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE" 
 }
  1. 通过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"
}
avatar
文章
阅读
粉丝