1.在HBuilderX中新建uni-app
image
2.项目初始目录结构
image
3.调整项目目录结构如下图
image
4.配置pages.json文件
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页"
}
},
{
"path": "pages/ucenter/ucenter",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/ucenter/setting",
"style": {
"navigationBarTitleText": "个人设置"
}
}
],
"tabBar": {
"color": "#000000",
"selectedColor": "#2F85FC",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/home.png",
"selectedIconPath": "static/home-active.png",
"text": "主页"
},
{
"pagePath": "pages/ucenter/ucenter",
"iconPath": "static/center.png",
"selectedIconPath": "static/center-active.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#2F85FC",
"backgroundColor": "#FFFFFF"
}
}
5.简单写一下index.vue和ucenter.vue内容
index.vue
主页,{{ title }}
ucenter.vue
{{ name }}的个人中心
6.启动雷神模拟器,选择真机运行
image
控制台信息:
image
模拟器运行效果
image
image
点击“设置”可以跳转到个人设置新页面,也可以返回到“我的”页面
image
7.真机插入USB也可以运行
8.uni-app官网:https://uniapp.dcloud.io/
9.阿里巴巴矢量图标库:https://www.iconfont.cn/