不管是微信公众号h5开发，还是微信小程序开发，前端总是要依赖后端去完成各种调试。比如微信授权登录，再比如微信JSSDK的使用需要后端获取signature。

话说求人不如求己，可以使用微信测试号进行本地调试。

以使用微信 JSSDK为例，说一下如何完成本地调试。

JSSDK使用步骤

使用步骤很简单：

详细可以查看官方文档。

本地调试关键网址

1. 微信测试号管理平台：提供测试的appID和appsecret，还可以进行一些配置，比如：JS接口安全域名等
2. 微信公众平台接口调试工具：根据appID和appsecret生成access_token
3. https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={你刚刚获取的token}&type=jsapi：这个是一个接口，可以在浏览器直接访问，会返回ticket
4. 微信 JS 接口签名校验工具：用于生成signature
5. 生成时间戳网址

本地调试JSSDK步骤

绑定域名

打开微信测试号管理平台，找到如下位置：

点击“修改”配置域名。注意是配置域名，不需要添加协议。

引入js文件

这很简单：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

通过config接口注入权限验证配置

function wxConfig(data) {
    wx.config({
        debug: false,
        appId: data.appid,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: ['ready', "hideMenuItems", "hideAllNonBaseMenuItem", 'hideOptionMenu']
    });

}

config 接口需要的参数正常应该来自后端接口，但是本地测试中可以使用测试号。

• appId ：打开 微信测试号管理平台，将提供的appId粘贴出来：
  

• timestamp、nonceStr、signature ：这三个是相互关联的：

  • 首先打开 微信测试号管理平台，将提供的appId和appsecret粘贴出来
  • 然后打开微信公众平台接口调试工具：根据上一步的appID和appsecret点击“检查问题”生成access_token

  

  • 浏览器打开 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={你刚刚获取的token}&type=jsapi，将上一步获取的access_token替换进url，会获得 ticket：

  

  • 打开微信 JS 接口签名校验工具：jsapi_ticket是上一步生成的 ticket，noncestr可以写死Wm3WZYTPz0wzccnN，timestamp去生成时间戳网址生成，url要填写页面路由中#前边的部分。即使有参数也要带上：

    

  • 然后将timestamp、nonceStr、signature填入config

通过ready接口处理成功验证

function wxConfig(data) {
    wx.config({
       //......
    });

    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: ['ready', "hideMenuItems", "hideAllNonBaseMenuItem", 'hideOptionMenu'],
            success: function (res) {
                const { checkResult } = res
                if (checkResult.hideAllNonBaseMenuItem) {
                    wx.hideAllNonBaseMenuItem();
                }
            },
            fail: (err) => {
                console.log(err, '不可用')
            }
        })
    });

}

通过error接口处理验证失败

function wxConfig(data) {
    wx.config({
       //......
    });

    wx.ready(function () {
         //......
    });

    wx.error(function (res) {
        console.log('wx jssdk ready fail------', res)
    });

}

最后将wxConfig函数在入口文件中调用就好啦。

遇到的问题

config:fail,invalid url domain

需要将验证文件放在项目根目录下，然后在公众号配置中去验证：