uni-app兼容app-h5-微信小程序——下拉菜单、搜索栏

目录

globalStyle

app-plus（主要是配置H5以及App，小程序不支持）

app-plus中的titleNView

titleNView中的searchInput

 titleNView中的buttons

跨端兼容

条件编译

---

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 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

在微信小程序中引入字体图标注意事项