微信开发——自定义分享、一键关注
  • 分类:微信
  • 发表:2017-03-14
  • 围观(396)
  • 评论()

本次以认证服务号介绍如何设置分享的自定义标题、 图片、描述以及分享的一键关注。

如果在微信中不设置自定义分享,那么当我们点击分享朋友圈、好友或者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&timestamp=$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 条评论

analytical essay conclusion steps to writing an argumentative essay writing a scholarship essay essay introduction outline speech writing services custom dissertation writing master thesis proposal law essay help uk dissertation writing help essay outline format essay proofreading service