什么是wx-jssdk

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

其实就是在h5网页使用微信的一些功能（例如分享、扫一扫等）

使用流程

如何配置wx-jssdk的环境

公众号配置

这里需要注意的是微信公众号账号，不是小程序账号，别登错了

ip白名单设置 && 获取appid和secret

权限列表

如果想用的功能没有权限，需要提前认证申请

域名白名单

设置

txt文件

下载

上传至服务器

这里我是在服务器用nginx映射到我的txt文件

校验

点击保存JS接口安全域名，这个时候就可以正常保存了，如果提示文件不存在导致无法保存，需要你检查nginx配置是否正确，最直接的方法是域名/xxx.txt，例如在浏览器访问 abc.com/dkjadHHOHpjp43.txt，看能否正常访问

wx-jssdk的配置流程

获取access_token

api

参数类型GET, 请求地址https://api.weixin.qq.com/cgi-bin/token

参数

grant_type 默认是client_credential

appid 请参照目录(获取appid和secret)

secret 请参照目录(获取appid和secret)

示例:

  const res = await axios({
    method: "get",
    url: "https://api.weixin.qq.com/cgi-bin/token",
    params: {
      grant_type,
      appid,
      secret,
    },
  })
  
  返回值是
  {

   "access_token": "69_r1dUMc4nYr1eKTExXO3FN-siSLLOU-uCYfXrq-e6nvdi3k3dngbJENLBBa386b8BzlX0Cbg7kxWneZzHlPRujTVZQ1DgJHHLlqaekjg1qL0fsvHjOaDBUFoIp8gHYWbACAZQO",
   "expires_in": 7200
  }

注意事项

这里官方说明要尽量缓存access_token，频繁获取会被限制

获取jsticket

api

参数类型GET,请求地址https://api.weixin.qq.com/cgi-bin/ticket/getticket

参数

type 默认是jsapi

access_token 上文获取到的access_token

  const res = await axios({
    method: "get",
    url: "https://api.weixin.qq.com/cgi-bin/ticket/getticket",
    params: {
      type,
      access_token,
    },
  });
  返回值是
  {

   "errcode": 0,
   "errmsg": "ok",
   "ticket": "LIKLckvwlJT9cWIhEQTwfKQ7uZ6ovsv0nuTBqxgnl9dcrPrTL5aG_Ol_PdgfqbQuUF2ge6LqWGTQeSYFFy95Kw",
   "expires_in": 7200
  }

注意事项

这里官方说明要尽量缓存ticket，频繁获取会被限制

生成签名

  const nodeCeypto = require("node:crypto");
  获取时间戳
  const getTimesTamp = () => {
    return parseInt(new Date().getTime() / 1000) + "";
  };
  const nonceStr = "xkjbdbkl"; //这里自己随便定义一些随机数
  const timeStamp = getTimesTamp();

  // url是前端获取传过来的，前端使用window.location.href.split("#")[0] 获取
  const data = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timeStamp}&url=${url}`;

  const hash = nodeCeypto.createHash("sha1");
  hash.update(data);
  const signature = hash.digest("hex");
  
  ctx.body = {
    code: 0,
    data: {
      signature: signature,
      nonceStr,
      timeStamp,
      url,
    },
  };

校验

mp.weixin.qq.com/debug/cgi-b…

必要性

如果在后续的使用中发现签名非法，可以回这一步校验签名是否正确,拿到正确的签名等于成功一半

前端配置

js引入，当然用npm包也行

  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
  
  
// 配置
    wx.config({
    debug: true,
    appId: 这里填你的appid,
    timestamp: 这里填接口返回的值timestamp,
    nonceStr: 这里填接口返回的值nonceStr,
    signature: 这里填接口返回的值signature,
    jsApiList: [
      "onMenuShareTimeline", // 分享到朋友圈
      "onMenuShareAppMessage", // 分享给朋友
      "onMenuShareQQ", // 分享到QQ
      "onMenuShareWeibo", // 分享到腾讯微博
      "onMenuShareQZone", // 分享到QQ空间
      "scanQRCode",
    ],
  });
  

注意事项，这里config对象的属性一定要对好大小写，如果大小写不对的话，配置会失效导致失败

检查权限

// 可以使用checkJsApi检查是否拥有该功能权限，像有些权限是只有公司认证才有

  wx.checkJsApi({
    jsApiList: [
      "onMenuShareTimeline", // 分享到朋友圈
      "onMenuShareAppMessage", // 分享给朋友
      "onMenuShareQQ", // 分享到QQ
      "onMenuShareWeibo", // 分享到腾讯微博
      "onMenuShareQZone", // 分享到QQ空间
      "scanQRCode",
    ],
    success: function (res) {},
    fail: function (err) {},
  });

使用示例

  wx.scanQRCode({
    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
      console.log("handleScan----success");
      var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
    },
  });

开发场景（补充）

前提: host+charles 备注：使用这个代理，主要是想快速通过域名使用功能，避免某些奇怪的规则导致不能用，尽量按官方的操作来

• host定义

127.0.0.1 abc.com

• charles

http://127.0.0.1:5173 mapRemote to abc.com

• 手机代理访问charles

abc.com