Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve Wechat H5 page development in C#. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Wechat web page development

1) JSSDK

Wechat JS-SDK is a web development kit based on Wechat provided by Wechat public platform for web developers. By using Wechat JS-SDK, web developers can take advantage of Wechat's ability to efficiently use mobile systems such as photo, picture selection, voice, location and so on. At the same time, they can directly use Wechat's unique capabilities such as Wechat sharing, scanning, card coupons, and payment to provide Wechat users with a better web experience.

At present, the interface categories supported by JSSDK include the following categories: basic interface, sharing interface, image interface, audio interface, intelligent interface, device information, geographical location, shake the perimeter, interface operation, Wechat scan, Wechat shop, Wechat card coupons, WeChat Pay, with the full integration of Wechat functions, it is estimated that more interfaces will be opened one after another.

2) WeUI and Jquery WeUI

WeUI is a set of basic style library consistent with the native visual experience of Wechat. It is tailored and designed by the official design team of Wechat for the development of web pages in Wechat, which can make the user perception more unified. Using WeUI in Wechat web page development has the following advantages:

The same visual effects as the Wechat client, making it easier for all Wechat users to use your site

Easy access and quick use to reduce development and design costs

Wechat design team is carefully crafted, clear, concise and generous

The style library currently contains button, cell, dialog, progress, toast, article, icon and other elements, and has been open source on GitHub. Visit http://www.php.cn/ or Wechat to scan the code to preview.

JQuery WeUI uses the official WeUI CSS code and provides a jQuery/Zepto version of the API implementation. Compared with the official WeUI, JQuery WeUI has made some functional extensions, has enriched interface design and related functions, so we can consider directly based on JQuery WeUI page development.

In some of my previous cases, I used We UI style to design a lot of Wechat H5 pages, including WeChat Pay page, check-in page and so on.

As shown on WeChat Pay's page:

And the effect of the check-in page is as follows.

Of course, we can add a lot of pages that are consistent with the Wechat tone style according to our business needs, which is the benefit of taking advantage of the interface experience consistency brought about by the WeUI style.

This article mainly introduces the experience of Wechat H5 page development, which mentioned the use of JSSDK and WeUI to develop the H5 page of Wechat application, so the following related effects are dealt with by using these technologies.

2. Judge Wechat browser

In some cases, we may need users to open the connection only on Wechat browser, but not with other browsers, and it is based on the acquisition of some user identity information, which also needs to be redirected through Wechat browser, otherwise using other browsers will make mistakes, so it is sometimes a routine practice to judge whether Wechat browser is or not.

To judge whether it is a Wechat browser, there are two ways to achieve the goal, one is to use the JS script in the front end, the other is to use the background C # code to judge processing, both of which can achieve the goal.

The code and effect of using JS code is shown below.

/ / determine whether to open function isWeiXin () {var ua = window.navigator.userAgent.toLowerCase (); if (ua.match (/ MicroMessenger/i) = = 'micromessenger') {return true;} else {return false;}} in Wechat

The output processing on the page is as follows.

$(function () {var isWeixin = isWeiXin (); if (isWeixin) {$("# weixin") .html (window.navigator.userAgent; / / Please open this page in Wechat} var display = "do you open it in Wechat browser:"; display + = isWeixin? "Yes": "No"; $("# isWeixin") .html (display);})

If it is a normal use of Wechat jump page link, then the prompt will be: yes.

As mentioned just now, the C# backend code can also be used to determine whether the user is in the browser. In general, we can determine whether the user's browser is redirected. If the user is indeed a Wechat browser, continue the later processing. Otherwise, redirect to the prompt page to the user.

/ check whether it is opened in Wechat, otherwise redirect / protected string CheckBrowser () {bool passed = false; string userAgent = Request.UserAgent; passed = userAgent.ToLower () .Contains ("micromessenger") If (! passed) {var type= "warn"; var message= "Please open this page in Wechat"; var url = string.Format ("{0} / H5 message= {1} & message= {2}", ConfigData.WebsiteDomain, type, message); return url;} return null }

We can make a judgment at the beginning of the function.

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

If a page link is opened by a non-Wechat browser, the effect of the redirect is as follows.

3. Binding of dictionary data

Like regular web functions, when designing Wechat page applications, a lot of data is from source dictionaries, and we need to bind them to the page dynamically. The JQuery WeUI of Wechat page provides some list dictionary data. The display effect is as follows.

This regular data binding is shown below, as shown in the following JS code.

Select ({title: "choose a career", items: ["judge", "doctor", "hunter", "student", "journalist", "other"], onChange: function (d) {console.log (this, d);}, onClose: function () {console.log ("close") }, onOpen: function () {console.log ("open");},})

You can also use collection objects for assignment, as shown in the following JS code.

Select ({title: "your hobby", multi: true, min: 2, max: 3, items: [{title: "drawing", value: 1, description: "extra data 1"}, {title: "play ball") Value: 2, description: "extra data 2"}], beforeClose: function (values, titles) {if (values.indexOf ("6")! = =-1) {$.toast ("cannot choose to play", "cancel") Return false;} return true;}, onChange: function (d) {console.log (this, d);}})

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

