本次以认证服务号介绍如何设置分享的自定义标题、 图片、描述以及分享的一键关注。
如果在微信中不设置自定义分享，那么当我们点击分享朋友圈、好友或者QQ好友、空间时，默认的标题就是<title>标签中的信息，而显示的描述信息就是链接，图片多是默认为页面中显示的第一张图片，这样分享出去的链接，偶尔看起来不太舒服，我们可以根据自己的需求设置我们想要的标题，描述，图片以及链接地址，甚至可以在分享链接以后，让用户直接关注我们的公众号。
1、前期准备
1.1 设置域名（接口权限—网页授权—JS接口安全域名）
1.2 JS文件
在需要分享的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
1.3 appid和secret
appid 和appsecret 是我们公众号的appid 和appsecret ，在微信公众号 -> 基本配置中可以查到
1.4 JSSDK文件
这里JSSDK我没有找到线上地址，暂时先把JSSDK.php文件的代码放上去，有需要的可以直接复制，也可以在网上直接下载，此文件只需修改appid和appsecret即可。
JSSDK.php
<?php
namespace Weather\Logic\Shop;
use Config;
class JSSDK {
private $appId;
private $appSecret;
public function __construct() {
$this->appId = Config::get(‘other.weixin_appid’);
$this->appSecret = Config::get(‘other.weixin_secret’);
}
public function getSignPackage() {
$jsapiTicket = $this->getJsApiTicket();
$url = “http://”.$_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;
}
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;
}
private function getJsApiTicket() {
// jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
$data = json_decode(file_get_contents(“jsapi_ticket.json”));
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;
$fp = fopen(“jsapi_ticket.json”, “w”);
fwrite($fp, json_encode($data));
fclose($fp);
}
} else {
$ticket = $data->jsapi_ticket;
}
return $ticket;
}
private function getAccessToken() {
// access_token 应该全局存储与更新，以下代码以写入到文件中做示例
$data = json_decode(file_get_contents(“access_token.json”));
if ($data->expire_time < time()) {
$url = “https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->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;
$fp = fopen(“access_token.json”, “w”);
fwrite($fp, json_encode($data));
fclose($fp);
}
} else {
$access_token = $data->access_token;
}
return $access_token;
}
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_e x e c($curl);
curl_close($curl);
return $res;
}
}
?>
2、自定义分享信息
以下2.1中是从服务端获取签名等信息，并将信息返回页面，2.2-2.9都是在需要分享的页面中设置JS。
2.1 获取签名等信息
服务端调用JSSDK文件中getSignPackage方法，并将获取到的签名，时间戳等信息返回到需要分享的页面（JSSDK中appId和appSecret在1.3中已提到）。
2.2 在需要分享的页面引入如下JS文件，（1.2中JS文件）
2.3 页面的JS中通过config接口注入权限验证配置
以下各个参数的值就是1.3中返回的值，其中jsApiList代表分享的列表，如设置分享到朋友圈 onMenuShareTimeline ，朋友onMenuShareAppMessage，QQ onMenuShareQQ ，QQ空间onMenuShareQZone ，分享到腾讯微博 onMenuShareWeibo ，以数组形式传入参数
wx.config({
debug: true, 开启调试模式,可用alert输出调试信息，调试完成以后，将debug改为false。
appId: ”, 公众号的唯一标识
timestamp: , 生成签名的时间戳
nonceStr: ”, 生成签名的随机串
signature: ”, 签名
jsApiList: [‘onMenuShareTimeline”,’onMenuShareAppMessage’] 需要使用的JS接口列表
});
2.4 开启调试模式的情况下，可通过error和success接口来进行调试
wx.error(function(res){
alert(res)
});
wx.success(function(res){
alert(res)
});
2.5 分享到朋友圈
wx.onMenuShareTimeline({
title: ”, // 分享标题
link: ”, // 分享链接
imgUrl: ”, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
2.6 分享给朋友
wx.onMenuShareAppMessage({
title: ”, // 分享标题
desc: ”, // 分享描述
link: ”, // 分享链接
imgUrl: ”, // 分享图标
type: ”, // 分享类型,music、video或link，不填默认为link
dataUrl: ”, // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
2.7 分享到QQ
wx.onMenuShareQQ({
title: ”, // 分享标题
desc: ”, // 分享描述
link: ”, // 分享链接
imgUrl: ”, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
2.8 分享到腾讯微博
wx.onMenuShareWeibo({
title: ”, // 分享标题
desc: ”, // 分享描述
link: ”, // 分享链接
imgUrl: ”, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
2.9 分享到QQ空间
wx.onMenuShareQZone({
title: ”, // 分享标题
desc: ”, // 分享描述
link: ”, // 分享链接
imgUrl: ”, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
注意：2.3到2.9都需要放在JS文件中，其中2.5到2.9中分享的设置需要放在ready中，标题，描述，图片，点击分享打开的链接地址都可以根据需求自己定义，如果不需要回调，可将success和cancel拿掉，调试成功以后将2.3中的debug关掉。
<script>
wx.config({
………..
});
wx.error(function(res){
………..
});
wx.success(function(res){
………..
});
wx.ready(function () {
………..
………..
………..
………..
});
</script>
3、分享后一键关注公众号
一键关注，主要是分享出去一个公众号，只不过分享出去的内容可以自定义标题，描述，图片，链接是固定的，未关注的用户点击时，提示关注，已关注的用户点击时提示进入公众号，此功能是基于上例2分享的基础上来做修改，此分享只限微信中使用，分享到QQ，QQ空间及微博会提示到微信客户端打开。
3.1 每个公众号都会有一个这个biz码，可从历史消息中获取
在微信端随便打开一个公众号，点击右上角人头图标
点击查看历史消息
点击复制链接
将复制的链接放到txt文档中，取出_biz的值。
3.2 基于上例2分享的基础上修改链接地址，其它不变
将上面2中提到的分享中的link地址改为如下，并将红色部分替换为3.1中取到的_biz的值即可。
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=**********&scene=172#wechat_redirect
下图为分享出去的链接，点击出现的页面
共有 0 条评论