Analysis of wechat small program framework


There are four tabs at the bottom of the old cat’s Eye Movie: movie, cinema, discovery, mine, as shown in the following figure:

1、 First, open wechat developer tool and create a new project: movie. The following picture:


2、 Create the following directories:


3、 Place the material of the navigation icon of the bottom label in the bar of images (0 means the label is not selected, 1 means it is selected), as shown in the figure:


4、 Open the app.json configuration file, and add the path of four pages in the pages array – Movie “pages / movie / movie”, cinema “pages / Cinema / cinema”, found “pages / find / find”, my “pages / me / me”, after saving, the corresponding page folder will be generated automatically; delete “pages / index”, “pages / logs / logs” page path and the corresponding folder.

5、 In the window array, configure the window navigation background color to be red (ා d53e37), the navigation bar text to be movie, and the font color to be white, as shown below:



6、 In the tabbar object, configure the navigation background color of the bottom label as gray (񖓿 f5f5f5), the text as white by default, and the text as red when selected (񖓿 d53e37). In the list array, configure the corresponding page, navigation name, default time icon and selected time icon of the bottom label navigation. The following picture:


At this point, the configuration of the navigation at the bottom of the cat’s eye movie is completed. The effect picture is as follows. When you click different navigation labels, you can switch between different pages, and the navigation icon and navigation text will be selected.