For convenience, we can design a common function for binding processing of data dictionaries, as shown below.

/ / bind the contents of the dictionary to the specified control function BindDictItem (ctrlName, dictTypeName, onChange, onClose, onOpen) {var url ='/ h6ActionGetDictJsonGetDictJsonGetDictJsonThe dictTypeName'+ encodeURI (dictTypeName); / / get the contents of Ajax and put them in the items collection var control = $('#'+ ctrlName); var items = [] $.ajax ({type: 'GET', url: url, / / async: false, / / synchronous dataType:' json', success: function (data) {control.empty () / / clear the drop-down box / / add the JSON collection to the array $.each (data, function (I, item) {items.push ({title: item.Text, value: item.Value})) }) / / set 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}});}

Then we bind dictionary data, just call this function to easily implement the binding operation of the data dictionary.

(function () {BindDictItem ("Status", "equipment status"); BindDictItem ("Dept", "Department"); BindDictItem ("Building", "Building"); BindDictItem ("Floor", "floor"); BindDictItem ("Special", "Special circumstances");})

If you open the corresponding connection in Wechat, the effect of dictionary binding is as follows.

We can maintain the data dictionary in the background of Wechat and update the data in real time.

4. Preview function of Wechat pictures.

In many pages, we need to show rich pictures, we need to combine Wechat's image preview function interface, we can open the picture to facilitate zoom processing, so how to use Wechat JSSDK's picture preview interface?

First, we need to introduce the style class library of Jquery WeUI, as well as the JS file required by JSSDK, as shown below.

Then initialize the API script for JSSDK 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, unique ID of official account timestamp: timestamp, / / required, timestamp for generating signature nonceStr: noncestr, / / required, random string for signature signature: signature, / / required, signature See Appendix 1 jsApiList: ['checkJsApi',' chooseImage', 'previewImage',' uploadImage', 'downloadImage']}) / / wx.ready (function () {}) when all are ready

Join our page which contains two parts of pictures, one is the device nameplate picture, and the other is the other attached picture, which we show respectively, as shown in the following HTML code.

Nameplate picture

@ for (var I = 0; I

< ViewBag.mainList.Count; i++) {

}

Other pictures

@ for (var I = 0; I

< ViewBag.otherList.Count; i++) {

}

These code built a lot of picture controls, that is, the original HTML picture control, if only do so, then can only use the effect of the web page, but can not use Wechat browser to preview the picture, you can zoom in and out of the rich functions.

In order to achieve the function we said we need to carry out some processing, a simple method, you can design a JS function, and then through the JS function to achieve Wechat preview picture function, 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 method of this function is to refer to the practice of a big cow on the Internet, but there is a problem in doing so. If there are more than one picture, you need to click on the first picture to start the preview, not the other ones.

In order to improve this disadvantage, we can use the template of Razor to achieve the code generation we need, which collects the Razor template to generate JS code as shown below, which realizes the generation of JS code we need.

Var urls = []; @ foreach (var url in ViewBag.mainList) {urls.push ('@ url');} @ for (var I = 0; I < ViewBag.mainList.Count) ) {document.querySelector ('# mainPic_@i'). Onclick = function () {wx.previewImage ({current: $(this) .attr ("src"), / / urls [@ I], urls: urls});};} var urlsOther = [] @ foreach (var url in ViewBag.otherList) {urlsOther.push ('@ url');} @ for (var I = 0; I < ViewBag.otherList.Count) ) {document.querySelector ('# otherPic_@i'). Onclick = function () {wx.previewImage ({current: $(this) .attr ("src"), / / urls [@ I], urls: urlsOther});};}

The generated code of the JS code is as follows.

Var urls = []; urls.push ('http://www.iqidi.com/UploadFiles/ device nameplate picture / TIzMZl04X1iqkHMP44hXFHjQ-yyvrxS-tgwgzMGfwe9AUMTxKohcVC6w6O.jpg') Document.querySelector ('# mainPic_0'). Onclick = function () {wx.previewImage ({current: $(this) .attr ("src"), / / urls [0], urls: urls});}; var urlsOther = [] UrlsOther.push ('http://www.iqidi.com/UploadFiles/ device nameplate picture / lJk_LNwxTGfL5SNpmJwWyfyBONa2JRO7uzu3PJV3aGsrilPPHY2r-ymU00.jpg'); document.querySelector (' # otherPic_0'). Onclick = function () {wx.previewImage ({current: $(this) .attr ("src"), / / urls [0], urls: urlsOther}) }

In this way, we can finally achieve the effect we need, of course, multiple pictures will not have any problems.

This is the end of this article on "how to achieve Wechat H5 page development in C#". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.