入门,创建uni-app项目
开始使用uni-app
目录结构
一个uni-app工程,默认包含如下目录及文件:
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录
├─platforms 存放各平台专用页面的目录
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路由、导航条、选项卡等页面类信息
使用全局配置与页面配置
在pages.json中通过globalStyle进行全局配置
// 全局配置
"globalStyle": {
"navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景色
"navigationBarTitleText": "Trist", // 导航栏文字
"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色
"backgroundColor": "blue", // 窗口背景色
"enablePullDownRefresh": true, // 是否开启下拉刷新
"backgroundTextStyle": "light", // 下拉loading的样式
"onReachBottomDistance": 20 // 页面上拉触底事件触发时距页面底部的距离
}
在pages.json中通过pages进行页面配置
// 页面配置,优先级大于全局配置,相同样式会将全局配置覆盖
"pages": [ //pages数组中第一项表示应用启动页
{
"path": "pages/message/message",
"style": { //使用style进行页面的单独样式配置
"navigationBarTitleText": "test"
},
"h5": { //同样若需要在不同平台可在此进行单独配置
"pullToRefresh":{
"color": "#7D26CD"
}
}
},
{
"path": "pages/index/index"
}
]
使用tabBar
Tips
- 当设置 position 为 top 时,将不会显示 icon。
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花
- tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
5.顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡。
示例
"tabBar": {
"color": "#A0522D", // 文字颜色
"selectedColor": "#B3EE3A", // 选中时文字颜色
"backgroundColor": "#fff", // tab背景色
"borderStyle": "white", // tabBar边框颜色
"position": "bottom", // 定位
"list": [
{
"text": "首页", // 第一个标签名称
"pagePath":"pages/index/index", // 标签路由
"iconPath":"static/tabs/home.png", // 标签图标
"selectedIconPath":"static/tabs/home-active.png" // 标签选中时图标
},
{
"text": "信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
]
}