微信开发之 Jssdk

公众号开发项目,若遇到有隐藏菜单、关闭页面、定制分享等功能,就需要用到 Jssdk,若需要上传图片,也建议使用 Jssdk,可以避免部分手机因文件保护而不能上传图片的问题。

使用 Jssdk 需要后端配合,使用流程大致如下:

  1. 后端用 appid & appsecret 获取 access_token,再用 access_token 获取 ticket;
  2. 后端用 ticket 和随机数等参数获取签名包,详见 WeChat.php -> getSignPackage( );
  3. 前端获得后端传来的参数,通过 config 接口注入权限验证配置;
  4. 前端通过 ready 接口处理业务逻辑;

具体流程如下:

1. 获取签名包:(后端)

微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。
引入 WeChat.php ,这里以放在 ThinkPHP/Library/Vendor 为例。
使用方法如下

1
2
3
4
5
6
function getJssdk(){
vendor('WeChat');
$jssdk = new \Jssdk();
$sign = $jssdk->getSignPackage();
return "appId:'{$sign["appid"]}',timestamp:{$sign["timestamp"]},nonceStr:'{$sign["nonceStr"]}',signature:'{$sign["signature"]}'";
}

其中,将必要的参数拼接为字符串,是为了可以直接赋值到模板。当然也可以直接将 $sign 传给前端,由前端处理。

2. 调用 config 接口:(前端)

首先引入 js 文件:http://res.wx.qq.com/open/js/jweixin-1.2.0.js
Jssdk 的文档写明,初始化 Jssdk 需要配置:

1
2
3
4
5
6
7
8
wx.config({
debug: true, // 调试模式
appId: '', // 公众号的唯一标识
timestamp: , // 生成签名的时间戳
nonceStr: '', // 生成签名的随机串
signature: '', // 签名
jsApiList: [] // 需要使用的JS接口列表
});

其中 appId timestamp nonceStr signature 四个参数在后端已经拼接好了,所以可以这样调用:

1
2
3
4
5
wx.config({
debug:true,
{:getJssdk()},
jsApiList:[]
});

因为 debug 为 true,所以这个时候,会弹出 {"errMsg":"config:ok"}
jsApiList 参数用于定义页面所需要使用到的接口列表,这里以“隐藏所有非基础按钮接口”为例:

1
jsApiList:['hideAllNonBaseMenuItem']

上面只是声明了需要使用该接口,调用的方法如下:

1
2
3
wx.ready(function(){
wx.hideAllNonBaseMenuItem();
});

所有 Jssdk 接口的使用,最好都放在 ready 的回掉函数里面,避免 Jssdk 未加载成功就被执行
以上是 Jssdk 的使用流程,若无出错,手机端点开右上角菜单,可以看到大多数菜单项已经被隐藏。

易出错的地方:

  • 配置“JS 接口安全域名”的时候,需要将所需放置的文件放置到服务器的根目录;
  • 若调用失败,先检查签名包参数是否完整;
  • 使用接口之前,不要忘了将接口添加到 jsApiList;