1、微信JS-SDK是什么?
1)其是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
2)通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

 

2、使用:
1、在微信公众号绑定域名
2、引入js文件
3、通过config接口注入权限验证配置
4、通过ready接口处理验证成功
5、通过error接口处理失败验证

 

3、实例:实现摇一摇、以及分享功能

1)绑定域名:公众号设置->功能设置->JS接口安全域名

2、引入js文件

  • 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
  • 或者<script src='weixin.js'></script>

 

3、引入配置和相关函数文件

<script src='wx.js'></script>

wx.js文件内容如下:
//通过赋值的方式实现自动调用
var weixin = {
//?
config:function(){
//将地址栏地址从#符号拆分
var url = window.location.href.split('#')[0];
//用get方式,向指定网站发送信息,并指定回调函数
$.get('jssdk.php',{
"url":url
},function(s){
//eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
var s = eval("("+s+")");
//配置参数
wx.config({
debug:false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,如要查看输入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId:s.appId,//必填,公众号的唯一标志
timestamp:s.timestamp,//必填,生成签名的时间戳
noceStr:s.noceStr,//必填,生成签名的随机串
signature:s.signature,//必填,签名,见附录1
jsApiList:['onMenuShareTimeline','onMenuShareAppMessage','chooseImage','uploadImage','downloadImage']//必填,需要使用的JS接口列表,所有接口列表见附录2
});
})
},
share:function(desc){
var data = {
title:"我的名字你记住了吗?",//分享标题
link:"链接",//分享链接
imgUrl:"图片",//分享图标
desc:desc?desc:'快速拼出我的名字,赢取红包。',//分享描述
success:function(){
TDAPP.onEvent('分享成功');
},
cancel:function(){
TDAPP.onEvent('分享放弃');
}
};
//分享到朋友圈
wx.onMenuShareTimeline({
title:data.title,
link:data.link,
imgUrl:data.imageUrl,
success:data.success,
cancel:data.cencel
});
//分享给朋友
wx.onMenuShareAppMessage({
title:data.title,
desc:data.desc,
link:data.link,
imgUrl:data.imgUrl,
type:'', //分享类型,music、video或link,不填默认为link
dataUrl:'',//如果type是music或者video,则要提供数据链接,默认为空
success:data.success,
cancel:data.cansel
});
}
}
//怎么理解?
$(window).load(function){
weixin.config();
wx.ready(function(){
weixin.share();
});
}

 

4、jssdk.php文件内容如下

//设置公众号id和secret
define('APPID','');
define("SECRET",'');

//获取url参数
$url = $_GET['url'];
//调用自定义函数sendJson,返回appid、timestamp、nonceStr、signature等信息
echo sendJson($url);

function sendJson($url){
//调用自定义函数getTicket,获取微信卡券api_ticket
$ticketTokenApi = getTicket();
$timestamp = time();
//调用自定义函数createNonceStr,获取16位的随机字符串
$nonceStr = createNonceStr();
//微信规范,哈希算法加密
$string = "jsapi_ticket=$ticketTokenApi&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
$signature = sha1($string);
//封装数组,并返回此数组
$data = array(
"appId" => APPID,
"timestamp" => $timestamp,
"nonceStr" => $nonceStr,
"signature" => $signature
);
return json_encode($data);

}

function getTicket(){
//获取ticket.json文件内容,并解析成对象
$data = json_decode(file_get_contents('ticket.json'));
//判断卡券getticket是否过期
if($data->time < time()){
//调用自定义函数getAccess,获取access_token
$accessToken = getAccess();
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
//调用自定义函数getHttp,获取卡券getticket
$res = json_decode(getHttp($url));
$ticket = $res->ticket;
if($ticket){
$data->ticket = $ticket;
$data->time = time()+7000;
//chmod('ticket.json',0755);//在linux环境下给ticket.json文件授权
//将api_ticket及有效期写入ticket.json文件中
$fp = fopen("ticket.json","w");
fwrite($fp,json_encode($data));
fclose($fp);
}
}else{
//api_ticket未过期,仍可使用
$ticket = $data->ticket;
}
return $ticket;
}

function getAccess(){
//获取access.json文件内容,并解析成对象
$data = json_decode(file_get_contents("access.json"));
//判断access_token是否过期
if($data->time < time()){
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".APPID."&secret=".SECRET;
//调用自定义函数getHttp,获取含access_token属性的对象
$res = json_decode(getHttp($url));
$access = $res->access_token;
if($access){
$data->access = $access;
$data->time = time()+7000;
//chmod('access.json',0755);//在linux环境下给access.json文件授权
//将access_token及有效期写入access.json文件中
$fp = fopen("access.json","w");
fwrite($fp,json_encode($data));
fclose($fp);
}
}else{
//access_token未过期,仍可使用
$access = $data->access;
}
return $access;
}

function getHttp($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;
}

function createNonceStr($length = 16){
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
//生成16位的字符串,substr:返回字符串的子串、mt_rand:生成更好的随机数
for($i = 0 ; $i < $length ; $i++){
$str .= substr($chars,mt_rand(0,strlen($chars) - 1), 1);
}
return $str;
}

欢迎留言