微信朋友圈分享页面（JS-SDK 1.0）
微信更新sdk后大量分享朋友圈代码失效，标题 缩略图 描述无法自定义
新版SDK分享文章步骤
1.绑定域名 （方法参考 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html ）
2.服务端
需要生成签名供分享页面的js接口使用
用到 noncestr，jsapi_ticket，timestamp，url(分享页面的url) 四个参数
jsapi_ticket参数又要用到accesstoken -> 获取accesstoken又要用到appid和secret（这两个在微信公众号后台可以找到）
accesstoken 和 jsapi_ticket通过http请求微信接口获取，这两个接口都有请求数限制，因此需要本地存储，过期以后再从接口获取，这两个接口参考文档
accesstoken : http://mp.weixin.qq.com/wiki/15/54ce45d8d30b6bf6758f68d2e95bc627.html
jsapi_ticket : http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 附录1-JS-SDK使用权限签名算法
获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。
生成签名示例代码
public ActionResult Config(string url) {
try
{
var token = getToken();
var ticket = getTicket(token);
long time = (DateTime.UtcNow.Ticks - new DateTime(, , ).Ticks) / ;
var nonceStr = getnonceStr();
var dict = new Dictionary<string, string>() {
{"jsapi_ticket",ticket.Ticket},
{"noncestr",nonceStr},
{"timestamp",time.ToString()},
{"url",HttpUtility.UrlDecode(url)}
};
var str = dict.OrderBy(a => a.Key)
.Select(a => string.Format("{0}={1}", a.Key, a.Value))
.Aggregate((a, b) => a + "&" + b);
var sign = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "SHA1").ToLower();
return Json(new
{
timestamp = time,
nonceStr = nonceStr,
signature = sign,
}, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return Content(ex.Message);
}
}
3.客户端
引用微信js-sdk文件
http://res.wx.qq.com/open/js/jweixin-1.0.0.js
调用wx.config注入上面服务端生成的签名验证信息，绑定监听分享朋友圈事件
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body ontouchstart="">
<script src="/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function wxshare(){
var settings = {
debug:false,
appId:"微信公众号的APPID",
title: window.document.title,
desc: window.location.host,
link: window.location.href,
imgUrl: '',
timestamp:"",
nonceStr:"",
signature:""
} this.share = function(options){
if(options){
$.extend(settings, options);
} if(!settings.signature){
$.ajax({
type:"GET",
url:"http://服务端生成签名数据API",
data:{
url:encodeURIComponent(window.location.href)
},
success:function(data){
$.extend(settings, data);
config();
listen();
}
});
}else{
config();
listen();
}
} function config(){
wx.config({
debug: settings.debug, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端 打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: settings.appId, // 必填，公众号的唯一标识
timestamp: settings.timestamp, // 必填，生成签名的时间戳
nonceStr: settings.nonceStr, // 必填，生成签名的随机串
signature: settings.signature,// 必填，签名，见附录1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
} function listen(){
wx.ready(function () {
wx.onMenuShareAppMessage({
title: settings.title,
desc: settings.desc,
link: settings.link,
imgUrl: settings.imgUrl,
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
}
}); wx.onMenuShareTimeline({
title: settings.title,
desc: settings.desc,
link: settings.link,
imgUrl: settings.imgUrl,
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
}
}); wx.onMenuShareQQ({
title: settings.title,
desc: settings.desc,
link: settings.link,
imgUrl: settings.imgUrl,
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
}
}); wx.onMenuShareWeibo({
title: settings.title,
desc: settings.desc,
link: settings.link,
imgUrl: settings.imgUrl,
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
}
});
});
}
} $(function(){
new wxshare().share({
title:'mytitle',
desc:'mydesc',
link:window.location.href,
imgUrl:'xxx'
});
})
</script>
</html>
微信朋友圈分享页面（JS-SDK 1.0）的更多相关文章
- 纯Java实现微信朋友圈分享图
纯Java实现微信朋友圈分享图 1.实现分享图的效果 2.开发环境 2.1 JDK * oracle's jdk 1.8以上 2.2 字体 * 若选择了微软雅黑字体又是代码部署到Linux,则需要安装 ...
- ionic 实现微信朋友圈分享的完整开发流程
最近开始要着手负责开发ionic的项目了,一直很好奇想实现一个微信朋友圈分享的功能,所以我就网上找了找文章来练手实现,果不其然,找到了几篇,但是发现它们的流程都不太详细,清楚,直接,还有不少坑. 今天 ...
- apiCloud 三方分享，微信好友分享，微信朋友圈分享，QQ分享，微博分享
首先查看我的这篇有关三方登录的博客,地址是http://www.cnblogs.com/gqx-html/p/8303567.html,配置完三方数据后可以从上一篇文章中的链接跳转到各个登录查看api ...
- 微信分享缩略图，如何增加微信朋友圈分享链接的小图片? facebook、google+、twitter等分享的标签
微信分享缩略图 如何增加微信朋友圈分享链接的小图片?在网页的头部<head>标签内加上以下代码,图片路径自行修改.<head><div id='wx_pic' style ...
- 实现手机网页调起原生微信朋友圈分享的工具nativeShare.js
http://www.liaoxiansheng.cn/?p=294 我们知道现在我们无法直接通过js直接跳转到微信和QQ等软件进行分享,但是现在像UC浏览器和QQ浏览器这样的主流浏览器自带一个分享工 ...
- 微信朋友圈分享js代码最新2015年无错版
最近微信对分享做了进一步规范,导致很多分享都不起作用了,今天跟大家分享,2015年最新修无错的! 以下是主要微信分享页面代码:(其中红色部分主要懒友自己填写自己哈.) <?php require ...
- JN_0001：在微信朋友圈分享时长大于10s的视频
1,先在聊天窗口里发送视频. 2,长按视频点击”收藏“. 3,进入微信收藏管理页面,播放视频. 4,点击右上角三点按钮,选择“转存为笔记”. 5,于是在收藏页面中会生成一个新的收藏笔记链接,打开链接再 ...
- React Native微信分享 朋友圈分享 Android/iOS 通用
超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用 2016/06/16 | React Native技术文章 | Sky丶清| 暂无评论 | 1 ...
- iOS - 社会化分享－微信分享，朋友圈分享
我仅仅做了文字和图片分享功能 1. TARGETS - Info - URL Types identifier -> weixin URL Schemes -> 应用id 2.在AppD ...
随机推荐
- 【剑指offer 面试题22】栈的压入、弹出序列
思路: 不停地压栈,直到栈头元素与弹出序列的首元素相等则出栈,同时弹出序列后移:若不相等则一直保持压栈,直到压入所有元素后弹出序列仍不为空,则说明无法匹配. C++: #include <ios ...
- 让Apache支持ASP.NET
Apache是目前广泛使用的一种网络服务器程序,不仅在UNIX/LINUX平台上被大量使用,而且在Windows平台上也有许多站点放弃了IIS 而转向Apache..NET是微软推出的功能强大的开发技 ...
- Richedit使用大全
原文地址:http://blog.csdn.net/pcseye/article/details/3903333 一.常见问题 a.可以编译,不能执行的 AfxInitRichEdit(); b.升级 ...
- DateTime.IsLeapYear 方法判断是否是闰年，DaysInMonth判断一个月有几天，Addday取得前一天的日期GetYesterDay
一:DateTime.IsLeapYear 方法判断是否是闰年 二:代码 using System; using System.Collections.Generic; using System.Co ...
- ASP.NET常用技巧方法代码断
1. 打开新的窗口并传送参数:传送参数:response.write("<script>window.open('*.aspx?id="+this.DropDownLi ...
- C#调用C++导出类（转）
由于使用别人的Dll,导出的是一个实体类,在C#里封送很难,百度下,有个朋友回复一篇英文的,虽然不一定使用,但可以作为一个知识点,现把原文贴下: c#调用C++写的dll导出类,包含继承,重载等详细介 ...
- 解决虚拟机ssh连接出错connection refused
在安装操作系统之后,使用ssh连接,发现直接报错connection refused. 检查虚拟机的连接方式,在使用host only的方式的时候,必须接入网线,不然的网卡是不活动的,从而不能使用ss ...
- 在EC2上安装MEAN环境
本文在个人博客上的地址为URL,欢迎品尝. 搭建决策树项目外网DEMO尝试几个地方后,最后选择了EC2(Amazon Elastic Compute Cloud).选择的是最经济便宜的Amazon L ...
- Zookeeper实现分布式选举算法
分布式系统中经常采用Master/Slave架构.(截止到目前为止我还没有碰到过其他架构...)这种架构中如果Master发生故障就会导致整个集群停止服务,为了提高系统的高可用性通常采用选举算法来选出 ...
- jemalloc优化MySQL、Nginx内存管理
上一篇文章<TCMalloc优化MySQL.Nginx.Redis内存管理>,下面来看下jemalloc jemalloc源于Jason Evans 2006年在BSDcan confer ...