Wechat small program framework analysis small hands-on (3) — imitating xiangha recipe small program making

Time:2020-2-12

Xiangha recipe is a small program around delicious food. You can check all kinds of recipes here.

 

1、 Open wechat developer tool and create a new project: xhcp. The following picture:

 

 

2、 Create the following directories:

 

 

 

 

3、 Place the bottom label navigation icon, food rotation picture, Gong grid navigation icon and xiangha headline food picture in the images under the pages folder:

 

 

 

I. design of bottom label bar

 

 

 4、 Open the app.json configuration file and add 5 page paths to the pages array“pages/cook/cook”,”pages/food/food”,”pages/headline/headline”,”pages/message/message”,”pages/me/me”。

   In the windows array, configure the window navigation background color as gray (), the navigation bar text as “learn to cook”, and the font color as white (ffffff):

 

 

5、 In the tabbar object, configure the navigation background color of the bottom label bar to be white (ාාffff), the default color of text to be gray (ා999999), and the color to be red when selected (#cc1004). In the list array, configure the corresponding page, navigation name, default icon and icon when selected for the navigation of the bottom label bar.

The complete code of app.json is as follows:

{
   "pages": [
     "pages/cook/cook",
     "pages/food/food",
     "pages/headline/headline",
     "pages/message/message",
     "pages/me/me"
   ],
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#494949",
     "Navigationbartitletext": "learning to cook",
     "navigationBarTextStyle": "white"
   },
   "tabBar": {
     "selectedColor": "#CC1004",
     "color": "#999999",
     "backgroundColor": "#ffffff",
     "borderStyle": "black",
     "list": [
       {
         "pagePath": "pages/cook/cook",
         "Text": "learning to cook",
         "iconPath": "pages/images/tab/cook-0.jpg",
         "selectedIconPath": "pages/images/tab/cook-1.jpg"
       },
       {
         "pagePath": "pages/headline/headline",
         "Text": "headlines",
         "iconPath": "pages/images/tab/headline-0.jpg",
         "selectedIconPath": "pages/images/tab/headline-1.jpg"
       },
       {
         "pagePath": "pages/food/food",
         "Text": "food circle",
         "iconPath": "pages/images/tab/food-0.jpg",
         "selectedIconPath": "pages/images/tab/food-0.jpg"
       },
       {
         "pagePath": "pages/message/message",
         "Text": "messages",
         "iconPath": "pages/images/tab/message-0.jpg",
         "selectedIconPath": "pages/images/tab/message-1.jpg"
       },
       {
         "pagePath": "pages/me/me",
         "Text": "my",
         "iconPath": "pages/images/tab/me-0.jpg",
         "selectedIconPath": "pages/images/tab/me-1.jpg"
       }
     ]
   }
 }

 

At this point, the bottom label navigation is designed:

 

 

 

 II. Gong grid navigation design

In the page of learning to cook, there are pictures of poster rotation (there is a special swiper slider view component in the wechat applet to achieve this effect), and there are four palace navigation: Recipe classification, video, food regimen and flash purchase.

6、 In the pages / Cook / cook.wxml file, first design the poster rotation area, use a picture for layout, the width of the picture is set to 100%, and the height is set to 230px:

 

 

The interface effect is as follows:

 

 

7、 Design palace navigation, divided into four navigation: menu classification, video, food health, flash purchase. Each navigation corresponds to an icon. Below the navigation is a gray space line:

Menu classification
     
     
     
     video
     
     
     
     Gourmet health
     
     
     
     Flash purchase

8、 Add styles for palace navigation in pages / Cook / cook.wxss:

 /* pages/cook/cook.wxss */
 .nav{
   display: flex;
   flex-direction: row;
   text-align: center;
 }
 .nav-item{
   width: 25%;
   margin-top: 20px;
   font-size: 12px;
 }
 .hr{
   height: 15px;
   background-color: #cccccc;
   margin-top: 15px;
   opacity: 0.2;
 }
 .head{
   display: flex;
   flex-direction: row;
   margin: 10px;
   font-size: 13px;
   color: #999999;
 }
 .right{
   position: absolute;
   right: 10px;
   color: #999999;
 }
 .hr2{
   height: 2px;
   background-color: #cccccc;
   opacity: 0.2;
 }

At this point, the interface layout of the poster rotation area and the palace navigation area is completed. The interface effect is as follows:

 

 

 

III. headline initialization data

As the client, the data of wechat applet comes from the server. Next, the simulation server provides the data of xiangha headline list. With the data, the page can be dynamically rendered.

9、 In pages / Cook / cook.js, add initdata data, add array array array in data page initialization data, and then assign the data defined by initdata to array array through SetData setting function:

