? ????? ??? ??? ???? ?? WeChat JSSDK? ???? WeChat ?? ? ??????? C# ?? ??? ?? ?????.

WeChat? ?? ? ?? JSSDK ?????? ???? ?? ??? ?? ? ?????? ? ?? WeChat ?????? ???? ? ??? ????? ??? ??? ?? ? ????. ?? ??, ????? ??? ??? ????? ???? ??? ??, GPS ??, QR ?? ?? ?? ?? ??? ?? ? ????. ? ????? ??? JSSDK ?????? ???? ??? ??? ???? ??? ?????. ??? ?????? ??? ??? ??? ???? ???? ???? ????? ??? ?? ?? ???? ?? ?? ??? ?? ?? ?????.

1. JSSDK ??

WeChat JS-SDK? WeChat ?? ????? ? ???? ?? ???? WeChat ??? ? ?? ?????. WeChat JS-SDK? ???? ? ???? WeChat? ???? ?? ??, ?? ??, ?? ??, ?? ? ??? ???? ??? ????? ??? ? ??? ??? ??, ?? ? WeChat ??? ??? ?? ??? ? ????. ??, ?? ? ??? ?? WeChat ????? ? ?? ? ??? ?????.

?? JSSDK?? ???? ????? ?????? ?? ?????, ?? ?????, ??? ?????, ??? ?????, ??? ?????, ?? ??, ??? ??, ???? ???, ????? ??, WeChat ??, WeChat ??? ?? ????. , WeChat ??, WeChat ?? ? ?? WeChat ??? ???? ? ?? ?????? ??? ?? ??? ?????.

WeChat ????? [??? ??] ??? ???? ??? ?? ?? JSSDK? ?? ?? ? ??? ? ? ????.

????? ? ?????? ???? ??? ? ? ????. ????? JSSDK? ?? ??? ????? ???? ???? ???? ? ????. ? ? ? ?, ???? ??? ??? ??? ?????.

1) JSSDK ?? ??

1??: ??? ?? ???

?? WeChat ?? ???? ????? "?? ?? ??"? "?? ??"?? ?????. "? ???? "JS ?????" "?? ??? ??"? ?????. ??? ?? ?? ???? ?????.

??: ??? ? "??? ??"?? ?? ????? ??? ??? ? ????.

2??: JS ?? ??

JS ?????? ???? ?? ???? ?? JS ??? ?????(https ??): http://res .wx.qq .com/open/js/jweixin-1.0.0.js

??? ???? ??? ???? ?? ?? http://res.wx.qq.com/open/? ??????. js/jweixin-1.1 .0.js

??: AMD/CMD ?? ?? ?? ??? ???? ??? ?????

?? ????? ? ?? ??? ?? ?? ???? ?????. JQuery ??? ????? ?? ?? ?? JS? ??? ?? ????. ?? WeUI? jquery-weui ??? ?????? ???? ?? ??? ??? ??? ?? ????. ??? ?? ??? JS ?????.

    <script src="~/Content/wechat/jquery-weui/lib/jquery-2.1.4.js"></script>
    <script src="~/Content/wechat/jquery-weui/js/jquery-weui.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

3??: ?? ?????? ?? ?? ?? ?? ??

JS-SDK? ???? ?? ?? ???? ?? ?? ??? ???? ???. ??? ??? ???? ????(??? URL?) URL? ???? SPA ? ?? URL? ??? ??? ??? ? ????. ?? Android WeChat ?????? pushState? ??? H5 ??? ???? ???? pushState? ???? ? ? ???? ???? ? ??? Android 6 .2?? ?????.

wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標(biāo)識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機(jī)串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2

});

? ??? JSSDK? ?????. ?? appid, timestamp ? nonceStr? ???? ???. ?? ????? ?? ?? ?? ???????. ??????? ??? ? ????. ?? ?? ???? JS ???? ???? ?? ?? ??? ????? ???.

?? ??? ?? ????? Asp.net ?? ???? ?? HTML ??? ??? ????.

