本次以认证服务号介绍如何设置分享的自定义标题、 图片、描述以及分享的一键关注。
如果在微信中不设置自定义分享,那么当我们点击分享朋友圈、好友或者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 条评论