這次給大家?guī)?lái)微信分享功能的開發(fā)，微信分享功能開發(fā)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
內(nèi)嵌在微信中的網(wǎng)頁(yè)，右上角都會(huì)有一個(gè)默認(rèn)的分享功能。
如下圖所示，第一個(gè)為自定義的效果，第二個(gè)為默認(rèn)的效果。
實(shí)現(xiàn)了自定義的分享鏈接是不是更讓人有點(diǎn)擊的欲望？下面講解下開發(fā)的過(guò)程。
一、準(zhǔn)備，設(shè)置js接口安全域名這需要使用微信的jssdk，先需要在微信公眾號(hào)后臺(tái)進(jìn)行設(shè)置：
公眾號(hào)設(shè)置-->功能設(shè)置-->JS接口安全域名。
打開這個(gè)頁(yè)面之后你會(huì)看到下面的提示。
需要先下載這個(gè)文件并上傳到指定域名的根目錄。
這個(gè)文件里面是一個(gè)字符串，從名稱看是用來(lái)校驗(yàn)用的。
先上傳了這個(gè)文件，你才能保存成功。
這樣你就可以使用jssdk了。
二、前端配置 首先要說(shuō)明的是分享功能是一個(gè)配置功能，綁定在按鈕的click事件中是沒(méi)有效果的。
也就是說(shuō)只有點(diǎn)擊右上角的分享才有效果(有的文字內(nèi)容分享不知道是怎么實(shí)現(xiàn)的)。
官方的js有四個(gè)步驟，首先是引入jssdk：
根據(jù)官方的配置參數(shù)，我們可以定義一個(gè)WXShareModel對(duì)象: 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);
}
}
然后是進(jìn)行配置：
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: '
@Model.appId'
, // 必填，公眾號(hào)的唯一標(biāo)識(shí) timestamp: '
@Model.timestamp'
, // 必填，生成簽名的時(shí)間戳 nonceStr: '
@Model.nonceStr'
, // 必填，生成簽名的隨機(jī)串 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: '
暖木科技'
, // 分享標(biāo)題 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: '
暖木科技'
, // 分享標(biāo)題 desc: '
寶寶的睡眠很重要，你的睡眠也很重要'
, // 分享描述 link: '
http://www.warmwood.com/home/lampindex'
, // 分享鏈接 imgUrl: '
http://www.warmwood.com/images/s1.jpg'
, // 分享圖標(biāo) type: '
'
, // 分享類型,music、video或link，不填默認(rèn)為link dataUrl: '
'
, // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空 success: function () {
// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) alert("分享");
}
, cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù) alert("取消分享");
}
}
);
}
);
然后剩下就是后端的事情了。
后端的關(guān)鍵是獲取access_token和jsapi_ticket以及生成正確的簽名。
另外如果要統(tǒng)計(jì)分享的數(shù)量，最好就是在success方法中進(jìn)行統(tǒng)計(jì)了。
三、生成簽名1.access_token 獲取access_token方法全平臺(tái)都是一致的。
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(null, url, null, CommonJsonSendType.GET);
return res;
}
access_token的超時(shí)時(shí)間是7200秒，所以先可以緩存起來(lái)。
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對(duì)象如下。
{
"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200}
所以可以定義一個(gè)模型：
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(accessToken, url, "", CommonJsonSendType.GET);
}
ticket過(guò)期時(shí)間也是7200秒，并且不能頻繁的請(qǐng)求，所以也需要再服務(wù)端緩存起來(lái)。
private void setCacheTicket(string cache) {
_cacheManager.Set(tokenKey, cache, 7200);
}
MemoryCacheManager：
View Code3.簽名終于到這一步了，然后你在文檔中看到讓你失望的一幕：
么有C#的demo，支付那邊都提供了，為啥jssdk沒(méi)有提供，好吧先不吐槽了。
官方也說(shuō)明白簽名的規(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;
}
//錯(cuò)誤示例得出的結(jié)果和官方校驗(yàn)的不一致，一直提示簽名錯(cuò)誤。
正確的寫法是：
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;
}
和官方校驗(yàn)的結(jié)果一直后，就ok了（忽略大小寫）。
另外一個(gè)需要注意的地方是簽名中的url。
如果頁(yè)面有參數(shù)，model中的url也需要帶參數(shù)，#號(hào)后面的不要。
不然也是會(huì)報(bào)簽名錯(cuò)誤。
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會(huì)alert各種操作結(jié)果。
參數(shù)正確之后界面會(huì)提示：
至此，分享的功能就ok了。
也就打開了調(diào)用其他jssdk的大門。
另外文中的SendHelp對(duì)象是用的Senparc (基于.net4.5)的dll。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！推薦閱讀：
webpack自動(dòng)刷新與解析的使用H5的緩存Manifest的使用以上就是微信分享功能的開發(fā)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
開發(fā) 功能 分享本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！
上一篇：
公眾號(hào)支付接口的開發(fā)
下一篇：
微信硬件H5開發(fā)之控制燈光相關(guān)文章相關(guān)視頻修改微信號(hào)有什么影響嗎？微信中共享實(shí)時(shí)位置什么意思數(shù)據(jù)庫(kù)設(shè)計(jì)的基本原則是什么？微信小程序調(diào)用圖片安全API微信分享功能的開發(fā)PHP開發(fā)基礎(chǔ)教程之環(huán)境搭建PHP開發(fā)基礎(chǔ)教程之學(xué)習(xí)之語(yǔ)法PHP開發(fā)基礎(chǔ)教程之變量PHP開發(fā)基礎(chǔ)教程之輸出語(yǔ)句PHP開發(fā)基礎(chǔ)教程之?dāng)?shù)據(jù)類型 [溫州做微信公眾號(hào)]