手機web如何實現多平臺分享

時間  2019-11-19
標籤 手機 web 如何 實現 多平臺 分享 欄目 HTML 简体版
原文   原文鏈接

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

　　對於經常使用的社交平臺咱們基本能夠經過超連接的方式進行內容分享，固然微信除外，微信不支持這種分享方式，這種分享方式能夠便於咱們自定義分享，而且使用起來很是的方便。html

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
        };
        //分享到QQ
        var 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代碼，咱們只須要在頁面須要分享的位置進行一下調用便可。固然還有不少平臺，同樣支持這種形式的分享內容，各位小夥伴本身去摸索吧，這裏咱們再也不一一贅述。java

　　下面介紹一些微信分享：node

　　一開始咱們便說道微信內置的瀏覽器右上角帶有分享功能，這也致使咱們在本身的網頁上沒法直接分享到微信的朋友圈，而微信爲咱們提供了一個用於微信自定義分享的JS SDK，小夥伴是否是已經按耐不住本身的激情了，下面咱們來先簡單看一這個JS SDK爲什麼物？微信官方提供的文檔到時挺詳細，可是想要開發JS SDK咱們首先須要一個微信公衆號，而後咱們點擊「接口權限」能夠查看到咱們所擁有的權限，以下：python

　　

　　對於上面這些基本的東西就不在多說，下面咱們重點看一下如何獲取jsapi_ticket，如何進行簽名。官方文檔提示的步驟是，先獲取access_token，而後經過access_token來獲取jsapi_ticket，最後經過jsapi_ticket進行簽名。下面咱們就一步一步完成上面的工做。注：官方提供了php、java、python、nodejs的實例程序，這裏我將以C#爲例爲你們結束如何完成上面的操做。web

　　第一步、獲取access_tokenajax

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

　　

　　第二步獲取jsapi_ticketjson

　　官方文檔是這樣說的：jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常狀況下，jsapi_ticket的有效期爲7200秒，經過access_token來獲取。因爲獲取jsapi_ticket的api調用次數很是有限，頻繁刷新jsapi_ticket會致使api調用受限，影響自身業務，開發者必須在本身的服務全局緩存jsapi_ticket 。api

　　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 + "&timestamp="+ 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請求獲取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>   
        /// 建立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_token
        public string expires_in { get; set; }//Token過時時間,7200秒內有效

        public string ticket { get; set; }//jsapi_ticket
        public 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,// 必填，簽名，見附錄1
                            jsApiList: [
                                '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社會化分享組件，當我看到這個組件時，我就知道這是我須要的，簡潔的界面，整好可讓咱們的網站看起來典雅舒服。好了，廢話很少說，進入主題：

　　

　　如何使用呢？咱們只須要在頁面引入便可，這裏我爲你們提供一個精簡版下載連接，方便你們的開發使用，集成很是方便。

　　ok，今天關於網頁社會化分享的內容就爲你們介紹完了，若有不當之處，還望斧正。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程