最近忙了好久,也好久没有写点什么,总算抽出点时间可以来csdn看看。顺便把微信分享的功能写一点心得。
微信H5分享就是我们写的一个H5页面,可以是html、亦可以是其他动态类型的页面,对于我来说微信分享不是第一次做了,之前以为只可以在非html页面中加,后来仔细一想那我们的ajax干嘛去啦。
下面我就具体说一下静态页面和非静态页面怎么实现微信还H5分享。
非静态:这个好说了,我们只需要在当前页面的onload中获取Token和ticket,把微信分享接口需要的签名apikey什么的做一个全局变量取到值然后在页面前端调用就好了。一开始感觉这种方法确实方便,但是这种方法如果你有一个页面分享你需要写一遍,有几个页面就需要写几遍。
静态:个人建议不论是什么样子的页面都按照静态方式调取微信接口,拓展性比较好。
首先引用微信JS ,这个js版本一直在更新。
var appId;微信公众号appid
var timestamp;时间戳自己生成
var nonceStr;随机字符串自己定义
var signature;签名自己生成(重要)
这四个是我们调用微信js需要的参数,上面除了签名之外其他都好说,最重要是这个签名的生成:
public void signature(string currurl)
{
appid = vhcar.Appid;
noncestr = "123456";
timestamp = GenerateTimeStamp(DateTime.Now);
StringBuilder sb = new StringBuilder();
sb.AppendFormat("jsapi_ticket={0}&noncestr={1}×tamp={2}&url={3}", vhcar.Jsapi_ticket, noncestr, timestamp, currurl);
//SHA1签名千万不要弄错
sign = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(sb.ToString(), "SHA1");
}
生成签名的这个规则不要弄错,另外拼接的stringbuilder参数
1.access_token,这里需要注意,微信有两个token,一个是access_token,一个是token,我们这里需要的是access_token
2.ticket,这个是根据上面的access_token来获取的,所以如果accesstoken获取有问题的话这个就绝对有问题。
3.currurl,当前页面的链接地址,注意一定是当前页面在外网的链接地址。而且是完整的地址,就是你在微信打开你需要分享的页面复制链接后看到的地址是什么,这里就必须是什么。否则会一直提示签名出错。这里我的currurl是用js获取当前页面的链接传过来。可以用于参考。
获取token:
private void GetToken()
{
try
{
//获取access_token
string url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + vhcar.Appid + "&secret=" + vhcar.Appsecret;
System.Net.HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(url);
//myReq.Method = "POST";
HttpWebResponse myResp = (HttpWebResponse)myReq.GetResponse();
StreamReader myStream = new StreamReader(myResp.GetResponseStream(), enc);
string ret = myStream.ReadToEnd();
//ret = str.Trim();
string access_token = ret.Substring(ret.IndexOf("access_token\":\"") + 15, ret.IndexOf("\",\"") - ret.IndexOf("access_token\":\"") - 15);
vhcar.Token = access_token;
vhcar.Time = DateTime.Now;
}
catch (Exception)
{
vhcar.Token = null;
}
}
private void GetTicket()
{
try
{
//获取access_token
string url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + vhcar.Token + "&type=jsapi";
System.Net.HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(url);
//myReq.Method = "POST";
HttpWebResponse myResp = (HttpWebResponse)myReq.GetResponse();
StreamReader myStream = new StreamReader(myResp.GetResponseStream(), enc);
string ret = myStream.ReadToEnd();
//ret = str.Trim();
string jsapi_ticket = ret.Substring(ret.IndexOf("ticket\":\"") + 9, ret.LastIndexOf("\",\"") - ret.IndexOf("ticket\":\"") - 9);
vhcar.Jsapi_ticket = jsapi_ticket;
vhcar.J_time = DateTime.Now;
}
catch (Exception)
{
vhcar.Token = null;
vhcar.Jsapi_ticket = null;
}
}
获取时间戳:
public string GenerateTimeStamp(DateTime dt)
{
// Default implementation of UNIX time of the current UTC time
TimeSpan ts = dt.ToUniversalTime() - new DateTime(1970, 1, 1, 0, 0, 0, 0);
return Convert.ToInt64(ts.TotalSeconds).ToString();
}
下面是js部分,主要是获取后台的几个参数,然后调用微信的几个js接口方法即可。
var test = window.location.href;
$.ajax({
type: "POST",
url: "/DoVChar/GetVCharAbout",
data: { "uid": +uid, "currurl": test },
success: function (msg) {
var arr = new Array();
arr = msg.split(',');
appId = arr[0];
timestamp = arr[1];
nonceStr = arr[2];
signature = arr[3];
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideAllNonBaseMenuItem', 'showMenuItems', 'closeWindow'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
//wx.hideAllNonBaseMenuItem();
wx.showMenuItems({
menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline'] // 要显示的菜单项,所有menu项见附录3
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: '$20在线中文课,免费体验!', // 分享标题
link: 'https://www.koalaknow.com/VCharClassic.html?uid='+uid, // 分享链接
imgUrl: 'https://www.koalaknow.com/img/VcharImg/vcharlogo.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: '$20在线中文课,免费体验!', // 分享标题
desc: '专业老师,专属课程,爱上“动起来”的中文', // 分享描述
link: 'https://www.koalaknow.com/VCharClassic.html?uid='+uid, // 分享链接
imgUrl: 'https://www.koalaknow.com/img/VcharImg/vcharlogo.png', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
});
}
})
})