手機Web APP如何實現分享多平臺功能

2019-11-20 09:11:44

字體：大中小

來源：轉載

供稿：網友

話說App一般都帶有分享到社交平臺的入口，web網頁的分享也有很不錯的框架，但是隨著HTML5的不斷發展，手機web頁面越來越多的進入到我們的生活中，那如何在我們的手機上完成分享呢？話說各大分享平臺都有針對Android、Ios的SDK，作為開發者，我們只需要將SDK集成的我們的項目中即可，通過提供的外部接口，我們可以很容易的完成分享的功能；web網頁呢，網上也存在很多優秀的分享框架，例如：bShare分享、JiaThis分享；我們可以很方便的集成到我們的項目中；但是手機web頁面實現分享就需要我們下點功夫了，以為這個時候，我們就可以通過調用用戶安裝的客戶端進行分享，這里需要特別提到的就是微信分享了，網頁端我們分享時，一般都是彈出一個分享的二維碼，我們使用微信App掃描然后進行分享，手機端我們就不能這樣操作了，我們需要當用戶選中微信分享時，直接打開App進行分享，這里就要吐槽一下微信的分享JS SDK了，初次接觸到這個東東時，還以為只要完成操作就可以實現自定義分享了，隨著各種坑不斷，最后發現，微信JS SDK僅僅只是將我們的自定義內容臨時緩存，當我們需要分享時，還是需要通過微信右上角的按鈕來完成操作的。好嘞，不多講廢話了，進入今天的主題，接下來我將按照通過超鏈接完成新浪、QQ、QQ空間、騰訊微博分享，然后為大家奉上基于C#平臺的微信JS SDK分享組件的簽名邏輯，最后帶領大家完成手機web端分享。

　　進入第一點：通過超鏈接完成分享

　　對于常用的社交平臺我們基本可以通過超鏈接的方式進行內容分享，當然微信除外，微信不支持這種分享方式，這種分享方式可以便于我們自定義分享，并且使用起來非常的方便。

