微信发ascii_微信公众平台开发(107) 分享到朋友圈和发送给好友
关键字:微信公众平台 JSSDK 发送给朋友 分享到朋友圈 onMenuShareTimeline onMenuShareAppMessage
作者:方倍工作室
原文:http://www.cnblogs.com/txw1958/p/weixin-js-sharetimeline.html
在这篇微信公众平台开发教程中,我们将介绍如何在网页中实现发送给朋友和分享到朋友圈时内容参数自定义的功能。
本文分为以下二个部分:
生成JS-SDK权限验证签名
实现发送给朋友和分享到朋友圈时内容参数自定义
《微信公众平台开发最佳实践》一书中10.5节“发送给朋友与分享到朋友圈”因微信接口变更已经失效,以使用新接口的本教程为准!
一、微信JS-SDK
1. 获得Access Token
access token的获得方法在前面有介绍,详情见 微信公众平台开发(26) ACCESS TOKEN
2. 获取jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket),接口地址如下
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON:
{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200}
获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
3. 签名算法实现
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
即signature=sha1(string1)。 示例:
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457url=http://mp.weixin.qq.com?params=value
步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步骤2. 对string1进行sha1签名,得到signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
完整代码如下
<?phpclassJSSDK {private $appId;private $appSecret;public function __construct($appId, $appSecret) {$this->appId = $appId;$this->appSecret = $appSecret;
}public functiongetSignPackage() {$jsapiTicket = $this->getJsApiTicket();//注意 URL 一定要动态获取,不能 hardcode.
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";$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;
}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 functiongetJsApiTicket() {//jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode(file_get_contents("jsapi_ticket.json"));if ($data->expire_time < time()) {$accessToken = $this->getAccessToken();//如果是企业号用以下 URL 获取 ticket
// $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
$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 functiongetAccessToken() {//access_token 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode(file_get_contents("access_token.json"));if ($data->expire_time < time()) {//如果是企业号用以下URL获取access_token
// $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
$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_exec($curl);
curl_close($curl);return $res;
}
}
二、发送给朋友和分享到朋友圈参数自定义
1. 绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2. 获取签名包
<?phprequire_once "jssdk.php";$jssdk = new JSSDK("yourAppID", "yourAppSecret");$signPackage = $jssdk->GetSignPackage();?>
3. 引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):
4.通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。
debug:false,
appId:'<?php echo $signPackage["appId"];?>',
timestamp:<?php echo $signPackage["timestamp"];?>,
nonceStr:'<?php echo $signPackage["nonceStr"];?>',
signature:'<?php echo $signPackage["signature"];?>',
jsApiList: [//所有要调用的 API 都要加到这个列表中
'checkJsApi','openLocation','getLocation','onMenuShareTimeline','onMenuShareAppMessage']
});
5. 通过ready接口处理成功验证
地理位置需要在页面加载时就调用,需要把相关接口放在ready函数中调用来确保正确执行
wx.ready(function() {
});
5.1 通过checkJsApi判断当前客户端版本是否支持分享参数自定义
wx.checkJsApi({
jsApiList: ['getLocation','onMenuShareTimeline','onMenuShareAppMessage'],
success:function(res) {
alert(JSON.stringify(res));
}
});
5.2 使用数组定义分享内容参数
$news = array("Title" =>"微信公众平台开发实践", "Description"=>"本书共分10章,案例程序采用广泛流行的PHP、MySQL、XML、CSS、JavaScript、HTML5等程序语言及数据库实现。", "PicUrl" =>'https://images0.cnblogs.com/i/340216/201404/301756448922305.jpg', "Url" =>'http://www.cnblogs.com/txw1958/p/weixin-development-best-practice.html');
5.3. 实现JS分享功能
wx.onMenuShareAppMessage({
title:'<?php echo $news['Title'];?>',
desc:'<?php echo $news['Description'];?>',
link:'<?php echo $news['Url'];?>',
imgUrl:'<?php echo $news['PicUrl'];?>',
trigger:function(res) {//不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
//alert('用户点击发送给朋友');
},
success:function(res) {//alert('已分享');
},
cancel:function(res) {//alert('已取消');
},
fail:function(res) {//alert(JSON.stringify(res));
}
});
wx.onMenuShareTimeline({
title:'<?php echo $news['Title'];?>',
link:'<?php echo $news['Url'];?>',
imgUrl:'<?php echo $news['PicUrl'];?>',
trigger:function(res) {//不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
//alert('用户点击分享到朋友圈');
},
success:function(res) {//alert('已分享');
},
cancel:function(res) {//alert('已取消');
},
fail:function(res) {//alert(JSON.stringify(res));
}
});
三、实现效果
弹出请求获取页面
分享时的插件显示方倍工作室的 微信公众平台开发最佳实践
四、获取源码
本节最新的教程说明及源码已同步在《微信公众平台开发最佳实践(第3版)》一书中发布,欢迎购买。
微信发ascii_微信公众平台开发(107) 分享到朋友圈和发送给好友相关推荐
- android朋友圈分享标题和内容,微信分享到朋友圈和发送给好友,包含标题、描述、图片等...
一.微信浏览器 通过在电脑上打开微信的网页,我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈和发送 ...
- 微信分享到朋友圈、发送给朋友开发注意事项
1.invalid url domain 当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名,见 ...
- 小程序分享到朋友圈功能_小程序开发日记 分享到朋友圈
贵州 水司楼 图片来自 视频截图 最近微信小程序开始公测小程序分享到朋友圈的功能了.记得前两天刚开始内测时,小程序社区里就不断有人发帖问关于分享到朋友圈的各种问题.很显然大家对这个新特性都特别关心.那 ...
- 微信发的图片怎么样在服务器中删除了,朋友圈的图片怎么删除掉
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以微信为例,朋友圈删除图片的具体步骤是: 1.打开微信软件,在"我"页面点击"相册"选项. ...
- 微信公众平台开发问答 【转发】
微信公众平台开发问答 微信公众平台开发问答是一个微信知识问答区,专注于提供微信应用及开发技术知识的整理.归类和检索. 主题:新手常见问题 问:我是新手,没有开发基础,应该如何学习微信公众平台的开发? ...
- html5网页分享到朋友圈,微信公众平台网页开发实战--1.微信分享一个网页到朋友圈...
对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3 3.2节文件结构 另外,提醒读者一下,wxJSSDK.j ...
- 微信公众平台开发入门教程[2019版]
关键字:微信公众平台开发 作者:方倍工作室 在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/JS等基础. 我们将使用微信公 ...
- 微信公众平台开发入门教程[2020版]
在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/JS等基础. 我们将使用微信公众账号方倍工作室作为讲解的例子,二维码见左侧 ...
- uniapp 分享缩略图过大怎么办_新版本微信下,如何设置分享到朋友圈的缩略图?...
做微信H5的朋友都知道,在过去要设置"分享到朋友圈"的缩略图,是非常简单的一件事情,只需要制作一张300*300的缩略图片(如命名为300.jpg),然后在页面head部分的开头引 ...
最新文章
- B 站 Up 主自制秃头生成器,独秃头不如众秃头?
- Bootstrap日期插件之Datetimepicker修改默认语言(附带源码)
- C语言再学习 -- grep 命令(转)
- element ui登录界面_Vue和Element-UI做一个简单的登录页面
- 编码之道:取个好名字很重要(转)
- jboss7.1.1 部署_在JBoss AS 7上部署BroadleafCommerce 2.0
- 《Web前端开发修炼之道》-读书笔记CSS部分
- luoguP2701 [USACO5.3]巨大的牛棚Big Barn(极大子矩阵)
- java 鸡尾酒排序_Java实现几种常见排序方法
- RT-Thread 简介 https://www.rt-thread.org/
- 二叉树的遍历实验报告C语言,数据结构-二叉树的遍历(类C语言描写叙述)
- Power BI DAX 之日期函数
- 带你了解常见的编码表,以及他们自己的关系.
- 计算机报名照片在线修图,网上报名照片处理工具
- python爬虫实例(爬取航班信息)
- vue h5微信公众号网页(总结)
- 计算机配置的详细信息,如何查看电脑的配置参数,看电脑详细配置的方法
- GNSS数据下载脚本(Perl+Python)
- 相关系数-excel-CORREL()
- 移动互联网多元化,别把SEO当技术