微信公众号/网页开发调试技巧、微信开发者工具使用及接入微信JS-SDK-一一网

微信开发者工具

开发微信小程序或公众号时需要使用的调试工具微信web开发者工具，选择稳定版下载。

以内容中简称工具

工具的使用

下载完成之后，启动工具。

捕获.PNG

开发原生小程序，可以创建项目直接进入，工具内提供编辑器环境。
使用uniapp开发微信小程序时，在HbilderX内配置好工具所在路径，然后选择工具内 [ 设置 -> 安全 -> 开放端口 ] ,打开开放端口。使用HbilderX打包小程序时就会自动启动工具进入项目。
关于微信公众号/网页的调试：

微信公众号本质上就是h5网页，使用微信内置浏览器渲染网页。启动工具后选择公众号网页项目，进入公众号调试页面。

捕获.PNG

看着这个页面是不是就感觉很熟悉了，是和Chrome浏览器调试基本一样的，多的就是可以调试微信浏览器内置的一些方法。本地测试时，可以将本地启动的页面地址输入到地址栏运行页面调试。

微信公众号测试号

对与开发初期还不能上线正式环境的项目来说，可以申请一个测试号，来进行一些功能的测试。

申请测试号地址

进入申请页面后，扫码登录，然后填写一些配置信息。

捕获.PNG

URL字段填写一个接口，需要后端配合，能够响应微信发送的验证，如果接口异常无法配置成功。
Token字段随便填写，但要求和后端保持一致，否则也会配置失败。

捕获.PNG

此处需要填写一个安全域名，格式：xxxxx.com 或者 xxx.xxxxx.cn，意思就是不需要 http或者https 前缀。设置安全域名后，通过扫描下面的二维码关注测试公众号后，才可以成功调用微信的开放接口。

接入微信JS-SDK

微信公众号/网页开发中接入JS-SDK可以获得一些接口使用权限，例如自定义分享、上传图片、获取位置等功能。

JS-SDK文档地址

流程

现在梳理一下使用JS-SDK的流程：

（1）测试公众号的配置，并把测试公众号中的appId和appsecret给后端，后端签名时需要用到
（2）页面中引入js文件 res.wx.qq.com/open/js/jwe…
（3）注入接口权限验证配置

  let url = encodeURIComponent(location.href.split('#')[0]);
  $.ajax({
    url: '/api/getConfigData',
    type: 'get',
    dataType: 'json',
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
    },
    data: {
      url,
    },
    success: function (data) {
      console.log(data);
      wx.config({
        debug: ture, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.result.appId, // 必填，公众号的唯一标识
        timestamp: data.result.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.result.nonceStr, // 必填，生成签名的随机串
        signature: data.result.signature, // 必填，签名
        jsApiList: ['updateAppMessageShareData'], // 必填，需要使用的JS接口列表
      });
    },
    error: function (e) {
      // console.log('ajax请求异常，异常信息如下：', e)
    },
  });
复制代码

为了保证安全，签名必须在服务端完成，所以要后端配合调一个接口返回signature及上述代码其他几个字段给前端使用，wx.config方法中传入jsApiList是你想要使用的微信接口。

url变量为当前页面链接，后端签名时需要用到，所以调接口时提供给后端。可以根据场景自行调整。

（4）通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
复制代码

例如，使用自定义分享接口时：

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
}); 
复制代码

如果是用户点击按钮才触发的话，就不需要将wx.updateAppMessageShareData写在ready里面。

常见问题

如上图，wx.config权限验证成功，但是jsApiList要使用的接口权限却获取不到。

0 (1).png

这时可以使用工具的调试：「微信开发者工具」-「调试」-「调试微信开发者工具」，选到network面板，然后刷新一下你当前的网页，找到 preverify 这个接口，发现verify_info_list字段为空，而且有报错信息，错误码40048。

还有些时候，会出现63002 错误的签名等问题，总之就是无法正常使用JS-SDK。

出现这类问题的绝大多数原因，都是没有注意到一些小细节，签名时字段错误、公众号域名配置错误等，注意下面几点避免这些问题的发生：

确保公众号/测试号域名配置正确，jsApiList只能在该域名下可以使用
注意nonceStr等字段大小写
确保后端签名时的appId等字段和前端wx.config的字段一致
后端签名时用到的url如果是前端给提供的话，需要前端将url进行encodeURIComponent编码，传给后端时，后端也要用相应的方法解码后再进行签名。url需要的是当前页去掉”#”hash部分的链接，可参考本文示例。