C # WeChat portal and application development (44) -- Summary of experience in WeChat H5 page development,

C # development portal and application (44) -- Summary of experience in H5 page development,

When we develop pages, we need to use a lot of different rendering effects. Generally, we can use bootup effects to design different pages. However, the team also provides many resources in this regard, the JSSDK interfaces, Weui page styles, and related functional pages provide us with great convenience, this article summarizes some features on some H5 application pages, hoping to help you.

1. webpage development

1) JSSDK

JS-SDK is an internal web development kit provided by the public platform for Web developers. Through the use of JS-SDK, Web developers can take efficient use of pictures, images, voice, location and other mobile phone system capabilities, at the same time, you can directly use the unique capabilities such as sharing, scanning, card coupons, and payment to provide users with a better Web experience.

Currently, JSSDK supports the following types of interfaces: basic interface, sharing interface, image interface, audio interface, intelligent interface, device information, geographical location, shake around, interface operation, sweep, store, coupon, payment, with the full integration of functions, it is estimated that more interfaces will be available one after another.

2) WeUI and Jquery WeUI

WeUIIt is a set of basic style libraries consistent with the native visual experience. It is designed by the official design team for the development of internal web pages, which makes the user experience more unified. Using WeUI in Web development has the following advantages:

• Consistent visual effects with clients make it easier for all users to use your website
• Convenient access and quick use, reducing development and design costs
• The design team is well-crafted, clear, concise, and generous

The Style Library currently contains various elements such as button, cell, dialog, progress, toast, article, and icon, which are open-source on GitHub. Access http://weui.github.io/weui/ or scan the code to preview.

JQuery WeUIThe official WeUI CSS code is used, and the jQuery/Zepto version API implementation is provided. Compared with the official WeUI, JQuery WeUI has made some functional extensions and has enriched the interface design and related functions. Therefore, we can consider directly developing pages based on JQuery WeUI.

In some of my previous cases, We UI styles were used to design features of many H5 pages, including payment pages and sign-in pages.

The payment page is shown as follows:

And the result of the sign-in page is as follows.

 

Of course, we can add many pages that are consistent with the color style according to business needs. This is the benefit of using WeUI style to bring the interface experience consistency.

This article mainly introduces the experience of H5 page development. The above mentioned uses JSSDK and WeUI to develop the H5 page of the application. Therefore, the following results are processed using these technologies.

 

2. Judge the browser

In some cases, we may need users to open the connection only in the browser, but not in other browsers. In addition, the connection is obtained based on the identity information of some users, it also needs to be redirected through the browser. Otherwise, errors may occur in other browsers. Therefore, it is also a common practice to determine whether the browser is used.

There are two ways to determine whether the browser can achieve the goal. One is to use JS scripts on the front end, and the other is to use C # code in the background for processing. Both methods can achieve the goal.

Use JS Code to implement the Code and the effect is as follows.

// Determine whether to enable function isWeiXin () {var ua = window. navigator. userAgent. toLowerCase (); if (ua. match (/MicroMessenger/I) = 'micromessenger ') {return true;} else {return false ;}}

The output on the page is as follows.

