前言

微信对接是日常开发中经常会接触到的一个场景，尤其是面向C端的产品，经常通过分享到微信或者朋友圈进行引流。

今天讨论的就是微信对接的环境搭建以及注意事项。

环境搭建

JSSDK

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

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

使用步骤如下

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

注入配置信息

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

注意：值得注意的是，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败 (虽然文档说6.2就修复了，但实测截止2022年8.0版本的微信依旧存在此bug)

以上三个步骤就完成了微信jssdk的引入，接着就可以使用wx.ready对接口进行验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。

以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：

调用成功时："xxx:ok" ，其中xxx为调用的接口名

用户取消时："xxx:cancel"，其中xxx为调用的接口名

调用失败时：其值为具体错误信息

前端环境搭建

上文也提到过，在调用jssdj的参数中，有几个是需要服务端生成的，纯web前端是无法完成测试的。

但实际开发中都是前后端分离的，所以我们需要一种摆脱后端依赖，前端独自完成的方法。

这里我们借助官方提供的微信测试平台，以及开发者工具，通过nodejs以及修改host映射实现

1.修改host域名映射

微信只有配置了安全域名并且在安全域名下才能成功调用jssdk

那么第一步就是解决如何在本地环境模拟生成环境

这一步很简单，直接修改电脑的host，把域名映射到本地地址。

比如我的安全域名为：baidu.com，本地开发环境为localhost，那么host直接增加一行127.0.0.1 baidu.com。

这里有一点要提醒大家的就是，一般react项目的端口是8080，但安全域名都是默认80端口，所以建议大家把端口改成80便于测试。

配置完上面的就可以通过访问baidu.com直接访问本地环境了，并且成功调用jssdk

2. 测试环境搭建

去官方提供的微信测试平台申请各类配置

然后部署node服务端

const request = require('request');
const sha1 = require('js-sha1'); // 引入sha1加密算法，需要使用sha1算法生成签名
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var cors = require('cors');
app.use(bodyParser());

app.use(cors());

// eslint-disable-next-line no-undef
app.post('/getWX', function (req, res) {
  const appId = '222'; // 测试公众号的addId
  const appSecret = '222'; // 测试公众号的appSecret
  const url = decodeURIComponent(req.body.url); // 初始化jsdk的页面url，如果是单页应用记得截掉url的#部分
  let promise = new Promise((resolve, reject) => {
    // 第一步，通过appId和appSecret 获取access_token
    request(
      `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`,
      function (error, response, body) {
        if (!error && response.statusCode == 200) {
          let access_token = JSON.parse(body).access_token;
          console.log('第一步获取access_token：', access_token);
          resolve(access_token);
        } else {
          reject(error);
        }
      },
    );
  });

  promise
    .then((access_token) => {
      // 第二步，通过第一步的access_token获取票据ticket
      return new Promise((resolve, reject) => {
        request(
          `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`,
          function (error, response, body) {
            if (!error && response.statusCode == 200) {
              let ticket = JSON.parse(body).ticket;
              console.log('第二步获取ticket：', ticket);
              resolve(ticket);
            } else {
              reject(error);
            }
          },
        );
      });
    })
    .then((ticket) => {
      const createNonceStr = () => Math.random().toString(36).substr(2, 15);
      const createTimeStamp = () => parseInt(new Date().getTime() / 1000) + '';
      const calcSignature = function (ticket, noncestr, ts, url) {
        var str = `jsapi_ticket=${ticket}&noncestr=${noncestr}&timestamp=${ts}&url=${url}`;
        var shaObj = sha1(str); //使用sha1加密算法
        return shaObj;
      };
      const noncestr = createNonceStr(); // 随机字符串
      const timestamp = createTimeStamp(); // 时间戳
      const signature = calcSignature(ticket, noncestr, timestamp, url); // 通过sha1算法得到签名
      res.send({
        data: {
          noncestr: noncestr,
          timestamp: timestamp,
          signature: signature,
          appId,
          appSecret,
        },
      });
    })
    .catch((error) => {
      console.log(error);
    });
});

app.get('/', function (req, res) {
  res.send('hello world');
});

app.listen(9999, function () {
  console.log('App started on port 9999');
});

微信开发注意点

1. 微信安全域名

微信的安全域名需要完全匹配，三级域名等等都是无效的

举个例子，如果我们设置的安全域名是163.com，那么我们只能在在这个域名下面使用，即使是子域名more.163.com/

2.手机测试

如果要唤醒app，必须使用sdk生成的卡片，或者使用微信开发者工具的浏览功能，不然会报错launch:fail

微信开发环境搭建及注意事项

前言