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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
    appId: '', // 必填，公眾號的唯一標(biāo)識
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: '', // 必填，生成簽名的隨機(jī)串
    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, // 必填，公眾號的唯一標(biāo)識
            timestamp: timestamp, // 必填，生成簽名的時(shí)間戳
            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;
            ]
        });

Step 4: Successful verification through ready interface processing

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

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', // 默認(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; // 速度，以米/每秒計(jì)
                    var accuracy = res.accuracy; // 位置精度
                    $("#lblLoacation").text(latitude + "," + longitude);
                }
            });
        });

Step 5: Handle failed verification through the error interface

wx.error(function(res){
    // config信息驗(yàn)證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，
    // 也可以在返回的res參數(shù)中查看，對于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（隨機(jī)字符串）, 有效的jsapi_ticket, timestamp（時(shí)間戳）, 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

注意事項(xiàng)

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

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

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

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

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

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

/// <summary>
        /// 生成時(shí)間戳，標(biāo)準(zhǔn)北京時(shí)間，時(shí)區(qū)為東八區(qū)，自1970年1月1日 0點(diǎn)0分0秒以來的秒數(shù)
        /// </summary>
        /// <returns>時(shí)間戳</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("-", "");
        }

還有我們要實(shí)現(xiàn)JSSDK簽名的處理，必須先根據(jù)幾個(gè)變量，構(gòu)建好URL字符串，具體的處理過程，我們可以把它們逐一放在一個(gè)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ī)則來實(shí)現(xiàn)簽名的處理了，簽名的代碼如下所示，注釋代碼和上面代碼等同。

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

            ////下面和上面代碼等價(jià)
            //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)行了指定時(shí)間的緩存處理，多次調(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、簽到功能的實(shí)現(xiàn)處理

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

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

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

界面預(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; // 速度，以米/每秒計(jì)
        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ù)這幾個(gè)接口，我們來對它們進(jìn)行包裝，以實(shí)現(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, // 必填，生成簽名的時(shí)間戳
            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; // 速度，以米/每秒計(jì)
                    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()是我們在頁面開始的時(shí)候，讓用戶拍照的操作，具體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);
                }
            });
        }

但用戶使用攝像頭拍照后，就會返回一個(gè)res.localIds集合，因?yàn)槲覀兣恼找粋€(gè)，那么可以把它直接賦值給圖片對象，讓它顯示當(dāng)前拍照的圖片。

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

為了實(shí)現(xiàn)我們自己的業(yè)務(wù)數(shù)據(jù)，我們需要把圖片集相關(guān)信息存儲在自己的服務(wù)器，這樣才可以實(shí)現(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)榱藢?shí)現(xiàn)單擊圖片控件，實(shí)現(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();
        });

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!