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
需条件编译的代码
#endif
仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif
除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif
在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）
