快捷導(dǎo)航

手機(jī)Web APP如何實(shí)現(xiàn)分享多平臺(tái)功能

更新時(shí)間：2016年08月19日 14:59:32 作者：小破孩123

這篇文章主要介紹了手機(jī)Web APP如何實(shí)現(xiàn)分享多平臺(tái)功能的相關(guān)資料,需要的朋友可以參考下

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

　　進(jìn)入第一點(diǎn)：通過(guò)超鏈接完成分享

　　對(duì)于常用的社交平臺(tái)我們基本可以通過(guò)超鏈接的方式進(jìn)行內(nèi)容分享，當(dāng)然微信除外，微信不支持這種分享方式，這種分享方式可以便于我們自定義分享，并且使用起來(lái)非常的方便。

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',/*是否顯示分享總數(shù),顯示：'1'，不顯示：'0' */
desc:'',/*默認(rèn)分享理由(可選)*/
summary:'',/*分享摘要(可選)*/
title:'',/*分享標(biāo)題(可選)*/
site:'滿藝網(wǎng)',/*分享來(lái)源 如：騰訊網(wǎng)(可選)*/
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="滿藝網(wǎng)"';
window.location.href = sharesinastring;
}
function shareQQ() {
var p = {
url: location.href, /*獲取URL，可加上來(lái)自分享到QQ標(biāo)識(shí)，方便統(tǒng)計(jì)*/
desc: '', /*分享理由(風(fēng)格應(yīng)模擬用戶對(duì)話),支持多分享語(yǔ)隨機(jī)展現(xiàn)（使用|分隔）*/
title: '', /*分享標(biāo)題(可選)*/
summary: '', /*分享摘要(可選)*/
pics: '', /*分享圖片(可選)*/
flash: '', /*視頻地址(可選)*/
site: '滿藝網(wǎng)', /*分享來(lái)源(可選) 如：QQ分享*/
style: '201',
width: 32,
height: 32
};
//分享到QQ
var sharesinastring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $("#title").val() + '&summary=' + $("#url").val() + '&url=' + $("#url").val() + '&site="滿藝網(wǎng)"';
window.location.href = sharesinastring;
}
function shareQQweibo() {
var p = {
url: location.href, /*獲取URL，可加上來(lái)自分享到QQ標(biāo)識(shí)，方便統(tǒng)計(jì)*/
title: '', /*分享標(biāo)題(可選)*/
pic: '', /*分享圖片(可選)*/
site: '滿藝網(wǎng)' /*分享來(lái)源(可選) 如：QQ分享*/
};
//分享到騰訊微博
var sharesinastring = 'http://v.t.qq.com/share/share.php?title=' + $("#title").val() + '&url=' + $("#url").val() + '&site="滿藝網(wǎng)"';
window.location.href = sharesinastring;
}

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

　　下面介紹一些微信分享：

　　一開(kāi)始我們便說(shuō)道微信內(nèi)置的瀏覽器右上角帶有分享功能，這也導(dǎo)致我們?cè)谧约旱木W(wǎng)頁(yè)上無(wú)法直接分享到微信的朋友圈，而微信為我們提供了一個(gè)用于微信自定義分享的JS SDK，小伙伴是不是已經(jīng)按耐不住自己的激情了，下面我們來(lái)先簡(jiǎn)單看一這個(gè)JS SDK為何物？微信官方提供的文檔到時(shí)挺詳細(xì)，但是想要開(kāi)發(fā)JS SDK我們首先需要一個(gè)微信公眾號(hào)，然后我們點(diǎn)擊“接口權(quán)限”可以查看到我們所擁有的權(quán)限，如下：

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

　　第一步、獲取access_token

　　官方文檔是這樣說(shuō)的：access_token是公眾號(hào)的全局唯一接口調(diào)用憑據(jù)，公眾號(hào)調(diào)用各接口時(shí)都需使用access_token。開(kāi)發(fā)者需要進(jìn)行妥善保存。access_token的存儲(chǔ)至少要保留512個(gè)字符空間。access_token的有效期目前為2個(gè)小時(shí)，需定時(shí)刷新，重復(fù)獲取將導(dǎo)致上次獲取的access_token失效。

　　第二步獲取jsapi_ticket

　　官方文檔是這樣說(shuō)的：jsapi_ticket是公眾號(hào)用于調(diào)用微信JS接口的臨時(shí)票據(jù)。正常情況下，jsapi_ticket的有效期為7200秒，通過(guò)access_token來(lái)獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限，頻繁刷新jsapi_ticket會(huì)導(dǎo)致api調(diào)用受限，影響自身業(yè)務(wù)，開(kāi)發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket 。

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

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

　　獲得jsapi_ticket之后，就可以生成JS-SDK權(quán)限驗(yàn)證的簽名了。

　　第三步生成JS-SDK權(quán)限驗(yàn)證的簽名

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

注意事項(xiàng)

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

　　2.簽名用的url必須是調(diào)用JS接口頁(yè)面的完整URL;

　　3.出于安全考慮，開(kāi)發(fā)者必須在服務(wù)器端實(shí)現(xiàn)簽名的邏輯。

