The previous article has basically introduced the overall layout and design ideas of the applet, so this article begins to introduce how to build a simple applet.

1, New applet

First, we create a new applet through the template.

Then delete all files under the folder.

  Errors will be found:

So create a new app.json and gradually improve the content according to the prompts.

Create two new folders: pages/index, and click new page.

  At this time, a small program that has nothing but can run will be created!

2, Components

Next, customize the layout and briefly introduce the components. Basically, 80% of the small programs on the market can be made after mastering the following components.

• Textwrite text messages, similar to span tags
• view container, similar to div tag
• image picture

We write corresponding components in index.wxml, create a new static folder, store pictures in it, and load local pictures.

<text>yunlord</text>
<view class="c1">yunlord13</view>
<image src="/static/profile.png">  </image>

Where class is the setting style. We define the style of "c1" in index.wxss.

.c1{
    color: blue;
}

The effect is as follows

3, Global configuration

We can make global settings in app.json to view Applet global configuration document.

You can see that there are many configuration items in it. Simply test several effects.

{
    "pages": [
        "pages/index/index",
        "pages/home/home"
    ],
    "window":{
        "navigationBarBackgroundColor": "#FFDAB9",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "Yunlord"
    },
    "tabBar": {
        "selectedColor":"#CD5C5C",
        "list": [
        {
        "pagePath": "pages/index/index",
        "text": "home page",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
        },
        {
        "pagePath": "pages/home/home",
        "text": "my",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
        }
        ]
    }
}

The effects are as follows:  

4, flex layout

1. Basic concepts

Flex is the abbreviation of Flexible Box, meaning "flexible layout", which is used to provide maximum flexibility for box model.

Elements with Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, or "items" for short.

By default, the container has two axes: the horizontal main axis and the vertical cross axis. The start position of the spindle (the intersection with the border) is called main start, and the end position is called main end; The start position of the cross axis is called cross start and the end position is called cross end.
Items are arranged along the main axis by default. The spindle space occupied by a single item is called main size, and the cross axis space occupied is called cross size.

2. Basic style  

• display: flex; flex layout
• flex-direction: row; Specify the direction of the spindle: row/column
• justify-content: space-around; Arrangement of elements in the spindle direction: Flex start / flex end / space around / space between
• align-items: center; Arrangement of elements in the secondary axis direction: Flex start / flex end / space around / space between

3. Actual effect

index.wxml Code:

<!--pages/index/index.wxml-->
<text>yunlord</text>
<view class="c1">yunlord13</view>
<image src="/static/profile.png">  </image>

<view>Example</view>
<view class='introduce'>
    <view class='item'>
        <view class='title'>Yunlord Introduction of</view>
        <view class='tips'>
            <view class='status'>2021-10-23</view>
            <view class='count'>1200 People are interested</view>
        </view>
        <view class="big">
            <image src="/static/profile.png"></image>
        </view>
        
        <view class="small">
            <image src="/static/profile.png"></image>
            <image src="/static/profile.png"></image>
            <image src="/static/profile.png"></image>
            <image src="/static/profile.png"></image>

        </view>
    </view>
</view>

index.wxss Code:  

/* pages/index/index.wxss */

.c1{
    color:blue;
}

.introduce .item .title{
    font-size: 80rpx;
    font-weight: 600;
}

.introduce .item .tips{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 30rpx;
    color: gray;
}

.introduce .item .big{
    height: 600rpx;
    overflow: hidden;
}

/* .introduce .item .big image{
    width: 100%;
    height: 100%;
} */

.introduce .item .small{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.introduce .item .small image{
    height: 150rpx;
    width: 150rpx;
    padding: 20rpx;
}

  The effects are as follows:

4, Preview  

Next is the preview effect, but clicking the preview above will prompt this error.  

So we create a new app.js to solve the problem. Finally, we generate a QR code and scan the QR code to see the effect of our own applet on the mobile phone.

Welcome to the "Python + wechat applet development from scratch" series. This article is the third in the series and is constantly updated.