【微信開發】-- 微信分享功能（分享到朋友和朋友圈顯示圖片和簡介）

想在微站里面實現分享帖子給朋友和朋友圈，顯示圖片和簡介，就這么簡單的功能折騰了1星期。。。主要是微信官方文檔沒看清楚，怪自己了。

官方文檔在這里，https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

參考 http://www.cnblogs.com/stoneniqiu/p/6286599.html 這篇文章。

遇到invalid signature簽名錯誤。找了半天，各種調試，終於找到問題了，每個新聞的id是變動的，

url需要傳入完整的地址，在微信官方手冊里面查到的。

比如頁面是http://www.baidu.com/wx.aspx?id=111,需要完整傳入，不能僅僅在url里面傳入http://www.baidu.com/wx.aspx

下面是 stoneniqiu  的具體做法，大家可以參考一下。

 

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

一、准備，設置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: '@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方法中進行統計了。

三、生成簽名

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：

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

四、小結

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

 

我的核心代碼

[System.Web.Services.WebMethod]
    public static WXShareModel GetKey(string str)
    {
        WXShareModel aModel = new WXShareModel();
        WXToolsHelper tb = new WXToolsHelper();
        string AppId = "你的APPID";
        string secret = "你的secret";
        string access_token = tb.GetAccess_Token(AppId, secret);
        aModel.appId = AppId;
        aModel.nonceStr = tb.CreatenNonce_str();
        aModel.timestamp = tb.CreatenTimestamp();
        aModel.ticket = tb.GetTicket(access_token);
        aModel.url = str;
        aModel.MakeSign();
        return aModel;
    }
