weixin-JS-sdk 使用

·  阅读 37

携手创作,共同成长!这是我参与「掘金日新计划 · 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 填入非空任意值即可。

image.png

开发,引入 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方法都支持,需要自查一下兼容性:

image.png

// <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) })

复制代码

接入使用中的问题:

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

相关文档

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改