<script language="javascript">
    var appid = &#39;@ViewBag.appid&#39;;
    var noncestr = &#39;@ViewBag.noncestr&#39;;
    var signature = &#39;@ViewBag.signature&#39;;
    var timestamp = &#39;@ViewBag.timestamp&#39;;

        wx.config({
            debug: false,
            appId: appid, // 必填，公眾號的唯一標(biāo)識
            timestamp: timestamp, // 必填，生成簽名的時間戳
            nonceStr: noncestr, // 必填，生成簽名的隨機(jī)串
            signature: signature, // 必填，簽名，見附錄1
            jsApiList: [
               &#39;checkJsApi&#39;,
               &#39;onMenuShareTimeline&#39;,
               &#39;onMenuShareAppMessage&#39;,
               &#39;onMenuShareQQ&#39;,
               &#39;onMenuShareWeibo&#39;,
               &#39;onMenuShareQZone&#39;,
               &#39;hideMenuItems&#39;,
               &#39;showMenuItems&#39;,
               &#39;hideAllNonBaseMenuItem&#39;,
               &#39;showAllNonBaseMenuItem&#39;,
               &#39;translateVoice&#39;,
               &#39;startRecord&#39;,
               &#39;stopRecord&#39;,
               &#39;onVoiceRecordEnd&#39;,
               &#39;playVoice&#39;,
               &#39;onVoicePlayEnd&#39;,
               &#39;pauseVoice&#39;,
               &#39;stopVoice&#39;,
               &#39;uploadVoice&#39;,
               &#39;downloadVoice&#39;,
               &#39;chooseImage&#39;,
               &#39;previewImage&#39;,
               &#39;uploadImage&#39;,
               &#39;downloadImage&#39;,
               &#39;getNetworkType&#39;,
               &#39;openLocation&#39;,
               &#39;getLocation&#39;,
               &#39;hideOptionMenu&#39;,
               &#39;showOptionMenu&#39;,
               &#39;closeWindow&#39;,
               &#39;scanQRCode&#39;,
               &#39;chooseWXPay&#39;,
               &#39;openProductSpecificView&#39;,
               &#39;addCard&#39;,
               &#39;chooseCard&#39;,
               &#39;openCard&#39;
            ]
        });

4??: Ready ????? ??? ?? ???? ??