// pages/cook/cook.js
 Page({
 
   /**
    *Initial data of the page
    */
   data: {
     array: []
   },
 
   /**
    *Life cycle function -- listening to page loading
    */
   onLoad: function (options) {
     var array = this.initData();
     this.setData({array:array});
   },
   initData:function(){
     var array = [];
     var object1 = new Object();
     object1.img = '../images/list/food-1.jpg';
     Object1. Title = 'love breakfast';
     Object1. Type = health preservation;
     Object1. Liulan = '30988 browse';
     Object1. Pinglun = '7 comments';
     array[0] = object1;
 
     var object2 = new Object();
     object2.img = '../images/list/food-2.jpg';
     Object2. Title: 'I just want to drink coffee when I'm sleepy';
     Object2. Type = 'family doctor online';
     Object2. Liulan = '29999 browse';
     Object2. Pinglun = '14 comments';
     array[1] = object2;
 
     var object3 = new Object();
     object3.img = '../images/list/food-3.jpg';
     Object3. Title = 'eat more oranges to make yellow people smaller';
     Object3. Type: 'family doctor online';
     Object3. Liulan = '19356 browse';
     Object3. Pinglun = '5 comments';
     array[2] = object3;
     
     var object4 = new Object();
     object4.img = '../images/list/food-4.jpg';
     Object4. Title: 'Sohu News, mobile phone has been used for a long time';
     Object4. Type = 'advertisement';
     Object4. Liulan = '5046 browse';
     Object4. Pinglun = '3 comments';
     array[3] = object4;
 
     var object5 = new Object();
     object5.img = '../images/list/food-5.jpg';
     Object5. Title: 'I just want to drink coffee when I'm sleepy';
     Object5. Type = 'family doctor online';
     Object5. Liulan = '29999 browse';
     Object5. Pinglun = '13 comments';
     array[4] = object5;
 
     return array;
   },
   /**
    *Life cycle function -- listen to the completion of the first rendering of the page
    */
   onReady: function () {
 
   },
 
   /**
    *Life cycle function -- monitor page display
    */
   onShow: function () {
 
   },
 
   /**
    *Life cycle function -- monitor page hidden
    */
   onHide: function () {
 
   },
 
   /**
    *Life cycle function -- monitor page unloading
    */
   onUnload: function () {
 
   },
 
   /**
    *Page related event processing function -- listening to user pull-down action
    */
   onPullDownRefresh: function () {
 
   },
 
   /**
    *Handling function of page pull bottom event
    */
   onReachBottom: function () {
 
   },
 
   /**
    *Users click the upper right corner to share
    */
   onShareAppMessage: function () {
 
   }
 })

 

Ⅳ. Rendering and binding data of headline list

In xiangha’s headlines, there are pictures of recipes, food names, categories, number of views and number of comments.

10、 In pages / Cook / cook.wxml, layout the information interface of xiangha headlines list:

Menu classification
     
     
     
     video
     
     
     
     Gourmet health
     
     
     
     Flash purchase
     
   
   
   
   Fragrant Harbin headlines
   
   
   
     
       
       
       
       
         Love breakfast
         
           Healthy regimen
           30988 browse
           7 comment

11、 In pages / Cook / cook.wxss, add a style for xiangha’s headline list information:

 .item{
   display: flex;
   flex-direction: row;
   margin-left: 10px;
   margin-bottom: 5px;
 }
 .desc{
   margin-left: 20px;
   line-height: 30px;
 }
 .title{
   font-weight: bold;
 }
 .count{
   display: flex;
   flex-direction: row;
   font-size: 12px;
   color: #999999;
 }
 .liulan{
   position: absolute;
   right: 70px;
 }
 .pinglun{
   position: absolute;
   right: 10px;
 }

The interface effect is as follows:

 

 

 

 

 

 

12、 Next, load the data dynamically through data binding and Wx: for loop:

Menu classification
     
     
     
     video
     
     
     
     Gourmet health
     
     
     
     Flash purchase
     
   
   
   
   Fragrant Harbin headlines
   
   
   
   
   
       
       
       
       
         {{item.title}}
         
           {{item.type}}
           {{item.liulan}}
           {{item.pinglun}}

The interface effect is as follows:

 

 

V. headline template reference

13、 Add a template.wxml file in the template directory, and make a template for the xiangha headlines list. The template name is cookies. Place the contents of the list loop in the file:

 

14、 The same effect can be achieved by referencing the cookies template to the cookie.wxml:

 

 Templates can be used in different places to achieve the effect of one-time writing and multiple references.

 

Recommended Today

Vim8 and youcompleteme installation

Original link: https://ssshooter.com/2020-01 The whole process is not difficult, but I am very strange to Linux system. I am a bit confused when compiling and installing. But after the installation, I think it’s not difficult if I don’t go deep into the principle. It’s very common to compile the configured source code with a compiler, […]