前言

以前h5網頁在微信裡開啟，右上角分享到微信好友或者朋友圈 是微信自己抓取的首圖 現在 好像不行了。這是因為微信更新了API，必須自行配置，接入jssdk，才能實現自定義分享資訊的功能。詳細可以檢視微信官方開發者文件，地址：

JS介面安全域名

接入jssdk時，就需要配置JS介面安全域名，因此需要登入微信公眾平臺，在公眾號設定→功能設定中，填寫JS介面安全域名，域名即為H5專案的域名（如：www.baidu.com）,同時需要下載一個txt驗證檔案，並放置到伺服器的根路徑下，實際操作時根據提示即可。

設定白名單

這一步其實應該放到後面獲取access_token步驟中，我這裡正好已經登入在公眾號平臺，所以就一併操作了。後面講到獲取access_token和jsapi_ticket時，需要訪問伺服器，因此需要將H5專案伺服器的IP地址新增到白名單中，否則介面將無法呼叫成功。具體設定方法：在開發→基本設定→IP白名單中進行新增相應的IP地址即可。如下圖所示

獲取access_token

access_token是公眾號的全域性唯一介面呼叫憑據，公眾號呼叫各介面時都需使用access_token。詳細說明詳見官當開發文件：

首先需要在H5頁面內中引入js檔案

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

具體獲取的程式碼如下：

$.ajax({
  url: "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=AppSecret";,  //介面地址
  type: "Get",
  dataType: 'jsonp',
  crossDomain: true,//與上一項解決跨域問題
  success: function (data) {
   //將access_token快取起來
   localStorage.setItem("access_token", data.access_token);
  }
});
 

其中引數appid和secret均可以在公眾號後臺檢視獲取。

獲取jsapi_ticket

jsapi_ticket是公眾號用於呼叫js介面的臨時票據。有效期7200秒，跟公眾號普通access_token一樣，必須全域性快取起來，因為這個ticket獲取次數有限，超過次數將無法使用。獲取jsapi_ticket也是為了後面生成signature簽名做準備。具體方法與access_token類似，替換訪問介面即可。

$.ajax({
 url: "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi",  //介面地址
 type: "Get",
 dataType: 'jsonp',
 crossDomain: true,
 success: function (data) {
   //快取jsapi_ticket
   localStorage.setItem("jsapi_ticket", ticket);
 }
});
 

生成signature，並自定義分享資訊

前臺的程式碼實現：

var url = location.href.split('#')[0];  //分享的文章地址
var requestUrl = "/app/getticket?ticket=" + ticket + "&url=" + url;
$.ajax({
	url: requestUrl,
	type: "Get",
	dataType: 'json',
	success: function (data) {
		var appId = data.appId;
		var timestamp = data.timestamp;
		var nonceStr = data.noncestr;
		var signature = data.signature;
		wx.config({
			debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，
						  // 若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
			appId: appId + '', // 必填，公眾號的唯一標識
			timestamp: timestamp + '', // 必填，生成簽名的時間戳
			nonceStr: nonceStr + '', // 必填，生成簽名的隨機串
			signature: signature + '',// 必填，簽名，見附錄1
			jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] 
			// 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
		});

		wx.ready(function () {
			var imgurl = '縮圖完整地址';
			var title = '自定義標題';
			var desc = '自定義描述資訊';
			wx.onMenuShareTimeline({
				title: title, // 分享標題
				desc: desc, // 分享描述
				link: url, // 分享連結
				imgUrl: imgurl, // 分享圖示
				success: function () {
					// 使用者確認分享後執行的回撥函式
				},
				cancel: function () {
					// 使用者取消分享後執行的回撥函式
				}
			});

			wx.onMenuShareAppMessage({
				title: title, // 分享標題
				desc: desc, // 分享描述
				link: url, // 分享連結
				imgUrl: imgurl, // 分享圖示
				type: '', // 分享型別,music、video或link，不填預設為link
				dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
				success: function () {
					// 使用者確認分享後執行的回撥函式
				},
				cancel: function () {
					// 使用者取消分享後執行的回撥函式
				}
			});

			wx.onMenuShareQQ({
				title: title, // 分享標題
				desc: desc, // 分享描述
				link: url, // 分享連結
				imgUrl: imgurl, // 分享圖示
				success: function () {
					// 使用者確認分享後執行的回撥函式
				},
				cancel: function () {
					// 使用者取消分享後執行的回撥函式
				}
			});
		});
	}
});

