Vue WeChat applet development (2)-menu and page
Write catalog title here
Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
The first part we are talking about the development environment to build the article entrance
is now beginning to develop
components: the general assembly do not control
pages: catalog page
static: static resource
unpackages: compiled applet here
App.vue: entrance
main.js js files can register globals Component introduces global js and other
manifest.json: basic configuration file
pages.json: page configuration file
uni.scss: common style variables built in uni-app
Icon selection
Personal and often we switch to switch Home icon will change color
but first we're going to select an icon ICON two color versions of a state to choose a non-selected state
recommended Ali vector
to find the desired picture
Create a new tabs directory under static in Hbulider x, put the downloaded picture in the tabs directory and change the name to follow the English translation.
active is selected
Create and register page
Basic configuration document entry: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
Create a new directory in the pages directory, create a new index.vue file in the directory,
as shown below
Find the pages.json file registration page
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
}
}]
Like the code above, we created two pages and registered the pages
Bottom navigation
Bind the navigation page
color, backgroundColor, etc. in the tabBar to set the style, which can be understood according to the translation meaning.
In the list { text is the page name, pagePath is the page address iconPath is the icon address (not selected) selectedIconPath is the selected picture address }
"tabBar": {
"color": "#999",
"backgroundColor": "#fafafa",
"selectedColor": "#333",
"borderStyle": "white",
"list": [{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png"
}, {
"text": "我的",
"pagePath": "pages/mine/index",
"iconPath": "static/tabs/mine.png",
"selectedIconPath": "static/tabs/mine-active.png"
}],
"position": "bottom"
}
The configuration effect is as follows.
We can add pages and configure the bottom navigation in this way. Of course, we can also customize the navigation. It
will be launched later.
Front end: js entry vue entry vue development applet, etc.
Back end: java entry springboot entry, etc.
Server: mysql entry server simple instructions cloud server to run the project
python: recommended not to warm up the fire, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our QQ group to communicate: 974178910
if you have any questions, you can leave a message below, and you will reply if you see it.