Chapter 1: A Beginner's Tutorial on Small Programs

Tool installation

On the page shown in step 8 of the previous section, you can click Developer Tools Go directly to the download page, or you can visit the official download address directly. Then select the appropriate download according to your device The installation process is not repeated and defaults all the way through.

Download Development Tools

§ Starters for applet tools

The tools selected for this tutorial are for the mac platform version, no difference

Open the installed microsoftweb Developer Tools , you need to use caretakers perhaps developers s WeChat account to scan and log in. Administrator account is registered in step 6 of the previous section appID when tied to a WeChat account. Developer accounts can be found in the previous section, step 8 of the increase developers set up in

After successful login, select Local applet project And then Add item

If not registered appID , you can also develop applet projects, but some of the features will be limited, such as previewing on your phone. Here, we already have the appID

After a successful addition, our project will be in the microsoftweb Developer Tools It is automatically opened and launched in this tool, you can modify, debug, breakpoint and preview the code in this tool, and the project will be updated in real time if the file is modified.

Catalogue Description

Once the project is generated, you will see a directory file with the following structure.

├─ pages/
│   ├─ index/
│       ├─ index.js
│       ├─ index.wxml
│       ├─ index.wxss
│   ├─ logs/
│       ├─ logs.js
│       ├─ logs.json
│       ├─ logs.wxml
│       ├─ logs.wxss
├── utils/             
│   ├─ util.js
├── app.js                  //  Required Documents  
├── app.json                //  Required Documents
├── app.wxss

Let's start with the three outermost files.app.js 、 app.json 、 app.wxss

app.js The main entry file for the applet, similar to what we had in the module loader days (requirejs/seajs ) will often code a main.js to serve as the program's startup portal. If you have been exposed to node - express technology stack, it would be more pertinent to understand. Caution. File name cannot be changed We can find it in the app.js Inside, the applet is handled in different lifecycle segments, setting the applet inside the global variable (e.g. only request the common data once to make it available to all pages). WeChat platform app.js documentation
app.json The global profile of the applet, such as setting which pages the applet consists of (currently index harmony logs ), window presentation (background color, etc.), setting network timeout time, setting navigation bar style, and other background colors. Caution. No comments may be added to this file WeChat platform app.json configuration documentation
app.wxss Global style files for applets, in which all style files are no longer .css suffixes, all of which need to start with .wxss as a suffix. As opposed to the traditional css style compared to thewxss backing @import Style import and pixel unit adaption. For local styles in standalone pages, write them in the relative page folders, which are explained later. WeChat platform app.wxss style specification document

Page file for the applet

app.json The file configures the two pages of the current applet pages/index/index harmony pages/logs/logs , as you can see, is actually Path + filename of the file Ingredients. If you add a page, you need to add a page to the parameter pages The address of the page is configured in the

Careful students may have noticed a phenomenon, each page folder, with the files inside, have the same name drops. Yes, in general, a complete page requires js 、wxss(css)、wxml(html) Ingredients. for example index page, if you need to make a change to the index page for some standalone configuration that requires something like logs Same, increase index.json file to save the configuration information.

Take a look. wxml Documents with html Differences in documents

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">  Get avatar nickname </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" 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>

traditional html The file consists of a variety of tags, and the wxml in which there are not many tag elements available, it can be seen that there are view、image、text Tags.

view is equivalent to div , you can interpret it that way.
image is equivalent to img , this should all make sense.
text Obviously, the tag used to mark up the text, since it is copies It must be. Row-level elements Up.

There are also some good built-in component tags， Self-styled harmony characteristics， for further details, refer to Official Documents

Page Style Sheet index.wxss

The scope only takes effect on the current page, and it can override the app.wxss Inside the style rules. As you can see, there is basically no difference from the usual style files we use: the

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

Page script files index.js

with app.js Same, contains the lifecycle of a page, declares and processes data, responds to page interaction events, etc.

//index.js
 // Get application examples
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
   // Event handling functions
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
       // Since getUserInfo is a network request, it may not be returned until after Page.onLoad
       // So callback is added here to prevent this
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
       // Compatible handling in the absence of the open-type=getUserInfo version
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

Next update: Beginner's tutorial for small programs - lit. try a small test drive+ Release Process

Recommended>>
1、Docker Learning of Network Mode Configuration
2、Using the GPU
3、How does a requirements review meeting work
4、While manufacturing explain the http status code 502504499500
5、5 Tools Data Scientists Should Have at Their Fingertips