微信公眾號自定義分享功能

一.測試微信公眾號接入自己的系統

寫個后台接入的方法

[HttpGet]
        public string Validate(string signature,string timestamp,string nonce,string echostr)
        {
            //1. 將token、timestamp、nonce三個參數進行字典序排序
            string[] arr = {timestamp, nonce, WeChatUtil.Token};
            Array.Sort(arr);
            //2. 將三個參數字符串拼接成一個字符串進行sha1加密
            StringBuilder sb = new StringBuilder();
            foreach (var temp in arr)
            {
                sb.Append(temp);
            }

            string sha1 = EncryptionSha1.EncryptString(sb.ToString()).ToLower();
            if (sha1.Equals(signature))
            {
                //接入成功
                Trace.WriteLine("接入成功");
                return echostr;
            }
            //接入失敗
            return null;

        }

注意:

1.這個方法必須是get請求

2.微信調用這個方法會自動傳入四個參數

3.通過token(公眾號配置中的token),和傳入的timestamp,nonce三個參數,字典排序,然后sha1加密

4.加密結果就應該等於微信傳入的第一個signature參數

5.判斷加密結果和signature,如果相同,表示接入成功,將微信傳入的第四個參數源樣返回.如果不同,返回null,就表示接入失敗

然后將這個方法地址填寫到微信接入配置的URL中,和用到token也配置進去

二.使用微信JS-SDK

JSSDK中的wx.config需要幾個參數,需要后台返回給它,

[HttpGet]
        public void GetSignature(string url,string callback)
        {
            var appid = WeChatUtil.AppId;
            var timeStamp = WeChatUtil.GetTimeStamp();
            var nonceStr = WeChatUtil.GetNonceStr();
            var signature = WeChatUtil.GetSignature(timeStamp, nonceStr, url);
            var obj = JsonConvert.SerializeObject(new {appid = appid, timeStamp = timeStamp , nonceStr = nonceStr, signature= signature });
            var jsonp = $"{callback}({obj})";
            HttpContext.Response.ContentType= "application/json";
            HttpContext.Response.Write(jsonp);
        }

1,返回appid.

2.返回timestamp,這個就是后台生成個時間戳就行

3.返回nonceStr,隨便生成一個隨機字符串就可以

4.返回簽名signature 比較復雜,看下面代碼

public static string GetSignature(string timestamp,string nonceStr,string url)
        {
            string str =
                $"jsapi_ticket={GetJsApiTicket()}" +
                $"&noncestr={nonceStr}" +
                $"&timestamp={timestamp}" +
                $"&url={url}";
            return EncryptionSha1.EncryptStringSha1(str).ToLower();
        }

public static string GetJsApiTicket()
        {
            string ticket;
            ICacheManager cache = new MemoryCacheManager();
            var contains = cache.Contains("js_api_ticket");
            if (contains)
            {
                ticket =cache.GetCache<string>("js_api_ticket");
            }
            else
            {
                var httpGet = HttpHelper.HttpGet(GetTicketUrl(), "");
                var jsApiTicketModel = JsonConvert.DeserializeObject<JsApiTicketModel>(httpGet);
                if (jsApiTicketModel.errcode == 0)
                {
                    ticket = jsApiTicketModel.ticket;
                    long expiresIn = jsApiTicketModel.expires_in;
                    cache.SetCache("js_api_ticket", ticket,TimeSpan.FromSeconds(expiresIn-60));
                }
                else
                {
                    ticket = null;
                }
            }

//            var httpGet = HttpHelper.HttpGet(GetTicketUrl(), "");
//            var jsApiTicketModel = JsonConvert.DeserializeObject<JsApiTicketModel>(httpGet);
//            ticket = jsApiTicketModel.errcode == 0 ? jsApiTicketModel.ticket : null;

            return ticket;
        }

        private static string GetTicketUrl()
        {
            string url = $"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={GetAccessToken()}&type=jsapi";
            return url;
        }

public static string GetAccessToken()
        {
            string accessToken;
            ICacheManager cache = new MemoryCacheManager();
            var contains = cache.Contains("access_token");
            if (contains)
            {
                accessToken = cache.GetCache<string>("access_token");
            }
            else
            {
                var result = HttpHelper.HttpGet(GetAccessTokenUrl(), "");
                var accessTokenModel = JsonConvert.DeserializeObject<AccessTokenModel>(result);
                accessToken = accessTokenModel.access_token;
                long expiresIn = accessTokenModel.expires_in;
                cache.SetCache("access_token", accessToken,TimeSpan.FromSeconds(expiresIn-60));
            }
            return accessToken;
        }

說明,順序就是生成簽名 --> 依賴JsApiTicket--->依賴TickertUrl --> GetAccessToken

然后將這四個值傳給wx.config

三,前端JS

var secure_domain='http://www.taekwondoshow.com';//微信js SDK安全域名
var url_str = window.location.href;
var wx_baseUrl='http://q6m89n.natappfree.cc/';
/**
 * 全局分享調用
 */

$(function(){
    get_signature();
})
function get_signature() {
    $.ajax({
        type: "GET",
        url:  wx_baseUrl + "/Wechat/Login_Service/_wxSign?jsoncallback=?",
        data: { url: url_str },
        cache: false,
        dataType: "jsonp",
        success: function (data) {
            var result = eval('(' + data + ')');
            if(result.code ==200){
                try{
                    wx_config(result.data.appid, result.data.timestamp, result.data.noncestr, result.data.sign);
                }catch(e){
                    console.log(e);
                }
            }
         
        },
        error: function () {
            console.log("配置參數錯誤!");
        }

    });
}

function wx_config(appid, timestamp, nonceStr, signature) {
    //通過config接口注入權限驗證配置
    wx.config({
        debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        appId: appid, // 必填，公眾號的唯一標識
        timestamp: timestamp, // 必填，生成簽名的時間戳
        nonceStr: nonceStr, // 必填，生成簽名的隨機串
        signature: signature, // 必填，簽名
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','hideMenuItems'] // 必填，需要使用的JS接口列表
    });
}

wx.ready(function () {
    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
    wx.onMenuShareAppMessage({ 
        title: '自定義標題', // 分享標題
        desc: '自定義描述', // 分享描述
        link: secure_domain+'/error401.html', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: secure_domain+'/asset/images/erweima.png', // 分享圖標
        success: function () {
          // 設置成功
        }
    });

    wx.onMenuShareTimeline({ 
        title: '朋友圈標題', // 分享標題
        link: secure_domain+'/error401.html',  // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: secure_domain+'/asset/images/erweima.png', // 分享圖標
        success: function () {
          // 設置成功
        }
    });

    wx.hideMenuItems({
        menuList:[ "menuItem:share:qq", 
                    "menuItem:share:weiboApp",
                    "menuItem:favorite",
                    "menuItem:share:facebook",
                    "menuItem:share:QZone",
                    "menuItem:editTag",
                    "menuItem:delete",
                    "menuItem:copyUrl",
                    "menuItem:originPage",
                    "menuItem:openWithQQBrowser",
                    "menuItem:openWithSafari",
                    "menuItem:share:email",
                    "menuItem:share:brand"
                ]
    })


});

注意:坑1--分享接口中的link和imgurl必須是微信配置中的JS安全域名下的網址

坑2 ---文檔說'onMenuShareAppMessage', 'onMenuShareTimeline'這兩個接口即將作廢,讓用兩個新的 

但新的有很多問題,IOS可以分享,安卓不行

---

記錄下我參考的教程

https://www.jianshu.com/p/443c905e58a3

https://www.jianshu.com/p/b3c4450f845e