This article describes the introduction of C# development of WeChat portals and applications using WeChat JSSDK to implement the check-in function

As WeChat gradually opens more JSSDK interfaces, we can use custom web pages ways to call more WeChat interfaces to achieve our richer interface functions and effects. For example, we can call various mobile phone hardware on the page to obtain information, such as camera photography, GPS information, scanning QR codes, etc. This book This article introduces how to use these JSSDK interfaces to implement the check-in function, where check-in requires reporting geographical coordinates and addresses, calling the camera to take pictures in real time, and obtaining relevant information about the current user, etc.

1. Description of JSSDK

WeChat JS-SDK is a web development toolkit based on WeChat provided by WeChat public platform for web developers. By using WeChat JS-SDK, web developers can use WeChat to efficiently use the capabilities of mobile phone systems such as taking pictures, selecting pictures, voice, and location. At the same time, they can directly use WeChat's unique capabilities such as sharing, scanning, coupons, and payment. , providing WeChat users with a better web experience.

The interface categories currently supported by JSSDK include the following categories: basic interface, sharing interface, image interface, audio interface, intelligent interface, device information, geographical location, shake peripherals, interface operation, WeChat scan , WeChat store, WeChat coupons, WeChat payment, with the integration of all WeChat functions, it is estimated that more interfaces will be opened one after another.

Enter the [Developer Documentation] module in the WeChat backend, and we can see the functional classification and introduction of the corresponding JSSDK, as shown below.

From the right side, we can see the usage instructions of each interface in detail. Basically, the usage methods of JSSDK are similar, so you can pass the debugging and master one or two of them, and the others Just follow the instructions and follow them.

1) Steps to use JSSDK

Step 1: Bind domain name

First log in to the WeChat public platform and enter the "Function Settings" of "Official Account Settings" to fill in the "JS Interface" "Secure Domain Name". As shown below, set it up on the public platform.

#Note: After logging in, you can view the corresponding interface permissions in the "Developer Center".

Step 2: Introduce JS files

Introduce the following JS files on the page that needs to call the JS interface (https is supported): http://res.wx.qq .com/open/js/jweixin-1.0.0.js

If you need to use the shake peripheral function, please introduce http://res.wx.qq.com/open/js/jweixin-1.1 .0.js

Note: Supports loading using AMD/CMD standard module loading method

Of course, we generally edit the page. In order to facilitate more effects, other JS may be introduced. Such as JQuery class library and so on. In addition, we can also implement richer functions based on WeUI's jquery-weui class library. The following is the JS reference in our case code.

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

Step 3: Inject permission verification configuration through the config interface

All pages that need to use JS-SDK must first inject configuration information, otherwise it will not be called (the same URL only needs to be called once, The web app of the SPA that changes the URL can be called every time the URL changes. Currently, the Android WeChat client does not support the new H5 feature of pushState, so using pushState to implement the web app page will cause the signature to fail. This problem will occur in Android 6 .2).

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

});

The above configuration is the core of JSSDK. It needs to configure the corresponding appid, timestamp, and nonceStr. There is nothing special about it. The most noteworthy thing is the implementation mechanism of signature, so that we can do it in the background. Just generate the corresponding value and assign it to the JS page. This is also the safest approach.

The following code is the HTML code in the Asp.net view page in our actual project, as shown below.

<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, // 必填，公眾號的唯一標識
            timestamp: timestamp, // 必填，生成簽名的時間戳
            nonceStr: noncestr, // 必填，生成簽名的隨機串
            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;
            ]
        });

Step 4: Successful verification through ready interface processing

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

This ready interface is the processing content after the page is successfully loaded. Generally, we need to do a lot of operations, including Only after the page is loaded can the relevant objects be called for assignment, processing and other operations.

For example, after the page is ready, we can use the following JS code to obtain the corresponding GPS coordinates and other operations.

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

Step 5: Handle failed verification through the error interface

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

This error interface is also used to process exception information. Under normal circumstances, users can be prompted here for errors.

2), signature algorithm

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

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

timestamp=1414587457

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

步驟1. 對所有待簽名參數按照字段名的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進行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

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

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

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

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

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

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

/// <summary>
        /// 生成時間戳，標準北京時間，時區(qū)為東八區(qū)，自1970年1月1日 0點0分0秒以來的秒數
        /// </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>
        /// 生成隨機串，隨機串包含字母或數字
        /// </summary>
        /// <returns>隨機串</returns>
        private static string GetNonceStr()
        {
            return Guid.NewGuid().ToString().Replace("-", "");
        }

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

/// <summary>
        /// 獲取JSSDK所需要的參數信息，返回Hashtable結合
        /// </summary>
        /// <param name="appId">微信AppID</param>
        /// <param name="jsTicket">根據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();

            // 這里參數的順序要按照 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參數的字符串組合：

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

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

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

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

/// <summary>
        /// 獲取用于JS-SDK的相關參數列表（該方法對accessToken和JSTicket都進行了指定時間的緩存處理，多次調用不會重復生成）
        /// 集合里面包括jsapi_ticket、noncestr、timestamp、url、signature、appid、rawstring
        /// </summary>
        /// <param name="appid">應用ID</param>
        /// <param name="appSecret">開發(fā)者憑據</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、簽到功能的實現處理

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

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

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

界面預覽效果如下所示：

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

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

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

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

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

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

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

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

<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, // 必填，公眾號的唯一標識
            timestamp: timestamp, // 必填，生成簽名的時間戳
            nonceStr: noncestr, // 必填，生成簽名的隨機串
            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;, // 默認為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入&#39;gcj02&#39;
                success: function (res) {
                    var latitude = res.latitude; // 緯度，浮點數，范圍為90 ~ -90
                    var longitude = res.longitude; // 經度，浮點數，范圍為180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒計
                    var accuracy = res.accuracy; // 位置精度
                    $("#lblLoacation").text(latitude + "," + longitude);

                    //解析坐標地址
                    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; // 返回網絡類型2g，3g，4g，wifi
                    $("#lblNetwork").text(networkType);
                }
            });
            
            chooseImage();
        });
    </script>

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

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

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

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

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

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

                    //提交數據到服務器

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

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

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

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

The above is the detailed content of Introduction to developing WeChat portals and applications using C# to implement the check-in function using WeChat JSSDK. For more information, please follow other related articles on the PHP Chinese website!