background

In the last article, we mainly introduced several configuration of wechat applets. App. json is the global configuration of wechat applets, and page.json is the configuration of the page of the applets. Project.config. json is for the configuration of applets development tools,sitemap.json is for the configuration of applets and pages can be retrieved by wechat. This article is mainly used to introduce the page composition of wechat applet.

Page composition

Those who have been engaged in web programming know that web programming uses a combination of HTML + CSS + JS, in which HTML is used to describe the structure of the current page, CSS is used to describe the appearance of the page, AND JS is usually used to deal with the interaction between the page and the user. In fact, wechat small program page is also equivalent to a web page, which is similar to its composition. Json has been mentioned in the previous article as the configuration of the page. Others, such as index. WXML, are similar to HTML and used for the page structure of wechat applet. Index. WXSS is similar to CSS and used to describe the appearance of the page. And index.js is used for wechat applet interaction.

WXML

The following code shows the contents of index.wxml for our test project, which is very similar to HTML in that WXML consists of tags, attributes, and so on. But there are a lot of differences, two main differences.

<! --index.wxml--> <view class="container"> <view class="userinfo"> <block wx:if="{{canIUseOpenData}}"> <view class="userinfo-avatar" bindtap="bindViewTap"> <open-data type="userAvatarUrl"></open-data> </view> <open-data type="userNickName"></open-data> </block> <block wx:elif="{{! HasUserInfo}"> <button wx:if="{{canIUseGetUserProfile}}" bindTap ="getUserProfile"> </button> <button Wx :elif="{{canIUse}}" open-type="getUserInfo" bindGetUserinfo ="getUserInfo"> Please use 1.4.4 or later </view> </block> <block wx:else> <image bindTap ="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block>  </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>Copy the code

The label names are different and encapsulate more components

Div, P and SPAN are commonly used when writing HTML. Developers can combine these basic tags into different components when writing a page, such as calendar, pop-ups, and so on. On the other hand, since everyone needs these components, why can’t we wrap these commonly used components together to greatly improve our development efficiency?

As can be seen from the above example, the WXML tags used by the small program are View, button, text and so on. These labels are the basic ability of the small program to the developer. The wechat small program also provides map, video, audio and other components. Wechat applet component provides a lot of packaged components, here is not more introduction, later will write a special article combined with examples of detailed introduction of the components provided by wechat applet.

Here I still can’t help but want to explain why I don’t introduce more details, which involves the theme of this article is the host environment and page structure rather than concrete implementation, and wechat small program provides a very rich component, if all detailed introduction is not appropriate, let people miss the point. It made me think of junior high school to learn the language before debate about tao yuanming reading method, is it just the grand view “natural”, should be up far, personally, I think for both methods, just time is different, when fully contact with a new things, we should be slightly the observatory, on the whole there is a known, Don’t go into too much detail at this point, or you’ll get bogged down in it. When we have an overall understanding of a new thing, if we want to continue our research, we need to select one aspect and meticulously study every detail, so as to have a profound understanding and application. This series of the first few articles are slightly its view, will not involve in most details, I hope you can have an overall understanding of the micro channel small program, good nonsense is over here.

A few morewx:ifAttributes like this and expressions like {{}}

In the general development process of web pages, we usually manipulate the DOM (corresponding to the tree generated by the HTML description) through JS to cause some changes in the interface in response to the user’s behavior. For example, when a user clicks a button, JS will record some states into JS variables and manipulate DOM properties or behaviors through DOM API, thus causing some changes in the interface. As projects get bigger and bigger, your code will be filled with a lot of interface interaction logic and application state variables, which is obviously not a good development model, hence the MVVM development model (e.g. React, Vue), which advocates the separation of rendering and logic. Simply put, instead of allowing JS to manipulate the DOM directly, JS only needs to manage state, and then describe the relationship between state and interface structure through a template syntax. This may sound abstract, but let’s take our test project as an example. We have “Hello World” on the screen. How does that work?

In WXML we declare a motto

    <text class="user-motto">{{motto}}</text>
Copy the code

In JS, we assign the Motto value to “Hello World”. At the same time, we can change the Motto value by using functions to change the page state without directly manipulating the DOM node.

data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), canIUseGetUserProfile: false, canIUseOpenData: Wx.caniuse (' open-data.type.useravatarURL ') && wx.caniUse (' open-data.type.usernickname ')Copy the code

Binding a variable to an interface using the syntax {{}} is called data binding. Data binding alone is not enough to fully describe the relationship between the state and the interface. It also requires if/else, for, and other controls, which are expressed in small programs using properties starting with Wx:.

WXSS

WXSS has most of the features of CSS, small programs in WXSS also made some additions and modifications.

  • Added dimension units. When writing CSS styles, developers need to take into account that mobile devices have different screen widths and device pixel ratios, and use some tricks to convert pixels into units. WXSS supports a new dimension unit RPX in the bottom layer, so developers can save the trouble of conversion, as long as the small program to the bottom layer to convert, because the conversion uses floating point number operation, so the calculation result will be a little deviation from the expected result.

  • Global and local styles are provided. Json is the same as app.json and page.json. You can write an app. WXSS as a global style that applies to all pages of the current applet, while a local page style page. WXSS applies only to the current page.

  • In addition, WXSS only supports some CSS selectors

JS

It is not enough for a service to simply display its interface, but to interact with the user: to respond to user clicks, to retrieve user locations, and so on. In the small program, we write JS script files to deal with the user’s operations. Again, the test project we established is illustrated. The following picture on the left is the startup page of the test project. When the user clicks, the page will jump to the page shown on the right.


How does this work? View has a property called bindTap, which responds to user clicks. Its property value is bindViewTap, which is the name of a function that defines how the user should react when the user clicks. This function is defined in index.js.

WXML related content

 <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
 </block>
Copy the code

JS related content

bindViewTap() { wx.navigateTo({ url: '.. /logs/logs' }) }Copy the code

The last

If you are interested, you can follow the public account QStack, which will share some articles and free learning resources regularly.