以Asp.net MVC實現微信分享功能的流程詳解-微信開發-PHP中文網

首頁

微信小程式

微信開發

以Asp.net MVC實現微信分享功能的流程詳解

Y2J

Apr 27, 2017 pm 02:07 PM

內嵌在微信中的網頁，右上角都會有一個預設的分享功能。如下圖所示，第一個為自訂的效果，第二個為預設的效果。實現了自訂的分享連結是不是更讓人有點擊的慾望？下面講解下開發的過程。

一、準備，設定js介面安全網域

這需要使用微信的jssdk，先需要在微信公眾號後台進行設定：公眾號碼設定-->功能設定-->JS介面安全域名。打開這個頁面之後你會看到下面的提示。需要先下載這個檔案並上傳到指定網域的根目錄。

這個檔案裡面是一個字串，從名稱看是用來校驗用的。先上傳了這個文件，你才能儲存成功。這樣你就可以使用jssdk了。

二、前端設定

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

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

然後是進行設定：

wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: &#39;@Model.appId&#39;, // 必填，公众号的唯一标识
        timestamp: &#39;@Model.timestamp&#39;, // 必填，生成签名的时间戳
        nonceStr: &#39;@Model.nonceStr&#39;, // 必填，生成签名的随机串
        signature: &#39;@Model.signature&#39;,// 必填，签名，见附录1
        jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2    });

    wx.ready(function () {
        document.querySelector(&#39;#checkJsApi&#39;).onclick = function () {
            wx.checkJsApi({
                jsApiList: [            &#39;getNetworkType&#39;,            &#39;previewImage&#39;
                ],
                success: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };
　　　　//朋友圈        wx.onMenuShareTimeline({
            title: &#39;暖木科技&#39;, // 分享标题
            link: &#39;http://www.warmwood.com/home/lampindex&#39;, // 分享链接
            imgUrl: &#39;http://www.warmwood.com/images/s1.jpg&#39;,
            success: function (res) {
                alert(&#39;已分享&#39;);
            },
            cancel: function (res) {
                alert(&#39;已取消&#39;);
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });        //朋友        wx.onMenuShareAppMessage({
            title: &#39;暖木科技&#39;, // 分享标题
            desc: &#39;宝宝的睡眠很重要，你的睡眠也很重要&#39;, // 分享描述
            link: &#39;http://www.warmwood.com/home/lampindex&#39;, // 分享链接
            imgUrl: &#39;http://www.warmwood.com/images/s1.jpg&#39;, // 分享图标
            type: &#39;&#39;, // 分享类型,music、video或link，不填默认为link
            dataUrl: &#39;&#39;, // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {                // 用户确认分享后执行的回调函数
                alert("分享");
            },
            cancel: function () {                // 用户取消分享后执行的回调函数
                alert("取消分享");
            }
        });
    });

然後剩下就是後端的事情了。後端的關鍵是取得access_token和jsapi_ticket以及產生正確的簽章。另外如果要統計分享的數量，最好就是在success方法中進行統計了。

三、產生簽章

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物件如下。

{"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沒有提供，好吧先不吐槽了。官方也說明白簽名的規則。一開始我使用的是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);
        }