　　以上便是微信JS SDK的簽名邏輯部分，下面奉上具體的代碼實(shí)現(xiàn)：

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;//全局對(duì)象，每7200秒更新一次，微信對(duì)每日獲取Token有請(qǐng)求次數(shù)與時(shí)效限制
public static DateTime overTime = DateTime.Now;//用于Token的過(guò)期驗(yàn)證
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;
}
//生成簽名的時(shí)間戳
TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
accessToken.timestamp = Convert.ToInt64(ts.TotalSeconds).ToString();
//獲取隨機(jī)串
accessToken.noncestr = createNonceStr(16);
string str = "jsapi_ticket="+ accessToken .ticket+ "&noncestr="+ accessToken.noncestr + "&timestamp="+ accessToken.timestamp + "&url="+ url;
accessToken.signature = SHA1(str).ToLower();
accessToken.APPID = APPID;
return Json(accessToken, JsonRequestBehavior.AllowGet);
}
//生成隨機(jī)串
private string createNonceStr(int length = 16)
{
string str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
Random r = new Random();
string result = string.Empty;
//生成一個(gè)8位長(zhǎng)的隨機(jī)字符，具體長(zhǎng)度可以自己更改
for (int i = 0; i < length; i++)
{
int m = r.Next(0, 62);//這里下界是0，隨機(jī)數(shù)可以取到，上界應(yīng)該是62，因?yàn)殡S機(jī)數(shù)取不到上界，也就是最大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("-", "");
}
//通過(guò)GET請(qǐng)求獲取Token
private static WXInfo GETWinXinToken() {
//獲取access_token
HttpWebResponse 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_ticket
response = 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> 
/// 創(chuàng)建GET方式的HTTP請(qǐng)求 
/// </summary> 
/// <param name="url">請(qǐng)求的URL</param> 
/// <param name="timeout">請(qǐng)求的超時(shí)時(shí)間</param> 
/// <param name="userAgent">請(qǐng)求的客戶端瀏覽器信息，可以為空</param> 
/// <param name="cookies">隨同HTTP請(qǐng)求發(fā)送的Cookie信息，如果不需要身份驗(yàn)證可以為空</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信息的全局對(duì)象WXInfo.cs

namespace ManYiAbyWAP.Models
{
/// <summary>
/// 微信獲取Token返回參數(shù)類(lèi)
/// </summary>
public class WXInfo
{
public string APPID { get; set; }
public string access_token { get; set; }//access_token
public string expires_in { get; set; }//Token過(guò)期時(shí)間,7200秒內(nèi)有效
public string ticket { get; set; }//jsapi_ticket
public string errmsg { get; set; }
public int errcode { get; set; }
public string noncestr { get; set; }//生成簽名的隨機(jī)串
public string timestamp { get; set; }//生成簽名的時(shí)間戳
public string signature { get; set; }//簽名返回值
}
}

　　網(wǎng)頁(yè)端進(jìn)行初始化的JS代碼：

//微信JS SDK請(qǐng)求狀態(tài)
var requestStatus = 0;
function shareWX() {
if (requestStatus != 1) {
requestStatus = 1;//正在請(qǐng)求
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, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: jsonObjs.APPID, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: jsonObjs.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: jsonObjs.noncestr, // 必填，生成簽名的隨機(jī)串
signature: jsonObjs.signature,// 必填，簽名，見(jiàn)附錄1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
});
wx.ready(function () {
//alert("微信驗(yàn)證成功");
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
wx.checkJsApi({
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
], // 需要檢測(cè)的JS接口列表，所有JS接口列表見(jiàn)附錄2,
success: function (res) {
// 以鍵值對(duì)的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
wx.onMenuShareWeibo({
title: '滿藝網(wǎng)分享測(cè)試', // 分享標(biāo)題
desc: '滿藝網(wǎng)分享描述測(cè)試', // 分享描述
link: 'http://www.manyiaby.com', // 分享鏈接
imgUrl: 'http://www.manyiaby.com/img/logo_2.jpg', // 分享圖標(biāo)
success: function () {
// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
alert("分享成功");
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
alert("分享取消");
}
});
});
wx.error(function (res) {
//alert("微信驗(yàn)證失敗 res:"+res);
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});
requestStatus = 2;//請(qǐng)求完成
}
},
complete: function () {
window.setTimeout(function () {
requestStatus = 2;//請(qǐng)求完成
}, 300);
}
});
}

　　到這里關(guān)于微信分享JS SDK的使用就為大家介紹完畢，大家可以結(jié)合自己的需求進(jìn)行參考。一開(kāi)始已經(jīng)為大家介紹了，微信提供的分享JS SDK僅僅只是一個(gè)對(duì)于微信內(nèi)部瀏覽器的緩存處理，真正的分享還是需要我們點(diǎn)擊右上角的分享按鈕?！?/p>

　上面這些都不是太完美的手機(jī)web分享解決方法，最后給大家介紹一些Sosh社會(huì)化分享組件，當(dāng)我看到這個(gè)組件時(shí)，我就知道這是我需要的，簡(jiǎn)潔的界面，整好可以讓我們的網(wǎng)站看起來(lái)典雅舒服。好了，廢話不多說(shuō)，進(jìn)入主題：

以上所述是小編給大家介紹的手機(jī)Web APP如何實(shí)現(xiàn)分享多平臺(tái)功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: