公众平台 JSSDK + 开放标签调试的完整指南

2024-01-29 03:58:31

引言

微信公众号作为国内最主要的移动社交平台，其 JSSDK 和开放标签功能为开发者提供了丰富的功能扩展。然而，调试这些功能往往是一个令人头疼的问题。本文将详细介绍如何使用微信测试号和线上域名进行 JSSDK 和开放标签的调试，帮助开发者快速上手。

1. 微信测试号调试

1.1 获取测试号

前往微信公众平台官网（mp.weixin.qq.com），注册一个微信公众号。注册成功后，即可获得一个测试号。

1.2 申请 JSSDK 功能

登录测试号管理后台，依次点击“设置”->“公众号设置”->“功能设置”->“JS接口安全域名”，勾选“启用JS接口安全域名”，并在“网页授权域名”中填写您的测试域名。

1.3 调试 JSSDK

在测试号后台获取 AppID 和 AppSecret 后，即可在代码中使用 JSSDK 了。具体步骤如下：

引入 JSSDK 脚本 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>。
调用 wx.config 方法配置 JSSDK：

wx.config({
  debug: true, // 开启调试模式，调用的所有 api 的返回值会在客户端 alert 出来
  appId: 'YOUR_APP_ID',
  timestamp: timestamp,
  nonceStr: nonceStr,
  signature: signature,
  jsApiList: ['YOUR_API_LIST']
});

调用 JSSDK API：

wx.ready(function() {
  // 在这里调用 JSSDK API
});

1.4 调试开放标签

在测试号后台获取 AppID 和 AppSecret 后，即可配置开放标签了。具体步骤如下：

在代码中引入开放标签脚本 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>。
调用 wx.config 方法配置开放标签：

wx.config({
  debug: true, // 开启调试模式，调用的所有 api 的返回值会在客户端 alert 出来
  appId: 'YOUR_APP_ID',
  timestamp: timestamp,
  nonceStr: nonceStr,
  signature: signature,
  openTagList: ['YOUR_OPEN_TAG_LIST']
});

调用开放标签 API：

wx.ready(function() {
  // 在这里调用开放标签 API
});

2. 微信线上域名调试

2.1 添加线上域名

在公众号后台，“设置”->“公众号设置”->“功能设置”->“JS接口安全域名”，添加您的线上域名。

2.2 获取线上签名

在线上域名环境中，签名需要通过微信服务器获取。具体步骤如下：

封装获取签名的请求参数：

var params = {
  appId: 'YOUR_APP_ID',
  url: 'YOUR_URL',
  timestamp: timestamp,
  nonceStr: nonceStr
};

发送请求到微信服务器获取签名：

$.ajax({
  type: 'GET',
  url: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=YOUR_ACCESS_TOKEN&type=jsapi',
  data: params,
  dataType: 'json',
  success: function(res) {
    var signature = res.signature;
    // 将签名添加到 wx.config 中
  }
});