微信JS-SDK开发 入门指南

目录

• 前言
• 1. 过程
  • 1.1 代码
  • 1.2 代理
    • 1.2.1 下载
    • 1.2.2 解压
    • 1.2.3 运行
    • 1.2.4 查看
  • 2. 微信接口测试
    • 2.1 申请测试帐号
      • 2.1.1 测试号信息
      • 2.1.2 接口配置信息
      • 2.1.3 Js安全接口域名
• 参考

前言

自己要做一个微信分享，一般来说，接第三方平台就可以了。但是现在的需求是可以更改在分享的时候, 需要修改分享的时候显示的标题和图片。这个时候就涉及到需要调微信提供的接口了。在做的过程中，觉得这个过程比较繁琐，因此记录下来，供人参考。
在看本文之前请务必已经将微信公众平台中的微信网页开发下的微信JS-SDK说明文档第一部分浏览一次。这样，更容易明白我在说什么。

本文仅针对微信网页开发， 简单的说明一下整个过程:

1. 前端将当前页面的url传递给后端，当然也可以是后端直接获取前端的url。
2. 后台根据前端页面的url和相关的算法，生成一个签名(signature), 并将生成签名的其他数据传递给前端，具体查看微信公众平台。
3. 当前端接受到后端传回的数据后，就可以通过config接口注入权限验证配置了，一旦成功后, 微信端会弹出: errMsg: {config is ok}。
4. 调用微信的各种接口。

提供一个微信分享第三方平台, 请搜索如何接入。

各种后台生成signature的方法，微信公众平台已经提供了几种语言的，如果你使用的是不同的语言，可以根据提供的方法进行相应的修改。

提示: 报错可以查看微信公众平台上的解决方案。

1. 过程

1.1 代码

前端使用SDK的步骤:

componentDidMount() {
  const that = this;
  const url = encodeComponentURI(location.href);

  // 向后台发送请求
  // url作为参数传递到后台去
  // () => {}, 当后台返回数据后，调用回调函数
  this.props.actions.getSignaturePack(url, (obj) => {
    const {  signPackage } = obj;
    const { appId, timestamp, nonceStr, signature } = signPackage;

    // 参考微信公众平台: https://mp.weixin.qq.com/wiki
    // JSSDK使用步骤
    // 第一步: 填写JS接口安全域名，请查看 2.1申请测试帐号
    // 第二步: 引入JS文件
    // 第三步: 通过config接口注入权限验证配置
    wx.config({
      debug: true, // 调试模式, 请设置为true
      appId,
      timestamp,
      nonceStr,
      signature,
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
    });

    // 第四步: 通过ready接口处理成功验证
    wx.ready(() => {

      // 第五步: 判断客户端是否支持要使用的接口
      wx.checkJsApi({
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
        success: () => {
        },
      });

      // 第六步: 接口调用, 如分享给朋友
      const { displayLink, title, abstract } = this.props.state.detail;
      wx.onMenuShareAppMessage({
        title,
        desc: abstract,
        link: location.href,
        imgUrl: displayLink,
        type: '',
        dataUrl: '',
        success: () => {},
        cancel: () => {},
      });
    });
  });
}

1.2 代理

当你的代码都完成的差不多的时候，你需要开始扫描微信二维码进行测试，你却发现扫出来的结果是网络错误或者是其他错误。这是由于你在本地起的服务，而你用的第三方的平台生成的二维码，你的URL当然是localhost:8000之类的，所以你肯定是扫不出来东西的。

因此你需要一个这样的工具，在你起的本地服务，可以映射到公网上去。当然，你也可以自己搭建一个公网服务器，然后将你的项目放到服务器上，但是如果这么做，你的测试就麻烦很多了。你每次的修改代码都要上传到服务器上去，当然，你也可以直接在服务器上进行操作。说了这么多，其实就是想推荐一个叫ngrok的代理工具给你,十分方便。它可以将你本地起的一个服务映射到公网上去。

1.2.1 下载

点击ngrok官网, 根据你的系统下载相应的版本。由于我是Centos7, 因此就只是介绍Centos7。

1.2.2 解压

unzip ngrok

1.2.3 运行

ngrok的运行十分简单，首先将你本地的服务起起来，然后一条命令搞定, 将端口号为8001的服务映射到公网上去。

./ngrok http 8001

1.2.4 查看

打开浏览器，输入控制台里ngrok为你分配的二级域名，你就可以看到你的项目在公网上运行了。因为它是免费的，所以它有2个缺点:

1. 慢，其实慢不慢是看个人的，我个人是认为慢。
2. 二级域名是随机的，所以我一般这个控制台打开后就不会再关闭的。

上面的两个缺点，其实都是可以解决的，就是付费。

2. 微信接口测试

当你的项目可以在公网上跑了，你就可以进行接口测试了，但是在测试之前，你还需要进行下面几步。

2.1 申请测试帐号

在你申请测试帐号之前，假如你已经有公众号了，如果没有，请去微信公众平台申请一个。

1. 打开微信公众平台，登录。
2. 看左侧侧边栏，最下面，点击开发者工具。
3. 进入公共平台测试帐号。
4. 这个时候一共显示了三个模块，分别是测试号信息、接口配置信息，Js接口安全域名。

下面分别介绍下这三个模块。

2.1.1 测试号信息

这里展示了appId和appSecret, 它是你后台用来生成签名所需要的。如果你要测试，需要将你之前写的appId和appSecret改为测试帐号生成的appId和appSecret。

2.1.2 接口配置信息

URL请填写ngrok映射的地址。关于token的话，它是你在调用微信有的接口的时候需要填写的，由于我所调用的分享接口是用不到token的，因此我就不详细解释了。

值得注意的是，token是可以任意填的，但是你要保证满足它的规则以及它与你网站设置的token保持一致。记得，当你在这里填写token的时候，你的项目里已经设置好了token，否则将会提示配置失败。

提示: 这里的token和你之前要获取的jsapi_ticket所需要的access_token是不一样的东西。

2.1.3 Js安全接口域名

这里填写你所映射的ngrok的地址，有两点需要注意，第一个就是ngrok映射的是二级域名，所以你直接填写你的二级域名就可以了。第二个就是一定记得不要加协议(http://), 直接输入xxxxxxxx.ngrok.io就可以了。

参考

微信公众平台
Django使用微信分享接口