目录
globalStyle
用于设置应用的状态栏、导航条、标题、窗口背景色等。
| 属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|
| backgroundColor | HexColor | #ffffff | 下拉显示出来的窗口的背景色 | 微信小程序 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark / light | 微信小程序 |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 |
"globalStyle": {
"backgroundTextStyle":"dark",
"backgroundColor": "#f0f",
"enablePullDownRefresh":true
}注意一点，tabbar中的图片必须要放在static文件夹中的img文件夹里，不然找不到路径
app-plus（主要是配置H5以及App，小程序不支持）
配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。以下仅列出常用，更多配置项参考 WebviewStyles。
| 属性 | 类型 | 默认值 | 描述 | 平台兼容 |
|---|---|---|---|---|
| background | HexColor | #FFFFFF | 窗体背景色。无论vue页面还是nvue页面，在App上都有一个父级原生窗体，该窗体的背景色生效时间快于页面里的css生效时间 | App |
| titleNView | Object | 导航栏 ，详见:导航栏 | App、H5 | |
| pullToRefresh | Object | 下拉刷新 | App |
app-plus中的titleNView
| 属性 | 类型 | 默认值 | 描述 | 版本兼容性 |
|---|---|---|---|---|
| backgroundColor | String | #F7F7F7 | 背景颜色，颜色值格式为"#RRGGBB"。在使用半透明标题栏时，也可以设置rgba格式 | |
| buttons | Array | 自定义按钮 | 纯nvue即render:native时暂不支持 | |
| titleColor | String | #000000 | 标题文字颜色 | |
| titleOverflow | String | ellipsis | 标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪；"ellipsis"-超出显示区域时尾部显示省略标记（...）。 | |
| titleText | String | 标题文字内容 | ||
| titleSize | String | 标题文字字体大小 | ||
| type | String | default | 导航栏样式。"default"-默认样式；"transparent"-滚动透明渐变；"float"-悬浮导航栏。 | App-nvue 2.4.4+ 支持 |
| searchInput | Object | 原生导航栏上的搜索框配置，详见：searchInput | 1.6.0 | |
| homeButton | Boolean | false | 标题栏控件是否显示Home按钮 | |
| autoBackButton | Boolean | true | 标题栏控件是否显示左侧返回按钮 | App 2.6.3+ |
| backButton | Object | 返回按钮的样式，详见：backButton | 2.6.3 | |
| backgroundImage | String | 支持以下类型： 背景图片路径 - 如"/static/img.png"，仅支持本地文件绝对路径，根据实际标题栏宽高拉伸绘制； 渐变色 - 仅支持线性渐变，两种颜色的渐变，如“linear-gradient(to top, #a80077, #66ff00)”， 其中第一个参数为渐变方向，可取值： "to right"表示从左向右渐变， “to left"表示从右向左渐变， “to bottom"表示从上到下渐变， “to top"表示从下到上渐变， “to bottom right"表示从左上角到右下角， “to top left"表示从右下角到左上角 | 2.6.3 | |
| titleAlign | String | "auto" | 可取值： "center"-居中对齐； "left"-居左对齐； "auto"-根据平台自动选择（Android平台居左对齐，iOS平台居中对齐） | 2.6.3 |
| coverage | String | "132px" | 标题栏控件变化作用范围，仅在type值为transparent时有效，页面滚动时标题栏背景透明度将发生变化。 当页面滚动到指定偏移量时标题栏背景变为完全不透明。 支持百分比、像素值 |
titleNView中的searchInput
可以在titleNView的原生导航栏上放置搜索框。其宽度根据周围元素自适应。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| autoFocus | Boolean | false | 是否自动获取焦点 |
| align | String | center | 非输入状态下文本的对齐方式。可取值： "left" - 居左对齐； "right" - 居右对齐； "center" - 居中对齐。 |
| backgroundColor | String | rgba(255,255,255,0.5) | 背景颜色 |
| borderRadius | String | 0px | 输入框的圆角半径，取值格式为"XXpx"，其中XX为像素值（逻辑像素），不支持rpx。 |
| placeholder | String | 提示文本。 | |
| placeholderColor | String | #CCCCCC | 提示文本颜色 |
| disabled | Boolean | false | 是否可输入 |
titleNView中的buttons
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | String | none | 按钮样式，可取值见：buttons 样式 |
| color | String | 默认与标题文字颜色一致 | 按钮上文字颜色 |
| background | String | 默认值为灰色半透明 | 按钮的背景颜色，仅在标题栏type=transparent时生效 |
| colorPressed | String | 默认值为 color 属性值自动调整透明度为 0.3 | 按下状态按钮文字颜色 |
| float | String | right | 按钮在标题栏上的显示位置，可取值"left"、"right" |
| fontWeight | String | normal | 按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。 |
| fontSize | String | 按钮上文字大小 | |
| fontSrc | String | 按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。 | |
| select | String | false | 是否显示选择指示图标（向下箭头），常用于城市选择 |
| text | String | 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。 | |
| width | String | 44px | 按钮的宽度，可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，不支持rpx。按钮的内容居中显示； "auto" - 自定计算宽度，根据内容自动调整按钮宽度 |
pages.json 页面（此页面可显示app以及h5的效果）
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": {
"backgroundColor": "#f0f",
"titleColor": "#fff",
"titleOverflow": "ellipsis",
"titleText": "我是第一页，我的话非常的多，veryveryvery的多，",
"type": "default",
"searchInput": {
"borderRadius": "5px",
"backgroundColor": "#ccc",
"placeholder": "请输入所查询的内容",
"placeholderColor": "black",
"autoFocus": true,
"align": "center",
"disabled": true
},
"buttons": [{
"fontSrc": "./static/font/iconfont.ttf",
"fontSize": "28px",
"text": "\ue661",
"float": "right",
"backgorund": "none"
},
{
"fontSrc": "./static/font/iconfont.ttf",
"fontSize": "28px",
"text": "\ue61c",
"float": "left"
}
]
}
}
}
}, {
"path": "pages/cart/cart",
"style": {}
}, {
"path": "pages/cate/cate",
"style": {}
}, {
"path": "pages/myfile/myfile",
"style": {}
}
],
"globalStyle": {
"backgroundTextStyle": "dark",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#f00",
"backgroundColor": "#f0f",
"enablePullDownRefresh": true
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/img/tabbar/index.png",
"selectedIconPath": "static/img/tabbar/indexSelected.png",
"text": "首页"
}, {
"pagePath": "pages/cate/cate",
"iconPath": "static/img/tabbar/class.png",
"selectedIconPath": "static/img/tabbar/classSelected.png",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/img/tabbar/cart.png",
"selectedIconPath": "static/img/tabbar/cartSelected.png",
"text": "购物车"
}, {
"pagePath": "pages/myfile/myfile",
"iconPath": "static/img/tabbar/my.png",
"selectedIconPath": "static/img/tabbar/mySelected.png",
"text": "我的"
}
],
"midButton": {
"width": "100px",
"iconPath": "static/img/tabbar/middle.png",
"backgroundImage": "static/logo.png"
}
}
}
效果如下：
做微信小程序的话使用rpx进行开发（Apad不兼容）
如果已经在app中写过搜索栏，然后又用小程序写一个搜索栏，这样会导致app和h5中出现两个搜索栏，这时就需要用到条件编译
跨端兼容
uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
- 大量写 if else，会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改，会让后续升级变的很麻烦。
在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。
条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- %PLATFORM%：平台名称
| 条件编译写法 | 说明 |
|---|---|
| #ifdef APP-PLUS | 仅出现在 App 平台下的代码 |
| #ifndef H5 | 除了 H5 平台，其它平台均存在的代码 |
| #ifdef H5 || MP-WEIXIN | 在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集） |
扫一扫
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
