Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "WeChat Mini Programs's method of configuring view layer data binding". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. Mini Program structure catalogue

The goal of the Mini Program framework is to enable developers to develop services with a native APP experience in Wechat in as simple and efficient as possible.

The Mini Program framework provides its own view layer description languages WXML and WXSS, as well as JavaScript, and provides a data transfer and event system between the view layer and the logic layer, allowing developers to focus on data and logic.

Official website

1.1 Mini Program file structure and traditional web comparison structure traditional web WeChat Mini Programs structure HTMLWXML style CSSWXSS logical JavascriptJavascript configuration without JSON

From the above comparison, we can see that the traditional web is a three-tier structure. WeChat Mini Programs has a four-tier structure with one more layer of configuration. Json

1.2 basic project directory

Configuration introduction 2.1 configuration introduction

A Mini Program app will include two basic configuration files. One is the global app.json and the page's own page.json.

Note: comments cannot appear in the configuration file

2.2 Global configuration app.json

App.json is the current global configuration of Mini Program, including all page paths, interface performance, network timeout, bottom tab, etc., of Mini Program. App.json configuration in ordinary Quick start projects

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"}}

The meaning of the field

For pages information, please refer to app.json configuration.

2.3 page.json

The page.json here is actually used to represent the configuration related to Mini Program pages, such as page.json in the page directory.

Developers can independently define some properties of each page, such as the top color, whether to allow drop-down refresh, and so on.

The configuration of the page can only set the contents of some window configuration items in app.json, and the configuration items in the page will override the same configuration items in the window of app.json.

The default value of attribute type describes the background color of navigationBarBackgroundColorHexColor#000000 navigation bar, such as the title color of # 000000navigationBarTextStyleStringwhite navigation bar. It only supports the style of backgroundTextStyleStringdark drop-down loading of the background color of black/whitenavigationBarTitleTextString navigation bar title text content backgroundColorHexColor#ffffff window, and only supports whether dark/lightenablePullDownRefreshBooleanfalse enables drop-down refresh globally. For more information, please see the distance from the bottom of the page to the bottom of the page when the pull-down event is triggered on the Page.onPullDownRefreshonReachBottomDistanceNumber50 page, in px. For details, if Page.onReachBottomdisableScrollBooleanfalse is set to true, the page as a whole cannot be scrolled up and down; it is only valid in the page configuration, and the view layer cannot be set in app.json.

WXML (WeiXin Markup Language) is a set of tag language designed by the framework. Combined with basic components and event system, the structure of the page can be constructed.

3.1 data binding 3.1.1 Common script {{message}} Page ({data: {message: 'Hello Minimin'}}) 3.1.2 component properties

It's no different from the above.

Page ({data: {id: 0}}) 3.1.3 bool type

Do not write checked= "false" directly. The result is a string.

3.2Operation 3.2.1 Ternary operation Hidden 3.2.2 arithmetic operation {{a + b}} + d Page ({data: {a: 1, b: 2, c: 3}}) 3.2.3 logical judgment 3.2.4 string operation {{"hello" + name}} Page ({data: {name: 'MINA'}}) 3.2.5 Note

If there is a space between curly braces and quotation marks, it will eventually be parsed into a string

3.3List rendering 3.3.1 wx:for

The variable name of the item defaults to itemwx:for-item to specify the variable name of the current element of the array

The subscript variable name defaults to indexwx:for-index, which specifies the variable name of the current subscript of the array

{{index}}: {{item.name}}: {{item.age}} Page ({data: {array: [{name: 'foo', age: 18,}, {name:' bar' 'age': 20,}]}}) 3.3.2 wx:for

Rendering a building block containing multiple nodes block will not eventually become a real dom element

{{index}}: {{item}} 3.3.3 wx:key

For efficient use

3.4 conditional rendering 3.4.1 wx:if

In the framework, use wx:if= "{{condition}}" to determine whether the code block needs to be rendered:

True 3.4.2 hidden True

Similar to wx:if

Frequently switch to use hidden

Use wx:if infrequently

This is the end of the content of "WeChat Mini Programs's method of configuring view layer data binding". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.