After using the WeChat developer tools to create a project, a single-page applet will be run by default. The running effect and corresponding modifications to the file are as follows.
According to the picture above, the text displayed on the interface can be modified by modifying the corresponding content.
This is a single-page applet. If we want to implement a multi-page applet, we must first understand a concept.
1. TabBar
TabBar is a common page effect in mobile applications and is used to quickly switch between multiple pages. There are some tabBars in the mini program at the top and some at the bottom, with the majority being at the bottom.
By clicking the tabBar in the mini program, you can switch to different pages. In a small program, there are at least 2 tabBars and at most 5 tabBars.
Initial content of app.json file.
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}"window" is used to configure the top navigation of the page.
"window": {
"backgroundTextStyle": "light", //下拉刷新的文字颜色
"navigationBarBackgroundColor": "#fff", //顶部背景
"navigationBarTitleText": "Weixin", //标题文字内容
"navigationBarTextStyle": "black" //标题文字颜色
},app.json is equivalent to the routing configuration file, and the pages/index folder represents the homepage.
2. Run multiple pages
1. Create a new folder
Right-click in the pages directory and select "New Folder" and name it abc. An abc folder at the same level as the index folder will be created.
2. Create a new page
Right-click on the abc folder, select "New Page" and name it abc. The abc folder will generate abc.js file, abc.json file , abc.wxml file and abc.wxss file. And, very importantly, the "pages" content of the app.json file will be modified.
3. Prepare icon files
With the new tabBar and the original homepage, we now need to provide icons for these two pages to be used when clicked. Because icons have two states: selected and unselected, we need to prepare icons in two states for the two tabBars, that is, four icons.
The size requirement of the icon can be found by checking the official website to be 81*81px.
https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.setTabBarItem.html#%E5%8F%82%E6%95%B0
(1) Right-click on the same level as pages, that is, the project folder (we are CHECK05 here), select a new folder, and name it "static".
(2) Right-click under the static folder, select " New Folder " and name it "images".
(3) Save the following 4 pictures in the images folder with a size of 81*81px, namely tab_home_selected.png, tab_home.png, tab_my_selected.png and tab_my.png.
(4) Modify the app.json file and write "tabBar".
According to the grammatical requirements, write "," after "sitemapLocation": "sitemap.json", the penultimate line of the file, then change the line and write the tabBar content.
That is, from the sitemapLocation line to the last line of the file, it is displayed as follows.
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/abc/abc"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"Weixin",
"navigationBarTextStyle":"black"
},
"style":"v2",
"sitemapLocation":"sitemap.json",
"tabBar":{
"color":"#333",
"selectedColor":"#d43c33",
"backgroundColor":"#fff",
"position":"bottom",
"list":[
{
"pagePath":"pages/index/index",
"text":"主页",
"iconPath":"pages/static/images/tab_home.png",
"selectedIconPath":"pages/static/images/tab_home_selected.png"
},
{
"pagePath":"pages/abc/abc",
"text":"个人中心",
"iconPath":"pages/static/images/tab_my.png",
"selectedIconPath":"pages/static/images/tab_my_selected.png"
}
]
}
}Note that please operate in the English input method state, otherwise it may cause an error when entering Chinese spaces, and it will be difficult to troubleshoot.
In order to avoid errors caused by Chinese spaces after pasting, I deleted all the spaces.
After successful compilation, two navigations are displayed at the bottom. The "Home Page" and "Personal Center" display effects are as follows.