後臺生成簽名的邏輯程式碼：

/// <summary>
///  根據傳入的jsapi_ticket生成signature簽名
/// </summary>
/// <param name="ticket"></param>
/// <returns></returns>
public JsonResult GetTicket(string ticket, string url)
{
    SignatureTicket model = new SignatureTicket();
    model.appId = CommonSharp.appId;
    model.noncestr = CommonSharp.GetRnd(16, true, true, true, false, "");
    model.timestamp = CommonSharp.GetTimeStamp();
    string _url = System.Web.HttpUtility.UrlDecode(url);
    string string1 = "jsapi_ticket=" + ticket + "&noncestr=" + model.noncestr + "×tamp=" + model.timestamp + "&url=" + url;
    model.signature = CommonSharp.GetPwd(string1);
    return Json(model);
}

其中GetPwd方法的邏輯如下：

public static string GetPwd(string str)
{
    byte[] cleanBytes = Encoding.Default.GetBytes(str);
    byte[] hashedBytes = System.Security.Cryptography.SHA1.Create().ComputeHash(cleanBytes);
    return BitConverter.ToString(hashedBytes).Replace("-", "");
}

至此，需要配置的以及後臺程式碼均已完畢，釋出後放到伺服器上進行測試使用。

---------------------------------- 完美的分割線 ---------------------------------------

根據上面的方式，開始確實可以實現想要的功能，但晚上下班回家了，無意中再次開啟時發現又不行了，在電腦上檢視時，報瞭如下錯誤：

invalid credential, access_token is invalid or not latest hint

一番折騰之後發現，是由於access_token過期了，導致生成的簽名失敗。分析上面的程式碼，發現將獲取到的access_token快取到localstorage的邏輯是有問題的，獲取到的access_token預設有效期為2小時，如果重新請求API介面，新的access_token會覆蓋原來的值，而我將access_token存入localstorage後，其實並沒有做進一步的有效期的校驗和定時重新整理，所以過了有效期之後，自然就會出現上面的那個錯誤了。

知道了原因，那就開始動手修改吧。當在前端利用jsonp訪問微信API介面時，莫名其妙的又出現了另一個錯誤：

Uncaught SyntaxError: Unexpected token :

這個應該是跟ajax跨域請求返回的資料格式有關係，但是試了很多方法都不行，無奈，只好換一種思路，打算不再從前端獲取access_token了，改從後端去獲取，這樣就可以避免了ajax訪問時跨域的問題。還是直接上程式碼吧~~

後臺C#程式碼實現如下：

/// <summary>
///  獲取access_token
/// </summary>
/// <returns></returns>
public JsonResult GetAccessToken()
{
  AccessToken result = new AccessToken();
  if (HttpRuntime.Cache == null)
  {
    result = GetToken();
  }
  var accessTokenCache = HttpRuntime.Cache.Get(CommonSharp.token_cahekey);
  if (accessTokenCache != null)
  {
    result.Token = accessTokenCache.ToString();
  }
  else
  {
    result = GetToken();
  }
  return Json(result);
}
private AccessToken GetToken()
{
    AccessToken result = new AccessToken();
    var client = new WebClient();
    client.Encoding = System.Text.Encoding.UTF8;
    var responseData = client.DownloadString(string.Format(@"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential
        &appid={0}&secret={1}", CommonSharp.appId, CommonSharp.app_secret));
    var serializer = new JavaScriptSerializer();
    var accessDictionary = serializer.Deserialize<Dictionary<string, object>>(responseData);
    var accessToken = accessDictionary[CommonSharp.token_cahekey];
    if (accessToken != null)
    {
        HttpRuntime.Cache.Insert(CommonSharp.token_cahekey, accessToken, null, DateTime.Now.AddSeconds(7100), 
            TimeSpan.Zero, System.Web.Caching.CacheItemPriority.Normal, null);
        result.Token = accessToken.ToString();
    }
    return result;
}