uni-app跨端开发初体验

uni-app

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，安卓，以及各种小程序

uni-app非常适合进行跨端开发，正对开发者减少学习成本，对于公司减少开发成本

uni-app开发微信小程序注意事项

1. 配置微信开发者工具路径，工具选项里设置
2. 开启工具的服务端口，微信开发工具中的设置->安全设置->开启端口

uni-app项目目录介绍

1. pages：存放uni-app的页面
2. static：存放静态资源
3. unpackage：存放最终打包输出文件
4. App.vue：项目的根组件，所有页面都是在App.vue下进行切换的，可以调用应用的生命周期函数
5. main.js：项目的入口文件，项目首先加载main.js
6. manifest.json：用于配置应用（基础配置/图标/打包配置等）
7. pages.json：用于设置整个项目页面的路径和窗口外观（包括pages和globalStyle）
8. uni.scss：常用的样式变量

uni-app开发规范

1. 页面文件遵循Vue单文件组件，.vue文件中有template/script/style
2. 组件标签靠近小程序规范，view标签等
3. 接口能力靠近小程序规范，小程序中调用小程序的api使用wx.xx，uni-app使用uni.xx
4. 数据绑定以及事件处理同Vue.js规范
5. 为兼容多端运行，建议使用flex布局进行开发

globalStyle全局外观配置

目标文件：pages.json

重要api

1. navigationBarBackgroundColor导航栏背景颜色
2. navigationBarTextStyle导航栏标题颜色及状态栏前景颜色，仅支持 black/white
3. navigationBarTitleText导航栏标题文字内容
4. enablePullDownRefresh是否开启下拉刷新
5. backgroundColor下拉显示出来的窗口的背景色
6. backgroundTextStyle下拉 loading 的样式，仅支持 dark / light
7. onReachBottomDistance页面上拉触底事件触发时距页面底部距离，单位只支持px

同样也可以配置 H5 or app 里的下拉刷新/导航栏的独有的样式，详情看链接

globalStyle属于全局配置，pages中属于页面级配置(path和style)，pages中的配置可以奖globakStyle中的配置覆盖

tabBar配置

tabBar的配置同样也在pages.json中配置

tabBar是一个list，并且tabBar实例的数量最少2个，最多5个

1. color tab上的文字默认颜色
2. selectedColor tab上的文字选中时的颜色
3. backgroundColor tab的背景色
4. borderStyle tabbar上边框的颜色，可选值 black/white
5. position 可选值 bottom、top（注意：默认为bottom，如果为top则表示tabBar在应用顶部，并且为top不可以有小图标，并且只在小程序中起作用）
6. list（Array） tab 的列表，详见 list 属性说明，最少2个、最多5个 tab

其中list最重要：

{
	"tabBar": {
		"list": [
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"text":"消息",
				"pagePath":"pages/message/message",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			}
		],
		"selectedColor":"#ffaa7f"
	}
}

condition配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面

当在微信小程序中我们转发了一个商品的详情页面给朋友，朋友点击这个页面就属于模拟直达页面。

condition我们需要配置 模式名称，启动页面的路径 和 参数（可选）。其中参数用于请求数据并加载指定内容，在页面onLoad函数中获得

{
	"condition": { //模式配置，仅开发期间生效
	    "current": 0, //当前激活的模式（list 的索引项）
	    "list": [{
	            "name": "swiper", //模式名称
	            "path": "pages/component/swiper/swiper", //启动页面，必选
	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到
	        },
	        {
	            "name": "test",
	            "path": "pages/component/switch/switch"
	        }
	    ]
	}
}

uni-app中的标签元素

view

view是视图容器，它类似于传统html中的div，用于包裹各种元素内容

如果使用div编译时会转换成view

• hover-class 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
• hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态（默认false）
• hover-start-time 按住后多久出现点击态
• hover-stay-time 手指松开后点击态保留时间

text

text是文本组件，用于包裹文本内容

如果使用span将会编译成text

• space 显示空格
• 支持 \n 方式换行

其他更多标签元素：