wx.ready(function(){
    // config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，
    //則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

Ready ?????? ???? ????? ??? ?? ???? ???? ????. ????? Only? ??? ?? ??? ???? ???. ???? ??? ? ??, ?? ? ?? ??? ?? ?? ??? ??? ? ????.

?? ?? ???? ??? ? ?? GPS ?? ? ?? ??? ?? ? ??? ?? ?? JS ??? ??? ? ????.

wx.ready(function () {
            wx.getLocation({
                type: 'wgs84', // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
                    var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒計
                    var accuracy = res.accuracy; // 位置精度
                    $("#lblLoacation").text(latitude + "," + longitude);
                }
            });
        });

5??: ?? ?????? ?? ??? ?? ??

wx.error(function(res){
    // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看，
    // 也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});

? ?? ?????? ?? ??? ???? ??? ?????. ???? ????? ??? ?? ???? ??? ? ????.

2), ?? ????

簽名生成規(guī)則如下：參與簽名的字段包括noncestr（隨機(jī)字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當(dāng)前網(wǎng)頁的URL，不包含#及其后面部分） 。對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數(shù)名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進(jìn)行URL 轉(zhuǎn)義。

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

timestamp=1414587457

url=http://mp.weixin.qq.com?params=value

步驟1. 對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步驟2. 對string1進(jìn)行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。

2.簽名用的url必須是調(diào)用JS接口頁面的完整URL。

3.出于安全考慮，開發(fā)者必須在服務(wù)器端實現(xiàn)簽名的邏輯。

如出現(xiàn)invalid signature 等錯誤詳見附錄5常見錯誤及解決辦法。

以上就是JSSDK總體的使用流程，雖然看起來比較抽象，但是基本上也就是這些步驟了。

上面的過程是具體的參數(shù)處理邏輯，我們要對應(yīng)到C#代碼的簽名實現(xiàn)，需要對幾個變量進(jìn)行處理，下面是對應(yīng)的生成noncestr、timestamp、以及簽名等操作的代碼。

/// <summary>
        /// 生成時間戳，標(biāo)準(zhǔn)北京時間，時區(qū)為東八區(qū)，自1970年1月1日 0點(diǎn)0分0秒以來的秒數(shù)
        /// </summary>
        /// <returns>時間戳</returns>
        private static string GetTimeStamp()
        {
            TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
            return Convert.ToInt64(ts.TotalSeconds).ToString();
        }

        /// <summary>
        /// 生成隨機(jī)串，隨機(jī)串包含字母或數(shù)字
        /// </summary>
        /// <returns>隨機(jī)串</returns>
        private static string GetNonceStr()
        {
            return Guid.NewGuid().ToString().Replace("-", "");
        }

還有我們要實現(xiàn)JSSDK簽名的處理，必須先根據(jù)幾個變量，構(gòu)建好URL字符串，具體的處理過程，我們可以把它們逐一放在一個Hashtable里面，如下代碼所示。

/// <summary>
        /// 獲取JSSDK所需要的參數(shù)信息，返回Hashtable結(jié)合
        /// </summary>
        /// <param name="appId">微信AppID</param>
        /// <param name="jsTicket">根據(jù)Token獲取到的JSSDK ticket</param>
        /// <param name="url">頁面URL</param>
        /// <returns></returns>
        public static Hashtable GetParameters(string appId, string jsTicket, string url)
        {
            string timestamp = GetTimeStamp();
            string nonceStr = GetNonceStr();

            // 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序  
            string rawstring = "jsapi_ticket=" + jsTicket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url + "";

            string signature = GetSignature(rawstring);
            Hashtable signPackage = new Hashtable();
            signPackage.Add("appid", appId);
            signPackage.Add("noncestr", nonceStr);
            signPackage.Add("timestamp", timestamp);
            signPackage.Add("url", url);
            signPackage.Add("signature", signature);
            signPackage.Add("jsapi_ticket", jsTicket);
            signPackage.Add("rawstring", rawstring);

            return signPackage;
        }

我們注意到URL參數(shù)的字符串組合：

string rawstring = "jsapi_ticket=" + jsTicket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url + "";

這里我們拼接好URL參數(shù)后，就需要使用簽名的規(guī)則來實現(xiàn)簽名的處理了，簽名的代碼如下所示，注釋代碼和上面代碼等同。

/// <summary>
        /// 使用SHA1哈希加密算法生成簽名
        /// </summary>
        /// <param name="rawstring">待處理的字符串</param>
        /// <returns></returns>
        private static string GetSignature(string rawstring)
        {
            return FormsAuthentication.HashPasswordForStoringInConfigFile(rawstring, "SHA1").ToLower();

            ////下面和上面代碼等價
            //SHA1 sha1 = new SHA1CryptoServiceProvider();
            //byte[] bytes_sha1_in = System.Text.UTF8Encoding.Default.GetBytes(rawstring);
            //byte[] bytes_sha1_out = sha1.ComputeHash(bytes_sha1_in);
            //string signature = BitConverter.ToString(bytes_sha1_out);
            //signature = signature.Replace("-", "").ToLower();
            //return signature;
        }

這樣我們有了對應(yīng)的值后，我們就可以把它們的參數(shù)全部放在集合里面了供使用。

/// <summary>
        /// 獲取用于JS-SDK的相關(guān)參數(shù)列表（該方法對accessToken和JSTicket都進(jìn)行了指定時間的緩存處理，多次調(diào)用不會重復(fù)生成）
        /// 集合里面包括jsapi_ticket、noncestr、timestamp、url、signature、appid、rawstring
        /// </summary>
        /// <param name="appid">應(yīng)用ID</param>
        /// <param name="appSecret">開發(fā)者憑據(jù)</param>
        /// <param name="url">頁面URL</param>
        /// <returns></returns>
        public Hashtable GetJSAPI_Parameters(string appid, string appSecret, string url)
        {
            string accessToken = GetAccessToken(appid, appSecret);
            string jsTicket = GetJSAPI_Ticket(accessToken);

            return JSSDKHelper.GetParameters(appid, jsTicket, url);
        }

下面我們通過具體的代碼案例來介紹使用的過程。

2、簽到功能的實現(xiàn)處理

其實簽到，都可以在微信公眾號和企業(yè)號實現(xiàn)，微信的企業(yè)號可能實現(xiàn)更佳一些，不過他們使用JSSDK的接口操作是一樣的，我們可以拓展過去就可以了。這里介紹微信公眾號JSSDK實現(xiàn)簽到的功能處理。

簽到的功能，我們希望記錄用戶的GPS位置信息，還有就是利用拍照功能，拍一個照片同時上傳到服務(wù)器，這樣我們就可以實現(xiàn)整個業(yè)務(wù)效果了。

首先我們來設(shè)計簽到的界面，代碼及效果如下所示。

界面預(yù)覽效果如下所示：

我們來看看微信JSSDK里面對于【獲取地理位置接口】的說明：

wx.getLocation({
    type: 'wgs84', // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'
    success: function (res) {
        var latitude = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
        var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒計
        var accuracy = res.accuracy; // 位置精度
    }
});

以及圖形接口里面【拍照或從手機(jī)相冊中選圖接口】的說明：

wx.chooseImage({
    count: 1, // 默認(rèn)9
    sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
    sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
    }
});

上傳圖片到微信服務(wù)器接口如下所示。

wx.uploadImage({
    localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得
    isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
    success: function (res) {
        var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
    }
});

備注：上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務(wù)器，此處獲得的 serverId 即 media_id。

根據(jù)這幾個接口，我們來對它們進(jìn)行包裝，以實現(xiàn)我們的業(yè)務(wù)需求。根據(jù)我們的需要，我們對JSSDK接口進(jìn)行了調(diào)用，如下所示。

<script language="javascript">
    var appid = &#39;@ViewBag.appid&#39;;
    var noncestr = &#39;@ViewBag.noncestr&#39;;
    var signature = &#39;@ViewBag.signature&#39;;
    var timestamp = &#39;@ViewBag.timestamp&#39;;

        wx.config({
            debug: false,
            appId: appid, // 必填，公眾號的唯一標(biāo)識
            timestamp: timestamp, // 必填，生成簽名的時間戳
            nonceStr: noncestr, // 必填，生成簽名的隨機(jī)串
            signature: signature, // 必填，簽名，見附錄1
            jsApiList: [
               &#39;checkJsApi&#39;,
               &#39;chooseImage&#39;,
               &#39;previewImage&#39;,
               &#39;uploadImage&#39;,
               &#39;downloadImage&#39;,
               &#39;getNetworkType&#39;,
               &#39;openLocation&#39;,
               &#39;getLocation&#39;
            ]
        });

        wx.ready(function () {
            wx.getLocation({
                type: &#39;wgs84&#39;, // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入&#39;gcj02&#39;
                success: function (res) {
                    var latitude = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
                    var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒計
                    var accuracy = res.accuracy; // 位置精度
                    $("#lblLoacation").text(latitude + "," + longitude);

                    //解析坐標(biāo)地址
                    var location = latitude + "," + longitude;
                    $.ajax({
                        type: &#39;GET&#39;,
                        url: &#39;/JSSDKTest/GetAddress?location=&#39; + location,
                        //async: false, //同步
                        //dataType: &#39;json&#39;,
                        success: function (json) {
                            $("#lblAddress").text(json);
                        },
                        error: function (xhr, status, error) {
                            $.messager.alert("提示", "操作失敗" + xhr.responseText); //xhr.responseText
                        }
                    });
                }
            });
            wx.getNetworkType({
                success: function (res) {
                    var networkType = res.networkType; // 返回網(wǎng)絡(luò)類型2g，3g，4g，wifi
                    $("#lblNetwork").text(networkType);
                }
            });
            
            chooseImage();
        });
    </script>

其中的chooseImage()是我們在頁面開始的時候，讓用戶拍照的操作，具體JS代碼如下所示。

//拍照顯示
        var localIds;
        function chooseImage() {
            wx.chooseImage({
                count: 1, // 默認(rèn)9
                sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
                sourceType: ['camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
                success: function (res) {
                    localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
                    $("#imgUpload").attr("src", localIds);
                }
            });
        }

但用戶使用攝像頭拍照后，就會返回一個res.localIds集合，因為我們拍照一個，那么可以把它直接賦值給圖片對象，讓它顯示當(dāng)前拍照的圖片。

拍照完成，我們單擊【簽到】應(yīng)該把圖片和相關(guān)的坐標(biāo)等信息上傳到服務(wù)器的，圖片首先是保存在微信服務(wù)器的，上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務(wù)器，此處獲得的 serverId 即 media_id。

為了實現(xiàn)我們自己的業(yè)務(wù)數(shù)據(jù)，我們需要把圖片集相關(guān)信息存儲在自己的服務(wù)器，這樣才可以實現(xiàn)信息的保存，最后提示【簽到操作成功】，具體過程如下所示。

//上傳圖片
        var serverId;
        function upload() {
            wx.uploadImage({
                localId: localIds[0],
                success: function (res) {
                    serverId = res.serverId;

                    //提交數(shù)據(jù)到服務(wù)器

                    //提示信息
                    $.toast("簽到操作成功");
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        }

另外，我們?yōu)榱藢崿F(xiàn)單擊圖片控件，實現(xiàn)重新拍照的操作，以及簽到的事件處理，我們對控件的單擊處理進(jìn)行了綁定，如下代碼所示。

document.querySelector('#imgUpload').onclick = function () {
            chooseImage();
        };

        $(document).on("click", "#btnSignIn", function () {
            if (localIds == undefined || localIds== null) {
                $.toast('請先拍照', "forbidden");
                return;
            }
            //調(diào)用上傳圖片獲得媒體ID
            upload();
        });

? ??? WeChat JSSDK? ???? ??? ??? ???? ?? C#? ???? WeChat ?? ? ?????? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!