属性说明:
属性 |
类型 |
是否必填 |
描述 |
current |
Number |
是 |
当前激活的模式,list节点的索引值 |
list |
Array |
是 |
启动模式列表 |
list说明:
属性 |
类型 |
是否必填 |
描述 |
name |
String |
是 |
启动模式名称 |
path |
String |
是 |
启动页面路径 |
query |
String |
否 |
启动参数,可在页面的 onLoad 函数里获得 |
uni-app 是一个使用 Vue.js(opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
开发规范主要事遵循小程序的规范
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
js文件或script标签内(包括 renderjs 等)引入js文件时,可以使用相对路径和绝对路径,形式如下
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录 import add from '@/common/add.js'; // 相对路径 import add from '../../common/add.js';
注意
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
通过pages来配置页面
属性 |
类型 |
默认值 |
描述 |
path |
String |
配置页面路径 |
|
style |
Object |
配置页面窗口表现,配置项参考 pageStyle |
pages数组数组中第一项表示应用启动页
注意:这里和路由不一样,想要显示页面,就要在pages.json中配置路径;
想要h5页面能够显示下拉刷新的效果,可以单独配置;
tops:
配置pages.json页面中的选项时,最后一个配置后面不能带“ ,”---否则会报错
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path":"./pages/message", "style":{ "navigationBarTitleText":"message pages~", "backgroundColor":"#007AFF", "navigationBarBackgroundColor":"#aaaa00", "enablePullDownRefresh":true, "navigationBarTextStyle":"white", "h5":{///单独配置h5页面的效果 "pullToRefresh":{ "color":"#007AFF" } } } },
如果应用是一个多 tab (界面/页面)应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。
Tips
属性说明:
属性 |
类型 |
必填 |
默认值 |
描述 |
平台差异说明 |
color |
HexColor |
是 |
tab 上的文字默认颜色 |
||
selectedColor |
HexColor |
是 |
tab 上的文字选中时的颜色 |
||
backgroundColor |
HexColor |
是 |
tab 的背景色 |
||
borderStyle |
String |
否 |
black |
tabbar 上边框的颜色,仅支持 black/white |
App 2.3.4+ 支持其他颜色值 |
list |
Array |
是 |
tab 的列表,详见 list 属性说明,最少2个、最多5个 tab |
||
position |
String |
否 |
bottom |
可选值 bottom、top |
top 值仅微信小程序支持 |
其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:
属性 |
类型 |
必填 |
说明 |
pagePath |
String |
是 |
页面路径,必须在 pages 中先定义 |
text |
String |
是 |
tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
iconPath |
String |
否 |
图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标 |
selectedIconPath |
String |
否 |
选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效 |
案例代码:
"tabBar": { "color":"#555500", "selectedColor":"#007AFF", "backgroundColor":"#aaff7f", "borderStyle":"#a5a5a5", "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" }, { "text": "我们", "pagePath":"pages/contact/contact", "iconPath":"static/tabs/contact.png", "selectedIconPath":"static/tabs/contact-active.png" } ] }
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。
注意这个属性和与tabBar平级
属性说明:
属性 |
类型 |
是否必填 |
描述 |
current |
Number |
是 |
当前激活的模式,list节点的索引值 |
li |