這次給大家?guī)砦⑿欧窒砉δ艿拈_發(fā)，微信分享功能開發(fā)的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

內(nèi)嵌在微信中的網(wǎng)頁，右上角都會有一個默認的分享功能。如下圖所示，第一個為自定義的效果，第二個為默認的效果。實現(xiàn)了自定義的分享鏈接是不是更讓人有點擊的欲望？下面講解下開發(fā)的過程。

一、準備，設置js接口安全域名

這需要使用微信的jssdk，先需要在微信公眾號后臺進行設置：公眾號設置-->功能設置-->JS接口安全域名。打開這個頁面之后你會看到下面的提示。需要先下載這個文件并上傳到指定域名的根目錄。

這個文件里面是一個字符串，從名稱看是用來校驗用的。先上傳了這個文件，你才能保存成功。這樣你就可以使用jssdk了。

?二、前端配置

?首先要說明的是分享功能是一個配置功能，綁定在按鈕的click事件中是沒有效果的。也就是說只有點擊右上角的分享才有效果(有的文字內(nèi)容分享不知道是怎么實現(xiàn)的)。官方的js有四個步驟，首先是引入jssdk：

<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

根據(jù)官方的配置參數(shù)，我們可以定義一個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,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過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，則要提供數(shù)據(jù)鏈接，默認為空
????????????success:?function?()?{????????????????//?用戶確認分享后執(zhí)行的回調(diào)函數(shù)
????????????????alert("分享");
????????????},
????????????cancel:?function?()?{????????????????//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
????????????????alert("取消分享");
????????????}
????????});
????});

然后剩下就是后端的事情了。后端的關(guān)鍵是獲取access_token和jsapi_ticket以及生成正確的簽名。另外如果要統(tǒng)計分享的數(shù)量，最好就是在success方法中進行統(tǒng)計了。

三、生成簽名

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_ticket

access_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沒有提供，好吧先不吐槽了。官方也說明白簽名的規(guī)則。一開始我使用的是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;
????????}//錯誤示例

得出的結(jié)果和官方校驗的不一致，一直提示簽名錯誤。

?

?正確的寫法是：

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;??
????????}

和官方校驗的結(jié)果一直后，就ok了（忽略大小寫）。另外一個需要注意的地方是簽名中的url。如果頁面有參數(shù)，model中的url也需要帶參數(shù)，#號后面的不要。不然也是會報簽名錯誤。

?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);
????????}

四、小結(jié)

wx.config中的debug為true會alert各種操作結(jié)果。參數(shù)正確之后界面會提示：

?

至此，分享的功能就ok了。也就打開了調(diào)用其他jssdk的大門。另外文中的SendHelp對象是用的Senparc?(基于.net4.5)的dll。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

webpack自動刷新與解析的使用

H5的緩存Manifest的使用

以上是微信分享功能的開發(fā)的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！