weixin-JS-sdk 使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

接入

前置条件

1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。

2.引入 JS 文件

3.config 接口注入权限验证配置

所有需要使用 JS-SDK 的页面必须先注入配置信息

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

注意：如果使用的是小程序云开发静态网站托管的域名的网页，可以免鉴权直接跳任意合法合规小程序，调用 wx.config 时 appId 需填入非个人主体的已认证小程序，不需计算签名，timestamp、nonceStr、signature 填入非空任意值即可。

开发，引入 JS 文件

安装:

npm install weixin-js-sdk

使用:

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

示例

判断当前客户端版本是否支持指定 JS 接口

wx.checkJsApi({
  jsApiList: ['chooseImage'], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
  success: function(res) {
  // 以键值对的形式返回，可用的 api 值true，不可用为false
  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  }
});

web-view中支持的jssdk

web-view中打开h5页面，并不是所有的weixin-JS-sdk api方法都支持，需要自查一下兼容性：

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

wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

接入使用中的问题：

wx undefined 出现原因：html引入了js，同时npm也引入，冲突了解决：选择一个引入方式即可。建议npm引入