小編給大家分享一下如何實(shí)現(xiàn)微信分享功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為佳縣企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站，佳縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

內(nèi)嵌在微信中的網(wǎng)頁，右上角都會(huì)有一個(gè)默認(rèn)的分享功能。如下圖所示，第一個(gè)為自定義的效果，第二個(gè)為默認(rèn)的效果。實(shí)現(xiàn)了自定義的分享鏈接是不是更讓人有點(diǎn)擊的欲望？下面講解下開發(fā)的過程。

一、準(zhǔn)備，設(shè)置js接口安全域名

這需要使用微信的jssdk，先需要在微信公眾號(hào)后臺(tái)進(jìn)行設(shè)置：公眾號(hào)設(shè)置-->功能設(shè)置-->JS接口安全域名。打開這個(gè)頁面之后你會(huì)看到下面的提示。需要先下載這個(gè)文件并上傳到指定域名的根目錄。

這個(gè)文件里面是一個(gè)字符串，從名稱看是用來校驗(yàn)用的。先上傳了這個(gè)文件，你才能保存成功。這樣你就可以使用jssdk了。

二、前端配置

首先要說明的是分享功能是一個(gè)配置功能，綁定在按鈕的click事件中是沒有效果的。也就是說只有點(diǎn)擊右上角的分享才有效果(有的文字內(nèi)容分享不知道是怎么實(shí)現(xiàn)的)。官方的js有四個(gè)步驟，首先是引入jssdk：

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

根據(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出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過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<TokenResult>(null, url, null, CommonJsonSendType.GET);            return res;
        }

access_token的超時(shí)時(shí)間是7200秒，所以先可以緩存起來。SendHelp文章末尾可下載

2.獲取jsapi_ticket

access_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<jsapiTicketModel>(accessToken, url, "", CommonJsonSendType.GET);
        }

ticket過期時(shí)間也是7200秒，并且不能頻繁的請(qǐng)求，所以也需要再服務(wù)端緩存起來。

 private void setCacheTicket(string cache)
        {
            _cacheManager.Set(tokenKey, cache, 7200);
        }

MemoryCacheManager：

View Code

3.簽名

終于到這一步了，然后你在文檔中看到讓你失望的一幕：

么有C#的demo，支付那邊都提供了，為啥jssdk沒有提供，好吧先不吐槽了。官方也說明白簽名的規(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。如果頁面有參數(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。

以上是“如何實(shí)現(xiàn)微信分享功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：如何實(shí)現(xiàn)微信分享功能
分享路徑：http://www.chinadenli.net/article32/pejipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、電子商務(wù)、網(wǎng)站建設(shè)、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)