1. 概述
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为用户提供更优的网页体验。
2. 具体步骤
1 绑定域名:“公众号设置”的“功能设置”里填写“JS接口安全域名”
2 引入JS文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
3 通过config接口注入权限验证配置:
(下方会具体分析各个参数)
wx.config({
debug: true,
appId: 'wx99e91be71335e6ad',
timestamp: TIM, // 必填,生成签名的时间戳
nonceStr: NON, // 必填,生成签名的随机串
signature: SIGN, // 必填,签名,见附录1
jsApiList: [
]
});
4 通过ready接口处理成功验证:
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});
});
3. 参数解析
这里着重介绍wx.config步骤里的参数:
1.access_token:
access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。正常情况下access_token有效期为7200秒,重复获取将导致上次获取的access_token失效。
公众号可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在开发模式中获得(需要已经成为开发者,且帐号没有异常状态)。注意调用所有微信接口时均需使用https协议。
也就是说,我们通过原本的AppID和AppSecret去换取得到持续7200s的access_token.
function get_access_token()
{
$data = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/app/access_token.json"));
if (empty($data) || $data->expire_time < time ()) {
$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='
. self::$appid . '&secret=' . self::$appSecret;
$data = $this->get_request($url);
$token = $data['access_token'];
file_put_contents($_SERVER['DOCUMENT_ROOT']."/app/access_token.json",
'{"expire_time":'.(time()+3600).',"access_token":"'.$token.'"}');
} else {
$token = $data->access_token;
}
return $token;
}
2.jsapi_ticket:
jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取
由access_token获取得到jsapi_ticket:
function get_jsapi_ticket() {
$token = $this->get_access_token();
$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$token.'&type=jsapi';
$output = $this->get_request($url);
return $output['ticket'];
}
3.timestamp/nonceStr:
timestamp: 生成签名的时间戳
nonceStr: 生成签名的随机串
生成的方法不固定,目的是让签名唯一:
// 随机字符串
var nonceStr= Math.random().toString(36).substr(2, 16);
// 时间戳
var timestamp= parseInt(new Date().getTime()) + '';
4.sign:
以下是微信官方设定微信制作的标准模板, 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序): ==>
jsapi_ticket + noncestr + timestamp + url
// 制作草稿签名
var i = 'jsapi_ticket=' + TICKET + '&noncestr=' + NON + '×tamp=' + TIM + '&url=' + 'http://t-m.3pzs.com/test/test3.html';
// 字典排序
function hex_sha1(s) {
return binb2hex(core_sha1(str2binb(s), s.length * chrsz));
}
// 制作终签名
var SIGN = hex_sha1(i);
至此,我们得到了调用js-sdk的签名,从而wx.config里的配置完成。