微信h5实现分享给朋友url改变_h5 微信分享朋友和朋友圈
生成JS-SDK权限验证签名
实现发送给朋友和分享到朋友圈时内容参数自定义
一、微信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=1414587457
url=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
完整代码如下
class JSSDK {
private $appId;
private $appSecret;
public function __construct($appId, $appSecret) {
$this->appId = $appId;
$this->appSecret = $appSecret;
}
public function getSignPackage() {
$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 function getJsApiTicket() {
// 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 function getAccessToken() {
// 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. 获取签名包
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
3. 引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):
4.通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。
wx.config({
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));
}
});
三、实现效果
弹出请求获取页面
分享时的插件显示方倍工作室的 微信公众平台开发最佳实践
微信h5实现分享给朋友url改变_h5 微信分享朋友和朋友圈相关推荐
- 微信h5实现分享给朋友url改变_h5微信自定义分享
为了h5页面在微信分享效果更好,我们接入了 h5 微信sdk,下面对接入流程总结. 1.在项目中引用微信的js-sdk 2.在微信公众平台绑定安全域名 3.配置config 在1,2步操作成功后,进入 ...
- 微信h5实现分享给朋友url改变_h5网页 微信分享给好友,朋友圈-tp5
控制器 vendor('wechat.jssdk'); $jssdk =new JSSDK("appid", "appsecret"); $signPackag ...
- 堆米微信H5页面怎么制作?易企秀微信H5页面制作,微信简历制作,
现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广 ...
- 微信h5小游戏作品欣赏:详解微信h5如何制作
随着移动信息技术的发展,微信h5页面展示也有了新的创新,下面分享一款好玩的TOM游戏案例,一起来看看吧.H5有戏作为一种时下最受欢迎的推广方式,H5具有交互性好.易传播等优势. 制作h5页面流程:需求 ...
- h5页面怎么处理文件流_微信H5页面制作流程,大家有哪些经验分享?
完整的H5页面的制作流程为:策划案--原型图--文案拟定--视觉设计--动画设计--音效编辑--代码或工具实现--上线 这是一种比较理想的作业流程,一般到了一定规模的制作公司会采用这种方式.如果公司的 ...
- 微信公众号平台服务器配置请求url超时,绑定微信公众平台提示请求URL超时怎么办...
绑定微信公众平台提示"请求URL超时"解决办法,这个问题很多朋友遇到过,绑定微信公众平台提示请求URL超时解决办法其实很简单,下面由学习啦小编告诉你! 绑定微信公众平台提示请求UR ...
- 微信h5录音上传到自己的服务器,微信js-sdk 录音功能的示例代码
需求描述 制作一个H5页面,打开之后可以录音,并将录音文件提交至后台 微信录音最长时长为1min 代码如下 // isVoice: 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 ...
- 微信h5页面下载app以及判断是否在微信浏览器中
我是用vue写的项目 html: <div class="btns" @click="down"><h1>点击下载11</h1&g ...
- 前端怎么做接口签名验证 -baijiahao_微信H5介绍:Razor+Mvc+盛派微信接口
01 微信H5 介绍 介绍一个.NET Mvc下开发微信H5的案例,这个是2年前找了一个封装比较简洁友好的一个Demo,开发环境是Razor+mvc+盛派接口,当然前提是你首先要熟悉微信开放平台以及微 ...
最新文章
- 谷歌宣布即将开放 .dev 顶级域名注册
- 数据分析 python 用途-想做好数据分析,不用Python怎么行?
- pureMVC介绍及学习
- 浅谈商业银行绿色数据中心建设
- 理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
- Base64加密解密算法的C/C++代码实现
- android分享到指定应用,Android调用系统分享,指定某些应用来分享
- 农信计算机资料录入试题,农村信用社考试计算机测试题(一)
- React性能优化 PureComponent
- 提取多个字段_动态合并多个工作表,数据再多也不怕
- ie和谷歌在java中空格兼容,谷歌和IE浏览器的兼容性问题,相同的html结构竟然在两个浏览器不一样...
- Lua脚本实现检查外业核查地类图斑
- Java21天打卡day19-异常
- 【渝粤教育】国家开放大学2018年秋季 0221-22T数字电子电路 参考试题
- 另菜单或工具栏按钮失效的mfc处理方法
- 用小学的试题测试你,换个脑袋吧~~~
- 深入分析java线程池的理解
- ETL工具kettle实现数据同步
- 基于JSP的美食论坛系统毕业设计
- [渝粤教育] 西安交通大学 中国哲学经典著作导读 参考 资料
热门文章
- 计算机主板有记忆功能的,计算机记忆棒的作用
- “WinMgmt.exe产生了错误,将会被Windows关闭,需要重新启动程序”的错误提示解决方法...
- JavaScript 如何工作的: 事件循环和异步编程的崛起 + 5 个关于如何使用 async/await 编写更好的技巧...
- 跟我学习Spring Security--在线宠物商店开发(二)
- PSobj [4]裂痕
- LEADTOOLS医学影像本地部署环境设置以及部署教程
- ShareObject
- 【多线程】吐血整理Java多线程
- 数据分析实战——日化用品在门店的销售分析
- NVIDIA GPU Display Driver 越界写入漏洞(CVE-2022-28181)