微信分享朋友圈功能开发流程详解

最近做了一个微信分享朋友圈的功能记录一下流程：

第一：设置微信公众账号

登陆微信公众平台，在微信平台设置里面添加js安全接口

按照上面的说明需要下载验证文件到指定的域名根目录或者指定的文件夹下

第二：设置ip白名单

设置---公众号设置---IP白名单里设置，多个ip用回车间隔。

第三：获取保存appId和appSecret，后面会用到！

第四：开始进行开发阶段

=========================================================================

用到的几个网址：

微信公众平台文档说明：概述 | 微信开放文档

access_token调试接口【本地电脑和服务器配置域名不同】：https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=基础支持&form=获取access_token接口%20/token

jsapi_ticket签名验证接口：微信 JS 接口签名校验工具

===================================================================

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）：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
用第一步拿到的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权限验证的签名了。

DEMO页面： http://demo.open.weixin.qq.com/jssdk

微信公众平台官方示例代码：

http://demo.open.weixin.qq.com/jssdk/sample.zip

备注：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制

============================================

具体后端代码：jssdk.php

<?php
$url = $_GET['url'];
class JSSDK {private $appId;private $appSecret;private $url;public function __construct($appId, $appSecret,$url) {$this->appId = $appId;$this->appSecret = $appSecret;$this->url = $url;}public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";// $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$url =$this->url;$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 获取 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;}
}$jssdk = new JSSDK("wxbaee6c3d", "4e5ae4590946d9",$url);//按照自己的公众号填写
$signPackage = $jssdk->GetSignPackage();
$tmp=json_encode(array ('appId'=>$signPackage["appId"],'timestamp'=>$signPackage["timestamp"],'nonceStr'=>$signPackage["nonceStr"],'signature'=>$signPackage["signature"],'url'=>$signPackage["url"]));//数组转换成json格式
$callback = $_GET['callback'];
echo $callback.'('.$tmp.')';
exit;
?>

微信二次分享缩略图和链接失效，二次分享的时候url后会拼接?from=singlemessage&isappinstalled=0

注意过滤不必要的参数，重新拼接url

前端代码段：

注意jq的引入

//解决二次分享的问题
function getQueryString(name) {//根据字段看网址是否拼接&字符串
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}

//微信二次分享添加的参数
var from = getQueryString('from');
var appinstall = getQueryString('appinstall');
var sec = getQueryString('sec');
var timekey = getQueryString('timekey');
// 过滤微信二次分享添加的参数
if(from || appinstall || sec || timekey){//假如拼接上了
window.location.href = url.split("?")[0];
}
var img;
var content;

img='分享图片地址';
//console.log(img);

content='分享简介内容';

//分享简介内容html过滤
content=content.replace(/\n/g, "");
content=content.replace(/<(?!img).*?>/g, "");
content=content.replace(/&(.*);/g, "");
//console.log(content);

//获取当前页分享链接
url=location.href;

//ajax调用

$.ajax({
type : "get",
url : "*********/jssdk.php?url="+url,//替换网址
dataType : "jsonp", ///JSONP跨域实现
jsonp: "callback",
jsonpCallback:"success_jsonpCallback",
success : function(data){
//console.log(data);

wx.config({
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
"onMenuShareTimeline", //分享给好友
"onMenuShareAppMessage", //分享到朋友圈
"onMenuShareQQ", //分享到QQ
"onMenuShareWeibo" //分享到微博
]
});
},
error:function(data){
// alert("连接失败！");
}
});
wx.ready(function (){

//定义分享数据
var shareData = {
title: '分享标题',
desc:content,//这里请特别注意是要去除html111
link:url,
imgUrl:img
};
wx.updateAppMessageShareData(shareData);
wx.updateTimelineShareData(shareData);
wx.onMenuShareAppMessage(shareData); //即将废弃
wx.onMenuShareTimeline(shareData); //即将废弃
wx.onMenuShareQQ(shareData); //即将废弃
wx.onMenuShareWeibo(shareData); //即将废弃
});
</script>

微信分享朋友圈功能开发流程详解相关推荐

【联机对战】微信小程序联机游戏开发流程详解
现有一个微信小程序叫中国象棋项目,棋盘类的单机游戏看着有缺少了什么,现在给补上了,加个联机对战的功能,增加了可玩性,对新手来说,实现联机游戏还是有难度的,那要怎么实现的呢,接下来给大家讲一下. 考虑到 ...
php微信公众号怎么开发_PHP对接微信公众平台消息接口开发流程详解及实例
这篇文章主要介绍了PHP对接微信公众平台消息接口开发流程,如何使用PHP版接口操作公众平台消息,需要的朋友可以参考下一.写好接口程序在你的服务器上上传好一个接口程序文件内容如下: 代码如下:< ...
Android挂逼修练之行--微信设置朋友圈封面视频插件开发详解
一.背景介绍最近在刷抖音的时候看见别人发了一个可以把微信朋友圈封面图设置成视频的功能,比较好奇就自己研究了一下,最开始的时候第一灵感就是是不是微信设置封面图的接口有后门,就是微信为了后续功能扩展,服 ...
智能座舱架构与功能开发流程详解
作者 | Jessie 出品 | 焉知智能汽车座舱发展主要经历了四个阶段:包括电子座舱阶段.智能助理阶段.人机共驾阶段.第三生活空间.当前随着智能汽车在AI算法.智能驾驶上的不断发展进入了L3级自动 ...
小程序：微信小程序完成分享好友及自定义分享朋友圈功能（完整版）
前言以下代码使用了: vant-ui库: 主要完成了: 上拉框显示分享朋友圈按钮,点击分享朋友圈后,弹框展示图片,点击图片保存到本地: 上拉框显示分享好友按钮,分享当前页的小程序给好友: 微信小程序 ...
杂志订阅管理系统c++_电池管理系统BMS功能安全开发流程详解
点击上面 "电动知家"可以订阅哦! BMS功能安全开发流程详解 BMS和ISO26262 - BMS & ISO26262简介 BMS即Battery Management ...
java 记录微信转发次数_微信分享朋友圈记录分享次数统计实现
业余时间研究微信的接口方法.记录下微信分享朋友圈记录分享次数统计实现:1.引入JS文件 2.通过config接口注入权限验证配置 3.通过ready接口处理成功验证 4.通过error接口处理失败验证 ...
在微信中朋友圈功能对于微信的价值是什么？
在微信中朋友圈功能对于微信的价值是什么? 微信的定位就是一款社交产品,包含三大模块:聊天.朋友圈.公众号 1.对于社交来说,朋友圈是一种高效快捷的社交方式了解朋友动态点赞评论简单的互动形式,还能表 ...
php 微信分享功能_使用php怎么实现一个微信分享朋友链接功能
使用php怎么实现一个微信分享朋友链接功能发布时间:2021-02-15 09:11:24 来源:亿速云阅读:68 作者:Leah 这篇文章给大家介绍使用php怎么实现一个微信分享朋友链接功能,内 ...
java微信分享朋友圈_java怎么实现微信分享到朋友圈功能
展开全部申请应用 AppKey 申请方法:访问友推网站后台,登录后进入应用列表,添加需要集成友推组件的 App,如下636f7079323131333532363134313032313635333 ...

微信分享朋友圈功能开发流程详解

微信分享朋友圈功能开发流程详解相关推荐

最新文章

热门文章