public class WXShareModel
    {
        public string appId { get; set; }
        public string nonceStr { get; set; }
        public long timestamp { get; set; }
        public string ticket { get; set; }
        public string url { get; set; }
        public string signature { 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 = Sha1(string1, Encoding.Default);
        }
 public static string Sha1(string orgStr, Encoding encode)
        {
            SHA1CryptoServiceProvider 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;
        }
public class WXToolsHelper
    {
        /// <summary>
        /// 獲取全局的access_token,程序緩存
        /// </summary>
        /// <param name="AppId">第三方用戶唯一憑證</param>
        /// <param name="AppSecret">第三方用戶唯一憑證密鑰，即appsecret</param>
        /// <returns>得到的全局access_token</returns>
        public string GetAccess_Token(string AppId, string AppSecret)
        {
            try
            {
                //先查緩存數據
                if (HttpContext.Current.Cache["access_token"] != null)
                {
                    return HttpContext.Current.Cache["access_token"].ToString();
                }
                else
                {
                    return GetToken(AppId, AppSecret);
                }
            }
            catch
            {
                return GetToken(AppId, AppSecret);
            }
        }

        /// <summary>
        /// 獲取全局的access_token
        /// </summary>
        /// <param name="AppId">第三方用戶唯一憑證</param>
        /// <param name="AppSecret">第三方用戶唯一憑證密鑰，即appsecret</param>
        /// <returns>得到的全局access_token</returns>
        public string GetToken(string AppId, string AppSecret)
        {
            var client = new System.Net.WebClient();
            client.Encoding = System.Text.Encoding.UTF8;
            var url = string.Format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}", AppId, AppSecret);
            var data = client.DownloadString(url);
            var jss = new JavaScriptSerializer();
            var access_tokenMsg = jss.Deserialize<Dictionary<string, object>>(data);
            //放入緩存中
            HttpContext.Current.Cache.Insert("access_token", access_tokenMsg["access_token"], null, DateTime.Now.AddSeconds(7100), TimeSpan.Zero, CacheItemPriority.Normal, null);

            //清除jsapi_ticket緩存
            HttpContext.Current.Cache.Remove("ticket");

            //獲取jsapi_ticket,為了同步
            GetTicket(access_tokenMsg["access_token"].ToString());

            return access_tokenMsg["access_token"].ToString();
        }


        /// <summary>
        /// 獲取jsapi_ticket,程序緩存
        /// </summary>
        /// <param name="access_token">全局的access_token</param>
        /// <returns>得到的jsapi_ticket</returns>
        public string GetJsapi_Ticket(string access_token)
        {
            try
            {
                //先查緩存數據
                if (HttpContext.Current.Cache["ticket"] != null)
                {
                    return HttpContext.Current.Cache["ticket"].ToString();
                }
                else
                {
                    return GetTicket(access_token);
                }
            }
            catch
            {
                return GetTicket(access_token);
            }
        }


        /// <summary>
        /// 獲取jsapi_ticket
        /// </summary>
        /// <param name="access_token">全局的access_token</param>
        /// <returns>得到的jsapi_ticket</returns>
        public string GetTicket(string access_token)
        {
            var client = new System.Net.WebClient();
            client.Encoding = System.Text.Encoding.UTF8;
            var url = string.Format("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi", access_token);
            var data = client.DownloadString(url);
            var jss = new JavaScriptSerializer();
            var ticketMsg = jss.Deserialize<Dictionary<string, object>>(data);
            try
            {
                //放入緩存中
                HttpContext.Current.Cache.Insert("ticket", ticketMsg["ticket"], null, DateTime.Now.AddSeconds(7100), TimeSpan.Zero, CacheItemPriority.Normal, null);
                return ticketMsg["ticket"].ToString();
            }
            catch (Exception ex)
            {
                return ex.Message;
            }
        }

        /// <summary>
        /// 微信權限簽名的 sha1 算法
        /// 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同
        /// </summary>
        /// <param name="jsapi_ticket">獲取到的jsapi_ticket</param>
        /// <param name="noncestr">生成簽名的隨機串</param>
        /// <param name="timestamp">生成簽名的時間戳</param>
        /// <param name="url">簽名用的url必須是調用JS接口頁面的完整URL</param>
        /// <returns></returns>
        public string GetShal(string jsapi_ticket, string noncestr, long timestamp, string url)
        {
            string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);
            return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
        }

        /// <summary>
        /// 微信權限簽名( sha1 算法 )
        /// 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同
        /// </summary>
        /// <param name="AppId">第三方用戶唯一憑證</param>
        /// /// <param name="AppSecret">第三方用戶唯一憑證密鑰，即appsecret</param>
        /// <param name="noncestr">生成簽名的隨機串</param>
        /// <param name="timestamp">生成簽名的時間戳</param>
        /// <param name="url">簽名用的url必須是調用JS接口頁面的完整URL</param>
        /// <returns></returns>
        public string Get_Signature(string AppId, string AppSecret, string noncestr, long timestamp, string url)
        {
            string access_token = GetAccess_Token(AppId, AppSecret); //獲取全局的access_token
            string jsapi_ticket = GetJsapi_Ticket(access_token); //獲取jsapi_ticket

            string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);
            return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
        }


        /// <summary>
        /// 微信權限簽名( sha1 算法 )
        /// 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同
        /// </summary>
        /// <param name="AppId">第三方用戶唯一憑證</param>
        /// /// <param name="AppSecret">第三方用戶唯一憑證密鑰，即appsecret</param>
        /// <param name="noncestr">生成簽名的隨機串</param>
        /// <param name="timestamp">生成簽名的時間戳</param>
        /// <param name="url">簽名用的url必須是調用JS接口頁面的完整URL</param>
        /// <returns></returns>
        public void signatureOut(string AppId, string AppSecret, string noncestr, long timestamp, string url, out string access_token, out string jsapi_ticket, out string signature)
        {
            access_token = GetAccess_Token(AppId, AppSecret); //獲取全局的access_token

            jsapi_ticket = GetJsapi_Ticket(access_token); //獲取jsapi_ticket

            string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);

            signature = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
        }

        private string[] strs = new string[]
{
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
};
        /// <summary>
        /// 創建隨機字符串 
        /// </summary>
        /// <returns></returns>
        public string CreatenNonce_str()
        {
            Random r = new Random();
            var sb = new StringBuilder();
            var length = strs.Length;
            for (int i = 0; i < 15; i++)
            {
                sb.Append(strs[r.Next(length - 1)]);
            }
            return sb.ToString();
        }


        /// <summary>
        /// 創建時間戳 
        /// </summary>
        /// <returns></returns>
        public long CreatenTimestamp()
        {
            return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
        }


    }

 

 

前段調用

var strUrl = location.href.split('#')[0];
$.ajax({
    type: "Post",
    url: "config.aspx/GetKey",
    //方法傳參的寫法一定要對，strUrl為形參的名字    
    data: "{'str':'" + strUrl + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        //返回的數據用data.d獲取內容    
        $("#wx-share-sign").val(data.d.signature);
        wxconifg(data.d);
    },
    error: function (err) {
        alert('55');
    }
});
function wxconifg(WXDate) {
    wx.config({
        debug: false,
        appId: '你的APPID',
        timestamp: WXDate.timestamp,
        nonceStr: WXDate.nonceStr,
        signature: WXDate.signature,
        jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"]
    });
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: $("#wx-share-title").val(),
            desc: $("#wx-share-desc").val(),
            link: strUrl,
            imgUrl: $("#wx-share-img").val(),
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: 'XX新聞|'+$("#wx-share-desc").val(),
            desc: $("#wx-share-desc").val(),
            link: $("#wx-share-link").val(),
            imgUrl: $("#wx-share-img").val(),
            type: 'link',
            dataUrl: strUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
    });
}