$ (Function () {var isWeixin = isWeiXin (); if (isWeixin) {$ ("# weixin" window. navigator. userAgent); // open this page in the middle} var display = "open in the browser:"; display + = isWeixin? "Yes": "no"; $ ("# isWeixin" ).html (display );});

If the webpage link is normally redirected, the prompt is: yes.

As mentioned earlier, C # background code can also be used to determine whether the browser is in use. In general, we can determine whether the user's browser is used for redirection. If the user is actually a browser, otherwise, it will be redirected to the prompt page to the user.

/// <Summary> /// check whether it is enabled; otherwise, redirect /// </summary> /// <returns> </returns> protected string CheckBrowser () {bool passed = false; string userAgent = Request. userAgent; passed = userAgent. toLower (). contains ("micromessenger"); if (! Passed) {var type = "warn"; var message = "open this page in"; var url = string. Format ("{0}/H5/info? Type = {1} & message = {2} ", ConfigData. WebsiteDomain, type, message); return url;} return null ;}

We can make judgments at the beginning of the function.

// If it is not a browser, the error page var checkUrl = CheckBrowser (); if (! String. IsNullOrEmpty (checkUrl) return Redirect (checkUrl );

If you do not open the page link in a browser, the page will be redirected as follows.

 

3. Bind Dictionary data

Like conventional web pages, when designing page applications, a lot of data also comes from Dictionary data and needs to be dynamically bound to pages, the JQuery WeUI on the page provides the following information about how to display Dictionary data.

The general data binding is as follows, as shown in the following JS Code.

$ ("# Job "). select ({title: "select a career", items: ["judge", "doctor", "Hunter", "student", "Reporter", "other"], onChange: function (d) {console. log (this, d) ;}, onClose: function () {console. log ("close") ;}, onOpen: function () {console. log ("open ");},});

You can also use a set object to assign values, as shown in the following JS Code.

$ ("# In "). select ({title: "Your hobbies", multi: true, min: 2, max: 3, items: [{title: "painting", value: 1, description: "Additional data 1" },{ title: "", value: 2, description: "additional data 2"}], beforeClose: function (values, titles) {if (values. indexOf ("6 ")! =-1) {$. toast ("cannot play", "cancel"); return false;} return true ;}, onChange: function (d) {console. log (this, d );}});

Based on the above JS script, we select the latter and use Ajax technology to fill in the data, so that we can dynamically obtain Dictionary data in the background and bind the page.

For convenience, we can design a public function for data dictionary binding, as shown below.

// BindDictItem (ctrlName, dictTypeName, onChange, onClose, onOpen) {var url = '/h5/GetDictJson? DictTypeName = '+ encodeURI (dictTypeName); // obtain the Ajax content and put it in the items set var control =$ (' # '+ ctrlName); var items = []; $. ajax ({type: 'get', url: url, // async: false, // synchronize ype: 'json', success: function (data) {control. empty (); // clear the drop-down box // Add the JSON set to the array $. each (data, function (I, item) {items. push ({title: item. text, value: item. value}) ;}); // sets the display list control. select ({title: "select" + dictTypeName, items: items, onChange: onChange, onClose: onClose, onOpen: onOpen});}, error: function (xhr, status, error) {$. toast ("operation failed" + xhr. responseText); // xhr. responseText }});}

To bind the dictionary data, you only need to call this function to easily bind the data dictionary.

$ (Function () {BindDictItem ("Status", "device Status"); BindDictItem ("Dept", "Department"); BindDictItem ("Building", "Building "); bindDictItem ("Floor", "Floor"); BindDictItem ("Special", "Special circumstances ");});

We can see that the corresponding connection is opened in, and the effect of dictionary binding is as follows.

We can maintain the data dictionary in the background for real-time data updates.

 

4. Image Preview

In many pages, we need to display a wide range of images. We need to combine the image preview function interface so that we can conveniently resize the images after opening them, so how can I use the image preview interface of JSSDK?

First, we need to introduce the Jquery WeUI Style Class Library and JS files required by JSSDK, as shown below.

    <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.0.0.js"></script>

Then initialize the jssdk api script on the page, as shown in the following code.

Var appid = '@ ViewBag. appid '; var noncestr =' @ ViewBag. noncestr '; var signature =' @ ViewBag. signature '; var timestamp =' @ ViewBag. timestamp '; wx. config ({debug: false, appId: appid, // required. The only identifier of the public account is timestamp: timestamp, // required. The signature timestamp nonceStr: noncestr, // required. The random signature string signature: signature, // required. For details, see Appendix 1 jsApiList: ['checkjsapi', 'chooseimag', 'previewimage ', 'uploadimag', 'downloadimag']}); // wx after all are ready. ready (function (){});

The following HTML code shows two parts of the picture, one is the device nameplate image and the other is the affiliated image.

<Div class = "weui_cells_title"> 
These codes construct many image controls, that is, the original HTML image control. If this is the only way to do so, you can only use the effect of web pages, but cannot preview images using browsers, you can zoom in and out multiple features.
Some processing is required to implement the required functions. In a simple method, you can design a JS function and use the JS function to preview the image. The Code is as follows.
        function BindClick(selector) {            document.querySelector(selector).onclick = function (event) {               var imgArray = [];                var curImageSrc = $(this).attr('src');                var oParent = $(this).parent();                if (curImageSrc && !oParent.attr('href')) {                    $(selector).each(function (index, el) {                        var itemSrc = $(this).attr('src');                        imgArray.push(itemSrc);                    });                    wx.previewImage({                        current: curImageSrc,                        urls: imgArray                    });                }            }        }                BindClick('#previewImage img');        BindClick('#previewImage2 img');
The practice of this function is to refer to the practice of a big bull on the Internet. However, there is a problem with this function. If there are multiple images, You need to click the first image to start previewing, you cannot start by clicking a few other images.
To improve this shortcoming, we can use the Razor template to generate the required code. The following shows a collection of Razor templates to generate JS Code and generate the required JS Code.
        var urls = [];        @foreach (var url in ViewBag.mainList)    {        <text>urls.push('@url');</text>    }        @for (var i = 0; i < ViewBag.mainList.Count; i++)    {        <text>        document.querySelector('#mainPic_@i').onclick = function () {            wx.previewImage({                current: $(this).attr("src"),//urls[@i],                urls: urls            });        };        </text>    }        var urlsOther = [];        @foreach (var url in ViewBag.otherList)    {        <text>urlsOther.push('@url');</text>    }        @for (var i = 0; i < ViewBag.otherList.Count; i++)    {        <text>        document.querySelector('#otherPic_@i').onclick = function () {            wx.previewImage({                current: $(this).attr("src"),//urls[@i],                urls: urlsOther            });        };        </text>    }
The generated JS Code is as follows.
Var urls = []; urls. push ('HTTP: // response); document. querySelector ('# mainPic_0 '). onclick = function () {wx. previewImage ({current: $ (this ). attr ("src"), // urls [0], urls: urls}) ;}; var urlsOther = []; urlsOther. push ('HTTP: // response); document. querySelector ('# otherPic_0 '). onclick = function () {wx. previewImage ({current: $ (this ). attr ("src"), // urls [0], urls: urlsOther });};
In this way, we can achieve the desired effect. Of course, there won't be any problems with multiple images.