One-hour introduction to WeChat applet

1. How to start
Start with list development
The foundation of mobile development is UI development, and the most basic skill in UI development is list development (UITableView, UICollectionView, ListView, GridView). Therefore, being able to use lists proficiently is basically considered an introduction.
Required skills
Have developed list pages on any platform such as Android, iOS, WP, and H5

---

2. Preparation work
1. Register the mini program number
2. Download and develop Tool
3. Download Demo source code
4. Simple tutorial

---

##3. WeChat applet development
Goal: Getting Started Mini Program

Method: Programming to implement a list page and jump to the response details page

Basic Knowledge

1. Project directory

The applet contains an app that describes the overall program (it consists of three files: applet logic--app.js, applet public settings--app.json , the public style sheet of the mini program--app.wxss, must be placed in the root directory of the project) and multiple pages describing their respective pages.

Figure 1

2. Page composition

A small program page consists of four files, which are: page logic-- index.js (required), page structure--index.wxml (required), page style sheet--index.wxss (not required), page configuration--index.json (not required)

Figure 2

3. Page life cycle (in js file)

1).onLoad: Page loading

2) .onShow: Page display

3).onReady: The initial rendering of the page is completed

4).onHide: The page is hidden

5).onUnload: The page is unloaded

Implementation moduleNetwork data->List page rendering->Jump to details page

Specific implementation methodGet in index.js Network data -> Pass the network return data to wxml ->wxml receives and uses the data

Logical layer to get the data

● Call wx in onShow of index.js. request() obtains network data

The logic layer sends data

●By calling this.setData()data will be transmitted from the logic layer to the rendering layer in the form of JSON. As shown in Figure 3, where The transferred data format is JSON {xxx:res.data}

Figure 3

●The rendering layer receives data

As shown in Figure 4 , Obtain data method: {{xxx}}

##Figure 4

●Implementation of rendering layer list

As shown in Figure 4 , homelist is a list, scrollviewcell is each item in the list (according to different data, multiple styles can be defined)

wx:for (including wx:for-item, wx:for-index), wx:if is the loop and judgment control statement of wxml

●Jump to the details page

As shown in Figure 4, in the item , the jump page function can be implemented, where url is the js file path to be jumped to the page, id, pic are the carried parameters, which can be received by the logic layer of the subordinate page This information is as shown in Figure 5. The url parameters stored in the options in onLoad:function(options){} (the parameters of the url in the previous page, )

Figure 5

●Transfer click events in the details page

As shown in Figure 5, implement a testTap: method and bind bindtap="testTap" in the corresponding rendering layer, such as Figure 6

Figure 6

---

## 4. Summary

Need to understand how the UI is laid out, how data is transferred, how lists are implemented, and how to bind click events on the page. Demo source code
●UI layout requires understanding of XML and CSS Basic knowledge

●Data transfer (1). From the network to the logic layer of the app, call wx.request() (2). From the logic layer to the rendering layer, call this.setData()

●List implementation

●Analogy to UITableView in iOS development, or ListView in Android

●Bind click event bindtap="xxxxx"