【微信開發】【Asp.net MVC】-- 微信分享功能

時間  2019-11-16
標籤 微信開發 Asp.net MVC 微信 分享 功能 欄目 ASP 简体版
原文   原文鏈接

內嵌在微信中的網頁，右上角都會有一個默認的分享功能。以下圖所示，第一個爲自定義的效果，第二個爲默認的效果。實現了自定義的分享連接是否是更讓人有點擊的慾望？下面講解下開發的過程。html

1、準備，設置js接口安全域名

這須要使用微信的jssdk，先須要在微信公衆號後臺進行設置：公衆號設置-->功能設置-->JS接口安全域名。打開這個頁面以後你會看到下面的提示。須要先下載這個文件並上傳到指定域名的根目錄。前端

這個文件裏面是一個字符串，從名稱看是用來校驗用的。先上傳了這個文件，你才能保存成功。這樣你就可使用jssdk了。git

 2、前端配置

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

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

根據官方的配置參數，咱們能夠定義一個WXShareModel對象:後端

   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);

        }
    }

而後是進行配置：api

wx.config({
        debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
        appId: '@Model.appId', // 必填，公衆號的惟一標識
        timestamp: '@Model.timestamp', // 必填，生成簽名的時間戳
        nonceStr: '@Model.nonceStr', // 必填，生成簽名的隨機串
        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: '暖木科技', // 分享標題
            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: '暖木科技', // 分享標題
            desc: '寶寶的睡眠很重要，你的睡眠也很重要', // 分享描述
            link: 'http://www.warmwood.com/home/lampindex', // 分享連接
            imgUrl: 'http://www.warmwood.com/images/s1.jpg', // 分享圖標
            type: '', // 分享類型,music、video或link，不填默認爲link
            dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
            success: function () {
                // 用戶確認分享後執行的回調函數
                alert("分享");
            },
            cancel: function () {
                // 用戶取消分享後執行的回調函數
                alert("取消分享");
            }
        });
    });

而後剩下就是後端的事情了。後端的關鍵是獲取access_token和jsapi_ticket以及生成正確的簽名。另外若是要統計分享的數量，最好就是在success方法中進行統計了。緩存

3、生成簽名

1.access_token 

獲取access_token方法全平臺都是一致的。安全

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的超時時間是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對象以下。app

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

因此能夠定義一個模型：

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過時時間也是7200秒，而且不能頻繁的請求，因此也須要再服務端緩存起來。

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

MemoryCacheManager：

View Code

3.簽名

終於到這一步了，而後你在文檔中看到讓你失望的一幕：

麼有C#的demo，支付那邊都提供了，爲啥jssdk沒有提供，好吧先不吐槽了。官方也說明白簽名的規則。一開始我使用的是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;
        }//錯誤示例

得出的結果和官方校驗的不一致，一直提示簽名錯誤。

 

 正確的寫法是：

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;  
        }

和官方校驗的結果一直後，就ok了（忽略大小寫）。另一個須要注意的地方是簽名中的url。若是頁面有參數，model中的url也須要帶參數，#號後面的不要。否則也是會報簽名錯誤。

 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);
        }

4、小結

wx.config中的debug爲true會alert各類操做結果。參數正確以後界面會提示：

 

至此，分享的功能就ok了。也就打開了調用其餘jssdk的大門。另外文中的SendHelp對象是用的Senparc (基於.net4.5)的dll。

參考資料：

簽名校驗：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

官方文檔：https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

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