微信公众号 JSSDK 使用步骤

MuYan2020-12-08WeChat微信公众号微信

步骤一：绑定域名

登录微信公众平台open in new window进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。
注：每月修改/绑定安全域名有次数限制，谨慎修改/绑定

步骤二：引入 JS 文件（jweixin-1.6.0.js, 如需使用开放标签，版本必须是 1.6.0 或以上版本）

直接下载对应 js 到本地库，或者使用以下两种方法

直接引入

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

npm 食用

安装：

npm install weixin-js-sdk

使用:

var wx = require("weixin-js-sdk");

步骤三：通过 config 接口注入权限验证配置并申请所需开放标签

config 接口所需签名相关参数由后端提供，签名生成中所需的 url 由前端提供，后端根据前端提供的当前网页 url 进行签名校验
可通过以下代码获取当前页面的 url 地址（url 地址为网页当前路径，不包含参数）

window.location.href.split("#")[0];

注

vue 开发时，wx.config 在安卓环境下，每次跳转都需要注入一次，路由模式建议使用 hash 模式

签名校验工具open in new window

config 使用

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表 如只需使用开发接口，可随便写个js接口，例如['openLocation']
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
wx.ready(function () {
    //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
	// 注：ready 配置后必执行，如 config 失败 则先执行 error ， 后执行 ready，建议此处自行判断是否属于微信环境
});
wx.error(function(res) {
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    console.log('error',res);
});