自从上次换工作之后就开始做微信开发,在没有接触之前觉得微信开发是一件比较难得事情,实际开始做之后,感觉也还好的。
这次要写的是关于微信分享的一个笔记
在微信中,分享的时候需要自定义的话就需要引入JSSDK,然后按照他的参数去签名,然后返回
SDK地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
正常的做法肯定是按照文档返回数据,其实就是在请求网页的时候就去分享了。
后端代码:
public function nightCarwash()
{
$this->userinfo = checkUserInfo1();
vendor('Wxpay.jssdk');
$jssdk = new \JSSDK("wx********78", "fc1***********ae");
$this->signPackage = $jssdk->getSignPackage();
$this->display();
}
前端代码:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
window.onload = function () {
wx.config({
debug: false,
appId: "wx***********e78",
timestamp: "{$signPackage['timestamp']}",
nonceStr: "{$signPackage['nonceStr']}",
signature: "{$signPackage['signature']}",
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline'
]
});
wx.ready(function () {
wx.onMenuShareTimeline({
title: '', // 分享标题
link: "",// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
}
这是按照文档的写法写的,在写的时候我就想过是否可以整合一个分享的接口专门来请求数据呢?这样一来,就不需要在页面的地方去引入类库,然后去签名,简化了分享操作的页面和功能
于是就开始了整合代码
<?php
namespace Home\Controller;
use Think\Controller;
class ApiController extends Controller
{
public function shareConfig()
{
$postdata = I('post.');
vendor('Wxpay.jssdk');
$wxconfig = C("WX_CONFIG");
$jssdk = new \JSSDK($wxconfig['APPID'], $wxconfig['APPSECRET']);
$sharedata = array();
if("givecoupon"==$postdata['type']){
$signPackage = $jssdk->getSignPackage($_POST['url']);
$sharedata['title'] = "";
$sharedata['desc'] = "";
$sharedata['link'] = $_POST['url'];
$sharedata['imgUrl'] = "";
}
if(!empty($signPackage)){
$this->ajaxReturn(array("code"=>0,"wxdata"=>$signPackage,"sharedata"=>$sharedata));
}
}
}
在页面部分修改为
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var url = location.href.split('#')[0];
$.post("{:U('Home/Api/shareConfig')}",{"type":"givecoupon","url":url},function (data) {
console.log(data);
if(data.code == 0){
wx.config({
debug: false,
appId: data.wxdata.appId,
timestamp: data.wxdata.timestamp,
nonceStr: data.wxdata.nonceStr,
signature: data.wxdata.signature,
jsApiList: [
'onMenuShareTimeline', //分享分享到朋友圈
'onMenuShareAppMessage', //分享给朋友
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.ready(function () {
wx.onMenuShareTimeline({
title: data.sharedata.title,
link: data.sharedata.link,
imgUrl: data.sharedata.imgUrl,
success: function () {
// 分享完成
}
});
});
});
<script>
整合微信分享的步骤就到这里,需要注意的一点就是 URL最好不要用 I() 来接受值,否则 & 会被转移,导致 签名错误
代码尚有不足,请大神指教。
更新
忘了带上修改的微信自带框架的位置了。
源代码和修改的笔记
public function getSignPackage() {
// 1.修改后传递需要分享的页面的当前地址
// public function getSignPackage($url = "") {
$jsapiTicket = $this->getJsApiTicket();
// 注意 URL 一定要动态获取,不能 hardcode.
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
// 2. 默认是获取当前地址来进行分享的,所以这里不需要传递URL,但是我修改之后是封装的API来分享,所以这里带上URL参数
$url = $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";
$signature = sha1($string);
$signPackage = array(
"appId" => $this->appId,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string
);
return $signPackage;
}