1.uniapp工程目录
一个uni-app工程,默认包含如下目录及文件:
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid App端存放本地html文件的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─wxcomponents 存放小程序组件的目录,详见
├─nativeplugins App原生插件 详见
├─unpackage 非工程代码,一般存放运行或发行的编译结果
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
└─uni.scss 这里是uni-app内置的常用样式变量
2.应用首页
uni-app会将pages.json -> pages配置项中的第一个页面,作为当前工程的首页(启动页)。 pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。
3.pages.json示例
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "牛牛编程"
}
},
{
"path": "pages/course/course",
"style": {
"navigationBarTitleText": "牛牛编程"
}
},
{
"path": "pages/favorites/favorites",
"style": {
"navigationBarTitleText": "牛牛编程"
}
},
{
"path": "pages/center/center",
"style": {
"navigationBarTitleText": "牛牛编程"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#1C86EE",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"color": "#999999",
"selectedColor": "#219DF4",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/homeed.png"
}, {
"pagePath": "pages/course/course",
"text": "教程",
"iconPath": "static/tabbar/course.png",
"selectedIconPath": "static/tabbar/coursed.png"
}, {
"pagePath": "pages/favorites/favorites",
"text": "收藏",
"iconPath": "static/tabbar/favorites.png",
"selectedIconPath": "static/tabbar/favoritesed.png"
}, {
"pagePath": "pages/center/center",
"text": "我的",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "static/tabbar/usered.png"
}]
}
}