In the last chapter, we have quickly created a project named QuickStart through the developer's tool. You will notice that different types of documents have been created in this project:

  1. .json suffixed JSON configuration file
  2. .wxml suffixed WXML template file
  3. .wxss suffixed WXSS style file
  4. .js suffixed JS script logic file

Next, let's take a look at the application of the following 4 files.

JSON configuration

We can see the root directory of the project has an app.json and project.config.json. In addition, there is a logs.json under the pages/logs directory. Let's specify their applications respectively.

Mini Program configuration app.json

The app.json configuration is global to current Mini Program, which includes all of its page paths, interface performance, internet overtime volume, and bottom tab. The app.json configuration in the QuickStart project appears as follow:

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

Let's briefly explain the meaning of each item in this configuration:

  1. Pages field - used to describe all page paths of the current Mini Program, the purpose of which is to let WeChat client know at which directory your current Mini Program page is defined.
  2. Window field - the color of the background and text on the top of all pages of Mini Program are defined here.

Please refer to document Configuration app.json of Mini Program for other details.

Tool configuration project.config.json

Usually, when using a tool, Users will make personalized configuration according to their own preference, e.g., interface color, compile configuration, etc. When switching to another computer and re-installing the tools, users have to re-configure.

Considering this, Mini Program developer tool will generate a project.config.json in the root directory of each project. Any configuration done on the tool will be written to this file. When re-installing tools or switching to another computer for work, all you need to do is to load a code package of the same project, the developer tool will automatically restore to the personalized configuration when the project was being developed, including color of the editor and a set of options such as automatic code compression when uploading.

Please refer to document Configuration of developer's tool for other details.

Page configuration page.json

The page.json mentioned here is used to denote such Mini Program page related configuration as logs.json in the pages/logs directory.

If you want the color of your entire Mini Program to be blue, you can specify in app.json that you want the color of the top to be blue. The reality could be different - maybe you want different hue to separate different functional modules on each page of the Mini Program, therefore, page.json is provided, enabling developers to independently define the attributes of each page, e.g., the above-stated color of the top, permission to scroll down or refresh, etc.

Please refer to Configuration page.json of Mini Program for other details.

WXML template

Those who have done web page programming know that it adopts such combination as HTML + CSS + JS, where the HTML is used to describe the structure of the current page; the CSS is to describe the look of the page; while the JS is to process interaction between this page and its users.

Likewise, similar roles exist in Mini Program, where WXML acts as the role of HTML. Opening the pages/index/index.wxml, you will see the following content:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> Acquire profile photo and nickname </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

Similar to HTML, both of which are comprised of labels and attributes, etc. That said, there are also many differences. Now, let's specify them one by one:

  1. The name of the label is somewhat different The frequently used label is usually div,p, span when writing HTML. The developer can assemble differently based on these basic labels when writing a page, e.g., calendar, pop-up windows, etc. Alternatively, since people need these components, why can't we package these frequently used components to greatly improve the efficiency of our development? As we can see from the above examples, the labels used by Mini Program's WXML are view, button, text, etc., which are the basic functions packaged by Mini Program for the developer; In addition, we also provide such functions as map, video, audio, etc. Please refer to the next chapter Functions of Mini Program for more details on the components

  2. More such attributes as wx:if and expressions such as {{ }} added In developing a webpage, we usually use JS to operate DOM (corresponding to the tree described by HTML) to create some variations in the interface to respond to customers' behaviors. For example, when a user clicks a button, the JS will record some status into the JS variables; in the meantime, the DOM API will operate the DOM features or behaviors to create further variations of the interface. When the project gets more complex, codes will be full of many interface interactive logics and various status variables in the program, which obviously is not a good developer . Therefore, the MVVM developer mode (e.g., React, Vue) is created to separate rendering from logic. To simply put it, the purpose is to not let JS have a direct control of DOM; it is good enough to have JS manage the status only and then use a template syntax to describe the relationship between status and the interface structure. This thought also applies to the framework of Mini Program, conditional that you need to display the string "Hello World" on the interface. WXML says this:

    <text>{{msg}}</text>
    
    

    JS only needs to manage status:

    this.setData({ msg: "Hello World" })
    

    The binding of a variable on the interface via the {{ }} syntax is called data binding. The mere data binding cannot adequately describe the relationship between the status and the interface, and control functions such as if/else, for are needed. In the Mini Program, these functions can be expressed with attributes starting with wx:. Please refer to WXML for more details of the document

WXSS Style

The WXSS possesses the majority of features of the CSS, and Mini Program has done some expansion and revision on the WXSS.

  1. New addition of the unit of size. When writing the CSS style, the developer will need to consider the differences in the width and pixel ratio of the mobile device's screen and use certain techniques to convert some units of the pixel. The WXSS supports the new unit of size rpx at its bottom, therefore, the developer can be exempted from the trouble of conversion, which can be done by the bottom of Mini Program. Given float operation is adopted in the conversion, the result will be somewhat deviant from the expected one.
  2. The global and local styles are provided. Like the above app.json, page.json concept, you can write an app.wxss as the global style, which will function in all of the pages of the current Mini Program. The local page style page.wxss only has effect on the current page.
  3. In addition, the WXSS only supports some of the CSS selector

Please refer to WXSS for more details of the document.

JS interactive logic

A mere display of the interface is not enough for a service, which also needs interactions with the user: response to users' clicking, acquire user location, etc. In the Mini Program, we process users' operation through the compilation of JS scripts.

<view>{{ msg }}</view>
<button bindtap="clickMe">Click me</button>

When a button is clicked, we hope the msg appearing on the interface can be displayed as "Hello World". Therefore, we have added an attribute: bindtap on the button and have also declared in the JS document that the clickMe method can respond to this clicking:

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

Responding to the users' operation is as simple as such. Please refer to document WXML - Event for details.

In addition, you can also use Mini Program provided rich API in the JS; these API can readily activate WeChat functions such as acquisition of user information, local storage, WeChat payment, etc. In the previous QuickStart example, wx.getUserInfo is called in pages/index/index.js to acquire the profile photo and nickname of WeChat user. Ultimately, the acquired information is displayed onto the interface through setData. Please see the document Mini Program's API for more API.

In this chapter, you have gained knowledge of the document types and the corresponding roles they play concerning Mini Program. In the next chapter, we will integrate all documents in this chapter through the framework of Mini Program so they can work concurrently.

个结果 ""

    没有找到相关内容 ""