Teach you to write the first WeChat Mini Program page

Build the first Mini Program page

1. Homepage effect and implementation steps

 

 

• Create a new project and sort out the project structure

• Configure the navigation bar effect

• Configure tabBar effect

• Realize the carousel effect

• Achieve Jiugongge effect

• Implement image layout

2. Interface address

• Interface to obtain carousel data list【GET】https://www.escook.cn/slides

• The interface to obtain Jiugongge data list [GET] https://www.escook.cn/categories

1. Create a new project and sort out the project structure

1. Create a new project

Just refer to the author's previous tutorial to create a project

2. Project structure

 

The project can be divided into 5 areas as shown in the figure

1. Navigation Bar

2. Carousel

3. Jiugongge

4. picture layout

5. tabBar effect

2. Navigation bar area

1. Open the app.json file and add the following three paths under the pages node:

   "pages":[
     "pages/home/home",   //一定要注意顺序！！！
     "pages/massage/massage",
     "pages/myinfo/myinfo"
   ],

2. After saving, delete the index folder and logs folder under the pages folder

3. Modify the background color and title of the navigation bar

• Open the app.json file and find the window node

• navigationBarBackgroundColorChange the value under the window node #0088ccto your favorite color, but it must be a 6-digit binary number

• navigationBarTitleTextThis property can set the title

• navigationBarTextStyleThis attribute can set the font color of the title, pay attention! The value of this attribute is only black and white

4. You can view the effect after saving

 

 

Three, tabBar effect

1. Open the app.json file and add a tabBar node

2. Add the following configuration under this node

 "tabBar": {
     "selectedColor": "#0088cc",
     "list": [{
       "pagePath": "pages/home/home",
       "text": "主页",
       "iconPath": "images/tabs/home.png",
       "selectedIconPath": "images/tabs/home-active.png"
     },
   {
     "pagePath": "pages/massage/massage",
     "text": "消息",
     "iconPath": "images/tabs/message.png",
     "selectedIconPath": "images/tabs/message-active.png"
   },{
     "pagePath": "pages/myinfo/myinfo",
     "text": "联系我们",
     "iconPath": "images/tabs/contact.png",
     "selectedIconPath": "images/tabs/contact-active.png"
   }]
   }

It should be noted that in the tabBar node, the number of objects in the list attribute must be between 2 and 5

• pagePath: page path

• text: the name of the tabBar

• iconPath: the path of the tabBar icon

• selectedIconPath: the selected tabBar icon path

• selectedColor: the color of the tabBar name after selection

There are other attributes in tabBar, you can refer to the author's previous article

3. Save it and check the effect

 

 

4. Carousel map area

The keyword of the carousel is swiper

1. Open the home.wxml folder and build the structure of the carousel

 <!-- 轮播图 start -->
 <swiper indicator-dots circular     indicator-active-color="white">
   <swiper-item >
     <image src=""></image>
   </swiper-item> 
   
   <swiper-item>
   <image src=""></image>
 </swiper-item>
 </swiper>
 <!-- 轮播图 end -->

2. Open the home.wxss file and set the style of the carousel

 swiper {
   height: 350rpx;
 }
 swiper image {
   height: 100%;
   width: 100%;
 }

3. Add the src attribute to the image element, and the attribute value is the path of the photo in the carousel

Note: If you have several photos, you need to put several <swiper-item ></swiper-item> tags in the swiper

Only one image can be saved in each <swiper-item></swiper-item> tag

indicator-dots, circular, and indicator-active-colorthese three attributes are used to set the index dots in the carousel

 

 

5. Jiugongge District

1. Open the home.wxml file and build the structure of Jiugongge

 <!-- 九宫格 start -->
 <view class="grid-list">
   <view wx:for="{
   
   { gridList }}" wx:key="id" class="grid-item">
     <image src="{
   
   { item.icon }}"> </image>
     <text>{
   
   { item.name }}</text>
   </view>
 </view>
 <!-- 九宫格 end -->

Because rendering Jiugongge needs to request data from the server, you need to set the request under the home.js file

2. Open the home.js file and configure as follows

 // data节点 
 data: {
     swiperList: [],
   }  
 ​
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
       // 在声明周期中调用该方法
      this.getSwiperList(), 
 ​
   }
 // 方法
 getSwiperList() {
     wx.request({
       url: 'https://www.escook.cn/slides',
       method: 'GET',
       success: (res) => {
         this.setData({
           swiperList: res.data
         })
       }
     })
   }

At this point, the request can be sent successfully

3. Beautify the style of Jiugongge

Open the home.wxss file for the following configuration

 .grid-list {
   display: flex;
   flex-wrap: wrap;
   border-left: 1rpx solid #efefef;
   border-top: 1rpx solid #efefef;
 }
 .grid-item {
   width: 33.33%;
   height: 200rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-right: 1rpx solid #efefef;
   border-bottom: 1rpx solid #efefef;
   box-sizing: border-box;
 }
 .grid-item image {
   width: 60rpx;
   height: 60rpx;
 }
 ​
 .grid-item text {
   font-size: 24rpx;
   margin-top: 10rpx;
 }

6. Picture layout

1. Open the home.wxml file and build the basic structure of the picture layout

 <view class="img-box">
   <image src="/images/link-01.png" mode="widthFix"></image>
   <image src="/images/link-02.png" mode="widthFix"></image>
 </view>

2. Open the home.wxss file and beautify the style

 .img-box {
   display: flex;
   padding: 20rpx 10rpx;
   justify-content: space-around;
 }
 .img-box image {
   width: 45%;
 }

Check out the effect

 

 

---

At this point, the page of our first WeChat Mini Program is finished!

The editor has limited time, so I can only write about it in general for the time being, and the editor will continue to improve the article! ! !