微信JS-SDK如何本地调试

问题描述

在公众号和后端接口都还没有准备好的前提下，如何调试js-sdk相关接口？本文将介绍如何解决wx.config所需的参数。

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

公众号准备

接入js-sdk需要配置公众号信息，可在测试号管理申请使用官方测试账号

内网穿透获取外网可访问的域名

下载 ngrock
找到下载的文件，执行 ./ngrock http 8080(8080是项目运行端口)
浏览器访问获得的域名检查是否能正常访问项目内容

配置js域名白名单

在js接口安全域名中配置白名单，其中域名为上一步内网穿透获得的地址

获取Access Token

请求接口如下，可直接在浏览器拼接请求获取 access token，appid和secret可在测试号中获取

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

获取 Js Ticket

请求接口如下，可直接在浏览器拼接请求获取 js ticket，其中 access token 为上一步获取的的内容

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

签名

使用微信js签名工具完成签名，其中js ticket为上一步获取的内容，其他字段自行随意配置

引入 js-sdk

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

配置初始化

所有配置都已获取，直接通过wx.config配置即可（请与上面内容一一对应）。

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

使用 js-sdk 能力

wx.ready(() => {
    wx.getLocation({
        // ...
    })
});