![b529a9d06cdd70eaeefe5377b59c6b8f.png](https://img-blog.csdnimg.cn/img_convert/b529a9d06cdd70eaeefe5377b59c6b8f.png)
作者 | Jeskson来源 | 达达前端小酒馆
uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通讯。
pages.json文件时用来对uni-app进行全局配置的,它是用来写页面文件的路径,窗口样式,底部的tabbar等,类似于小程序中的app.json的页面管理。这里注意的是定位,在小程序中是在app.json的,而在uni-app中式在manifest配置的,这一点是我做地图时注意到的内容。
![96a4847d4d7a38113f2fc527a66c0ba4.png](https://img-blog.csdnimg.cn/img_convert/96a4847d4d7a38113f2fc527a66c0ba4.png)
pages.json:
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面,必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
}
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"blurEffect": "none|extralight|light|dark", // 模糊效果,使用模糊效果时不要设置背景颜色,否则模糊效果会失效,默认值为none(仅iOS平台支持 HBuilderX 2.4.3+)
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
}
}
globalStyle,设置应用的状态栏,导航条,标题,窗口背景颜色等。
pages,配置页面路径。第一项为应用入口,增加或是减少页面,都在pages数组中进行修改即可。
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─static