开发环境调试微信jssdk

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

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

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

JSSDK使用步骤

使用步骤很简单:

开发环境调试微信jssdk

详细可以查看官方文档

本地调试关键网址

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

本地调试JSSDK步骤

绑定域名

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

开发环境调试微信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粘贴出来:
    开发环境调试微信jssdk

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

    开发环境调试微信jssdk

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

    开发环境调试微信jssdk

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

      开发环境调试微信jssdk

    • 然后将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

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

开发环境调试微信jssdk

原文链接:https://juejin.cn/post/7215043206034948152 作者:let_code

(1)
上一篇 2023年3月27日 下午5:08
下一篇 2023年3月27日 下午5:19

相关推荐

发表回复

登录后才能评论