一、绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
二、引入JS文件
http://res2.wx.qq.com/open/js/jweixin-1.6.0.js
三、通过config接口注入权限验证配置
把需要用到的JS-SDK的接口都放在jsApiList里面
四、示例代码
前端
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>微信分享</title>
<script type="text/javascript" src="/static/index/js/jquery.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
wx.config({
debug: false,
appId: '{$signPackage.appId}',
timestamp: {$signPackage.timestamp},
nonceStr: '{$signPackage.nonceStr}',
signature: '{$signPackage.signature}',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'updateAppMessageShareData', 'updateTimelineShareData'
]
});
// 在这里调用 API
wx.ready(function () {
// 分享朋友及qq
wx.updateAppMessageShareData({
title: '测试分享标题', // 分享标题
desc: '分享描述', // 分享描述
link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享图标
success: function () {
// 设置成功
console.log('设置成功');
//alert('分享朋友或QQ成功');
},
});
// 分享朋友圈及QQ空间
wx.updateTimelineShareData({
title: '测试分享标题', // 分享标题
link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享图标
success: function () {
// 设置成功
//alert('分享朋友圈及QQ空间成功');
}
})
})
</script>
</body>
</html>后端
<?php
namespace app\index\controller;
use think\Controller;
use app\index\controller\Wechat;
/**
* 微信功能开发
*/
class Wxopera extends Wechat
{
/**
* 微信分享
*/
public function share(){
$signPackage = json_decode($this->getSignPackage(),true);
$this->assign('signPackage',$signPackage);
return $this->fetch();
}
/**
* 生成签名
*/
public function getSignPackage()
{
// 实例化微信操作类
$wx = new Wechat();
// 获取 ticket
$jsapiTicket = $wx->getJsApiTicket();
// 注意 URL 一定要动态获取，不能 hardcode.
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
// 当前页面的url
$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$timestamp = time(); //生成签名的时间戳
$nonceStr = $this->createNonceStr(); //生成前面的随机串
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
// 对string进行sha1加密
$signature = sha1($string);
$signPackage = array(
"appId" => $wx->APPID,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"signature" => $signature
);
return json_encode($signPackage);
}
/**
* 生成签名的随机串
*/
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;
}
}注意：Wechat类是我自己封装的，比如获取access_token,ticket,curl请求这些，代码可以看上一篇文字 微信开发之生成二维码，扫码关注公众号PHP
思路说明：
1.公众号配置：JS安全域名、IP白名单
2.获取AccessToken，需要判断过期时间
3.获取JsApiTicket，拿获取到的AccessToken换取JsApiTicket，需要判断过期时间
4.生成签名，需要jsapiTicket+随机字符串+时间戳+当前URL 组合并sha1加密
5.组合微信JSAPI需要的参数：appId、随机字符串、时间戳、签名
——现在的努力，只为小时候吹过的牛逼！ ——