首先完成官方文档前两步(很好理解就不具体说了):
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
然后是从步骤3开始进行实现
步骤三:通过config接口注入权限验证配置
这个地方采用ajax的方式来注入权限;
var link = ""; //用来接收返回的url
$(document).ready(function(){
ajaxconfig();
});
function ajaxconfig(){
/* 获取当前页面url,传递给服务器端完成签名,此处是最大的坑一定要对url进行encodeURIComponent(),
* 因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
*/
var url = encodeURIComponent(window.location.href.split('#')[0]);
var eventinfo = {
url:url,
};
$.ajax({
type: "post",
url: "{:U('Event/get_config')}", // 服务器端url
data : eventinfo,
dataType: 'json',
success: function(obj){
// 注入权限验证配置
wx.config({
debug : true, //实现阶段开启debug
appId : obj.appId, //必填,公众号的唯一标识
timestamp : obj.timestamp, //必填,生成签名的时间戳
nonceStr : obj.nonceStr, //必填,生成签名的随机串
signature : obj.signature, //必填,签名
jsApiList : [ //必填,需要使用的JS接口列表,所有JS接口列表见官方文档
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
link = obj.url; // 获取成功签名返回的url
}
})
}
wx.ready(function () {
// 注入权限验证成功后会执行这里,以"分享给朋友"为例
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致(ajax返回的url)
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
};
下一步,在服务器端完成签名,返回权限验证配置信息。下载官网提供的示例代码,参照jssdk.php中的代码一步一步来实现。
先创建一个"活动(Event)"控制器:EventController.class.php;模版文件event.html;
// 控制器代码
// 获取随机串,直接复制jssdk.php
private function createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}
//获取票据,复制jssdk.php进行修改
private function getJsApiTicket() {
//用于缓存jsapiTicket的文件地址,复制官方例子中的jsapi_ticket.php到你要存放的位置
//拼接文件地址
$jsapi_ticket_url = $_SERVER['DOCUMENT_ROOT']."/Public/js/home/event/jsapi_ticket.php";
// jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode( $this -> get_php_file($jsapi_ticket_url) ); //修改get_php_file( )中的变量
if ($data->expire_time < time()) {
$accessToken = $this->getAccessToken();
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
$res = json_decode($this->httpGet($url));
$ticket = $res->ticket;
if ($ticket) {
$data -> expire_time = time() + 7000;
$data -> jsapi_ticket = $ticket;
$this -> set_php_file($jsapi_ticket_url, json_encode($data)); //修改set_php_file( )中的变量
}
} else {
$ticket = $data->jsapi_ticket;
}
return $ticket;
}
//获取AccessToken,复制jssdk.php进行修改
private function getAccessToken() {
$appId = "你的AppID";
$appSecret = "开发者密码AppSecret";
//用于缓存AccessToken的文件地址,复制官方例子中的access_token.php到你要存放的位置
$access_token_url = $_SERVER['DOCUMENT_ROOT']."/Public/js/home/event/access_token.php";
// access_token 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode($this->get_php_file($access_token_url)); //修改get_php_file( )中的变量
if ( $data -> expire_time < time()) {
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appId&secret=$appSecret";
$res = json_decode($this->httpGet($url));
$access_token = $res->access_token;
if ($access_token) {
$data -> expire_time = time() + 7000;
$data -> access_token = $access_token;
$this -> set_php_file($access_token_url, json_encode($data)); //修改set_php_file( )中的变量
}
} else {
$access_token = $data->access_token;
}
return $access_token;
}
//直接复制jssdk.php
private function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_URL, $url);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}
//直接复制jssdk.php
private function get_php_file($filename) {
return trim(substr(file_get_contents($filename), 15));
}
//直接复制jssdk.php
private function set_php_file($filename, $content) {
$fp = fopen($filename, "w");
fwrite($fp, "<?php exit();?>" . $content);
fclose($fp);
}
public function get_config(){
$url = urldecode(I('post.url')); // 把ajax发送过来的url进行解码!!!此处是坑
$timestamp = time();// 时间戳
$nonceStr = $this -> createNonceStr(16);// 随机串
$jsapiTicket = $this-> getJsApiTicket();// 票据
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);// 签名
//在这也可以将 分享标题,分享描述,缩略图地址等一起返回
$config['appId'] = "AppID";
$config['timestamp'] = $timestamp;
$config['nonceStr'] = $nonceStr;
$config['signature'] = $signature;
$config['url'] = $url;
$this -> ajaxReturn($config);
}
在手机测试,开启debug后,如果签名成功直接提示OK,如果签名没有成功,逐步打印,查找错误位置。
1、AccessToken是否获取成功
2、AccessToken和jsapiTicket 是否能写入和读取
3、url是否转码和解码,这个地方非常重要。否则分享后的页面会签名失败
4、ajax返回的url与分享的link是否一致