内嵌在微信中的网页，右上角都会有一个默认的分享功能。如下图所示，第一个为自定义的效果，第二个为默认的效果。实现了自定义的分享链接是不是更让人有点击的欲望？下面讲解下开发的过程。
一、准备，设置js接口安全域名这需要使用微信的jssdk，先需要在微信公众号后台进行设置：公众号设置-->功能设置-->js接口安全域名。打开这个页面之后你会看到下面的提示。需要先下载这个文件并上传到指定域名的根目录。
这个文件里面是一个字符串，从名称看是用来校验用的。先上传了这个文件，你才能保存成功。这样你就可以使用jssdk了。
二、前端配置 首先要说明的是分享功能是一个配置功能，绑定在按钮的click事件中是没有效果的。也就是说只有点击右上角的分享才有效果(有的文字内容分享不知道是怎么实现的)。官方的js有四个步骤，首先是引入jssdk：
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
根据官方的配置参数，我们可以定义一个wxsharemodel对象:
public class wxsharemodel { public string appid { get; set; } public string noncestr { get; set; } public long timestamp { get; set; } public string signature { get; set; } public string ticket { get; set; } public string url { get; set; } public void makesign() { var string1builder = new stringbuilder(); string1builder.append(jsapi_ticket=).append(ticket).append(&) .append(noncestr=).append(noncestr).append(&) .append(timestamp=).append(timestamp).append(&) .append(url=).append(url.indexof(#) >= 0 ? url.substring(0, url.indexof(#)) : url); var string1 = string1builder.tostring(); signature = util.sha1(string1, encoding.default); } }
然后是进行配置：
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appid: '@model.appid', // 必填，公众号的唯一标识 timestamp: '@model.timestamp', // 必填，生成签名的时间戳 noncestr: '@model.noncestr', // 必填，生成签名的随机串 signature: '@model.signature',// 必填，签名，见附录1 jsapilist: [checkjsapi, onmenusharetimeline, onmenushareappmessage, onmenushareqq, onmenushareqzone] // 必填，需要使用的js接口列表，所有js接口列表见附录2 }); wx.ready(function () { document.queryselector('#checkjsapi').onclick = function () { wx.checkjsapi({ jsapilist: [ 'getnetworktype', 'previewimage' ], success: function (res) { alert(json.stringify(res)); } }); }; //朋友圈 wx.onmenusharetimeline({ title: '暖木科技', // 分享标题 link: 'http://www.warmwood.com/home/lampindex', // 分享链接 imgurl: 'http://www.warmwood.com/images/s1.jpg', success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(json.stringify(res)); } }); //朋友 wx.onmenushareappmessage({ title: '暖木科技', // 分享标题 desc: '宝宝的睡眠很重要，你的睡眠也很重要', // 分享描述 link: 'http://www.warmwood.com/home/lampindex', // 分享链接 imgurl: 'http://www.warmwood.com/images/s1.jpg', // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataurl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 alert(分享); }, cancel: function () { // 用户取消分享后执行的回调函数 alert(取消分享); } }); });
然后剩下就是后端的事情了。后端的关键是获取access_token和jsapi_ticket以及生成正确的签名。另外如果要统计分享的数量，最好就是在success方法中进行统计了。
三、生成签名1.access_token 获取access_token方法全平台都是一致的。
public const string accesstokenurl = https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1};
public tokenresult getaccesstoken() { var url = string.format(wxdeviceconfig.accesstokenurl, wxdeviceconfig.appid, wxdeviceconfig.appsecret); var res = sendhelp.send<tokenresult>(null, url, null, commonjsonsendtype.get); return res; }
access_token的超时时间是7200秒，所以先可以缓存起来。sendhelp文章末尾可下载
2.获取jsapi_ticketaccess_token的作用就是为了获取jsapi_ticket。用get方式获取，url: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}
所以可以定义一个模型：
public class jsapiticketmodel { public string errcode { get; set; } public string errmsg { get; set; } public string ticket { get; set; } public string expires_in { get; set; } }
再完成获取ticket的方法：
public jsapiticketmodel getjsapiticket(string accesstoken) { var url = string.format(wxpayconfig.jsapi_ticketurl, accesstoken); return sendhelp.send<jsapiticketmodel>(accesstoken, url, , commonjsonsendtype.get); }
ticket过期时间也是7200秒，并且不能频繁的请求，所以也需要再服务端缓存起来。
private void setcacheticket(string cache) { _cachemanager.set(tokenkey, cache, 7200); }
memorycachemanager：
view code
3.签名终于到这一步了，然后你在文档中看到让你失望的一幕：
么有c#的demo，支付那边都提供了，为啥jssdk没有提供，好吧先不吐槽了。官方也说明白签名的规则。一开始我使用的是https://github.com/night-king/weixinsdk中的签名：
public static string sha1(string orgstr, string encode = utf-8) { var sha1 = new sha1managed(); var sha1bytes = system.text.encoding.getencoding(encode).getbytes(orgstr); byte[] resulthash = sha1.computehash(sha1bytes); string sha1string = bitconverter.tostring(resulthash).tolower(); sha1string = sha1string.replace(-, ); return sha1string; }//错误示例
得出的结果和官方校验的不一致，一直提示签名错误。
正确的写法是：
public static string sha1(string orgstr, encoding encode) { sha1 sha1 = new sha1cryptoserviceprovider(); byte[] bytes_in = encode.getbytes(orgstr); byte[] bytes_out = sha1.computehash(bytes_in); sha1.dispose(); string result = bitconverter.tostring(bytes_out); result = result.replace(-, ); return result; }
和官方校验的结果一直后，就ok了（忽略大小写）。另外一个需要注意的地方是签名中的url。如果页面有参数，model中的url也需要带参数，#号后面的不要。不然也是会报签名错误。
public actionresult h5share() { var model = new wxsharemodel(); model.appid = wxpayconfig.appid; model.noncestr = wxpayapi.generatenoncestr(); model.timestamp = util.createtimestamp(); model.ticket = getticket(); model.url = http://www.warmwood.com/authweixin/share;// domain + request.url.pathandquery; model.makesign(); logger.debug(获取到ticket: + model.ticket); logger.debug(获取到签名: + model.signature); return view(model); }
四、小结wx.config中的debug为true会alert各种操作结果。参数正确之后界面会提示：
至此，分享的功能就ok了。也就打开了调用其他jssdk的大门。另外文中的sendhelp对象是用的senparc (基于.net4.5)的dll。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
webpack自动刷新与解析的使用
h5的缓存manifest的使用
以上就是微信分享功能的开发的详细内容。