Wechat small program directory structure diagram

I’ll start each applet article in this series with a map of the project directory structure of the applet

To achieve the effect of the drawing

This is the final effect of the picture, because just contact small program, so do relatively simple, record the following implementation process

Data rendering

In wechat applet, the data source can be simulated data, or data obtained from cache or network. We can associate the obtained data to the DATA in the JS file, and the content in the data is generally stored in the key-value format. For the above effect, we first implement a rendering of the data, and then implement the list display. First, simulate a piece of data in JS: home.js

Page({

  /** * page initial data */

  data: {
    //key:content
    // Value: json array after content
    content: [{"name":"Yang yi"."phone":"18800000000"}}],... })Copy the code

When the page loads, it reads the key value from the data in home.js and renders the key value to the interface.

home.wxml

<view class="content">

    <view class="name">Name: {{content [0]. Name}}</view>

    <view class="phone">Phone number: {{content [0]. Phone}}</view>

</view>
Copy the code

Add CSS decorations to each piece of data

home.wxss

.content{

  width: 100%;

  padding: 10px 20px;

  border-bottom: 1px solid lightgray;

}

.content .name{

  color: lightskyblue;

  font-size: 14px;

}

.content .phone{

  color: lightgray;

  font-size: 14px;

  margin-top: 8px;

}
Copy the code

The list of operations

The following WXML and JS files are slightly modified to turn the single pick data into a list. First change the contents of data in home.js to multiple pieces of data:

data: {
     content: [{"name":"Yang yi"."phone":"18800000000"}, {"name":"Money"."phone":"18800000000"}, {"name":"Zhang"."phone":"18800000000"}, {"name":"Bill"."phone":"18800000000"}, {"name":"Fifty"."phone":"18800000000"}, {"name":"Daisy"."phone":"18800000000"}, {"name":"Seven li"."phone":"18800000000"}, {"name":"The song."."phone":"18800000000"}},Copy the code

Then use view in conjunction with WX-for to loop through the data in the list:

Loop rendering can pass an array and render multiple components of the same type at once. The variable name of the current item in the array defaults to item, and the contents of the current item can be obtained through item

<view class="content" wx:for="{{content}}" wx:key="key" wx:for-item="item">

    <view class="name">. Name: {{item name}}</view>

    <view class="phone">Phone number: {{item. Phone}}</view>

  </view>
Copy the code

You can also use block in conjunction with wX-for to achieve the same effect. A block is not a component, but a label that wraps an element or component

<block  wx:for="{{content}}" wx:key="key" wx:for-item="item">

<view class="content">

    <view class="name">. Name: {{item name}}</view>

    <view class="phone">Phone number: {{item. Phone}}</view>

  </view>

</block>
Copy the code

Note that the position of the list changes dynamically when using WX :for, so in order to preserve the characteristics and state of the components, you need to use Wx :key to specify unique identifiers for items in the list, and a warning is issued if wX :key is not provided.