function shareSina() {//分享到新浪微博var sharesinastring = 'http://service.weibo.com/share/share.php?title=' + $("#title").val() + '&url=' + $("#url").val();window.location.href = sharesinastring;}function shareQQzone(){var p = {url:location.href,showcount:'0',/*是否顯示分享總數,顯示：'1'，不顯示：'0' */desc:'',/*默認分享理由(可選)*/summary:'',/*分享摘要(可選)*/title:'',/*分享標題(可選)*/site:'滿藝網',/*分享來源 如：騰訊網(可選)*/pics:'', /*分享圖片的路徑(可選)*/style:'203',width:98,height:22};//分享到QQ空間var sharesinastring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + $("#title").val() + '&url=' + $("#url").val() + '&site="滿藝網"';window.location.href = sharesinastring;}function shareQQ() {var p = {url: location.href, /*獲取URL，可加上來自分享到QQ標識，方便統計*/desc: '', /*分享理由(風格應模擬用戶對話),支持多分享語隨機展現（使用|分隔）*/title: '', /*分享標題(可選)*/summary: '', /*分享摘要(可選)*/pics: '', /*分享圖片(可選)*/flash: '', /*視頻地址(可選)*/site: '滿藝網', /*分享來源(可選) 如：QQ分享*/style: '201',width: 32,height: 32};//分享到QQvar sharesinastring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $("#title").val() + '&summary=' + $("#url").val() + '&url=' + $("#url").val() + '&site="滿藝網"';window.location.href = sharesinastring;}function shareQQweibo() {var p = {url: location.href, /*獲取URL，可加上來自分享到QQ標識，方便統計*/title: '', /*分享標題(可選)*/pic: '', /*分享圖片(可選)*/site: '滿藝網' /*分享來源(可選) 如：QQ分享*/};//分享到騰訊微博var sharesinastring = 'http://v.t.qq.com/share/share.php?title=' + $("#title").val() + '&url=' + $("#url").val() + '&site="滿藝網"';window.location.href = sharesinastring;}

　　以上便是分享都新浪微博、QQ、QQ空間、騰訊微博的JS代碼，我們只需要在頁面需要分享的位置進行一下調用即可。當然還有很多平臺，一樣支持這種形式的分享內容，各位小伙伴自己去摸索吧，這里我們不再一一贅述。

　　下面介紹一些微信分享：

　　一開始我們便說道微信內置的瀏覽器右上角帶有分享功能，這也導致我們在自己的網頁上無法直接分享到微信的朋友圈，而微信為我們提供了一個用于微信自定義分享的JS SDK，小伙伴是不是已經按耐不住自己的激情了，下面我們來先簡單看一這個JS SDK為何物？微信官方提供的文檔到時挺詳細，但是想要開發JS SDK我們首先需要一個微信公眾號，然后我們點擊“接口權限”可以查看到我們所擁有的權限，如下：

　　對于上面這些基本的東西就不在多說，下面我們重點看一下如何獲取jsapi_ticket，如何進行簽名。官方文檔提示的步驟是，先獲取access_token，然后通過access_token來獲取jsapi_ticket，最后通過jsapi_ticket進行簽名。下面我們就一步一步完成上面的工作。注：官方提供了php、java、python、nodejs的實例程序，這里我將以C#為例為大家結束如何完成上面的操作。

　　第一步、獲取access_token

　　官方文檔是這樣說的：access_token是公眾號的全局唯一接口調用憑據，公眾號調用各接口時都需使用access_token。開發者需要進行妥善保存。access_token的存儲至少要保留512個字符空間。access_token的有效期目前為2個小時，需定時刷新，重復獲取將導致上次獲取的access_token失效。

　　第二步獲取jsapi_ticket

　　官方文檔是這樣說的：jsapi_ticket是公眾號用于調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響自身業務，開發者必須在自己的服務全局緩存jsapi_ticket 。

　　1.參考以下文檔獲取access_token（有效期7200秒，開發者必須在自己的服務全局緩存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html

　　2.用第一步拿到的access_token 采用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

　　獲得jsapi_ticket之后，就可以生成JS-SDK權限驗證的簽名了。

　　第三步生成JS-SDK權限驗證的簽名

　　簽名生成規則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其后面部分）。對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉義。

注意事項

　　1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同;

　　2.簽名用的url必須是調用JS接口頁面的完整URL;

　　3.出于安全考慮，開發者必須在服務器端實現簽名的邏輯。

　　以上便是微信JS SDK的簽名邏輯部分，下面奉上具體的代碼實現：

using System;using System.Net;using System.Web.Mvc;using System.IO;using System.Text;using System.Web.Script.Serialization;using ManYiAbyWAP.Models;/// <summary>/// 微信獲取jsapi_ticket/// </summary>namespace ManYiAbyWAP.Controllers{public class WXMessageController : Controller{private static string APPID = "微信提供的appid";private static string SECRECT = "微信提供的secrect";public static WXInfo accessToken = null;//全局對象，每7200秒更新一次，微信對每日獲取Token有請求次數與時效限制public static DateTime overTime = DateTime.Now;//用于Token的過期驗證public ActionResult GetToken(string url) {if (accessToken != null){TimeSpan span = Convert.ToDateTime(overTime).Subtract(Convert.ToDateTime(DateTime.Now));if (span.TotalHours > 2){accessToken = GETWinXinToken();overTime = DateTime.Now;}}else{accessToken = GETWinXinToken();overTime = DateTime.Now;}//生成簽名的時間戳TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);accessToken.timestamp = Convert.ToInt64(ts.TotalSeconds).ToString();//獲取隨機串accessToken.noncestr = createNonceStr(16);string str = "jsapi_ticket="+ accessToken .ticket+ "&noncestr="+ accessToken.noncestr + "×tamp="+ accessToken.timestamp + "&url="+ url;accessToken.signature = SHA1(str).ToLower();accessToken.APPID = APPID;return Json(accessToken, JsonRequestBehavior.AllowGet);}//生成隨機串private string createNonceStr(int length = 16){string str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";Random r = new Random();string result = string.Empty;//生成一個8位長的隨機字符，具體長度可以自己更改for (int i = 0; i < length; i++){int m = r.Next(0, 62);//這里下界是0，隨機數可以取到，上界應該是62，因為隨機數取不到上界，也就是最大62，符合我們的題意string s = str.Substring(m, 1);result += s;}return result;}//散列算法private static string SHA1(string text){byte[] cleanBytes = Encoding.Default.GetBytes(text);byte[] hashedBytes = System.Security.Cryptography.SHA1.Create().ComputeHash(cleanBytes);return BitConverter.ToString(hashedBytes).Replace("-", "");}//通過GET請求獲取Tokenprivate static WXInfo GETWinXinToken() {//獲取access_tokenHttpWebResponse response = CreateGetHttpResponse("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRECT, 5000);StreamReader reader = new StreamReader(response.GetResponseStream());String line;StringBuilder sb = new StringBuilder();while ((line = reader.ReadLine()) != null){sb.Append(line.ToString());}JavaScriptSerializer js = new JavaScriptSerializer();WXInfo accessToken = js.Deserialize<WXInfo>(sb.ToString());//獲取jsapi_ticketresponse = CreateGetHttpResponse("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken.access_token + "&type=jsapi", 5000);reader = new StreamReader(response.GetResponseStream());sb = new StringBuilder();while ((line = reader.ReadLine()) != null){sb.Append(line.ToString());}accessToken = js.Deserialize<WXInfo>(sb.ToString());return accessToken;}/// <summary> /// 創建GET方式的HTTP請求 /// </summary> /// <param name="url">請求的URL</param> /// <param name="timeout">請求的超時時間</param> /// <param name="userAgent">請求的客戶端瀏覽器信息，可以為空</param> /// <param name="cookies">隨同HTTP請求發送的Cookie信息，如果不需要身份驗證可以為空</param> /// <returns></returns> public static HttpWebResponse CreateGetHttpResponse(string url, int? timeout, string userAgent=null, CookieCollection cookies=null){if (string.IsNullOrEmpty(url)){throw new ArgumentNullException("url");}HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;request.Method = "GET";if (!string.IsNullOrEmpty(userAgent)){request.UserAgent = userAgent;}if (timeout.HasValue){request.Timeout = timeout.Value;}if (cookies != null){request.CookieContainer = new CookieContainer();request.CookieContainer.Add(cookies);}return request.GetResponse() as HttpWebResponse;}}}

　　用于存放Token信息的全局對象WXInfo.cs

namespace ManYiAbyWAP.Models{/// <summary>/// 微信獲取Token返回參數類/// </summary>public class WXInfo{public string APPID { get; set; }public string access_token { get; set; }//access_tokenpublic string expires_in { get; set; }//Token過期時間,7200秒內有效public string ticket { get; set; }//jsapi_ticketpublic string errmsg { get; set; }public int errcode { get; set; }public string noncestr { get; set; }//生成簽名的隨機串public string timestamp { get; set; }//生成簽名的時間戳public string signature { get; set; }//簽名返回值}}

　　網頁端進行初始化的JS代碼：

//微信JS SDK請求狀態var requestStatus = 0;function shareWX() {if (requestStatus != 1) {requestStatus = 1;//正在請求var ajaxPara = "url=" + encodeURIComponent(window.location.href.split('#')[0]);$.ajax({url: '/WXMessage/GetToken',dataType: 'json',data: ajaxPara,success: function (json) {if (undefined != json && json !== "") {var jsonObjs = eval(json);wx.config({debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: jsonObjs.APPID, // 必填，公眾號的唯一標識timestamp: jsonObjs.timestamp, // 必填，生成簽名的時間戳nonceStr: jsonObjs.noncestr, // 必填，生成簽名的隨機串signature: jsonObjs.signature,// 必填，簽名，見附錄1jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});wx.ready(function () {//alert("微信驗證成功");// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。wx.checkJsApi({jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,success: function (res) {// 以鍵值對的形式返回，可用的api值true，不可用為false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}}});wx.onMenuShareWeibo({title: '滿藝網分享測試', // 分享標題desc: '滿藝網分享描述測試', // 分享描述link: 'http://www.manyiaby.com', // 分享鏈接imgUrl: 'http://www.manyiaby.com/img/logo_2.jpg', // 分享圖標success: function () {// 用戶確認分享后執行的回調函數alert("分享成功");},cancel: function () {// 用戶取消分享后執行的回調函數alert("分享取消");}});});wx.error(function (res) {//alert("微信驗證失敗 res:"+res);// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。});requestStatus = 2;//請求完成}},complete: function () {window.setTimeout(function () {requestStatus = 2;//請求完成}, 300);}});}

　　到這里關于微信分享JS SDK的使用就為大家介紹完畢，大家可以結合自己的需求進行參考。一開始已經為大家介紹了，微信提供的分享JS SDK僅僅只是一個對于微信內部瀏覽器的緩存處理，真正的分享還是需要我們點擊右上角的分享按鈕。　

　上面這些都不是太完美的手機web分享解決方法，最后給大家介紹一些Sosh社會化分享組件，當我看到這個組件時，我就知道這是我需要的，簡潔的界面，整好可以讓我們的網站看起來典雅舒服。好了，廢話不多說，進入主題：