uni-app的基本使用

uni-app介绍

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码。可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

即使不跨端。uni-app同时也是更好的小程序开发框架。

为什么要去学习uni-app?
相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架。相对公司而言，也大大减少了开发成本。

环境搭建

安装编辑器hbuilderX 下载地址
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
下载APP开发版，可开箱即用
安装微信开发者工具 下载地址 根据电脑配置下载

利用HbuilderX初始化项目

点击HbuilderX菜单栏 ：文件>新建>项目
选择uni-app，填些项目名称，项目创建的目录

介绍项目目录和文件作用

• pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径，窗口样式，原生的导航栏，底部的原生 tabbar 等
• manifest.json 文件是应用的配置文件，用于指定应用的名称，图标，权限等
• App.vue 是我们的根组件，所有页面都是在App.vue 下切换的，是页面入口文件，可以调用应用的生命周期函数
• main.js 是我们项目的入口文件，主要作用是初始化 vue 实例并使用需要的插件
• uni.scss 文件的用途是为了方便整体控制应用的风格，比如按钮的颜色，边框风格，该文件里预置了一批 scss 变量预置
• unpackage 就是打包目录，在这里有各个平台的打包文件
• pages 所有页面存放目录
• static 静态资源目录，例如图片，字体文件
• compontents 组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

通过pages来配置页面

官网pages链接

pages数组数组中第一项表示应用启动页

"pages": [ 、
		{
   
			"path":"pages/message/message" //启动页
		},
		{
   
			"path": "pages/index/index",
			"style": {
   
				"navigationBarTitleText": "uni-app" //导航栏标题
			}
		}
	]

通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式

{
   
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
   
			"path": "pages/message/message",
			"style":{
   
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#007AFF",
				"h5":{
   
					"pullToRefresh":{
   
						"color":"#7D26CD"
					}
				}
			}
		},
		{
   
			"path": "pages/index/index"
		}
	]

配置tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

案例代码：

	"tabBar":{
   
		"color":"#a0522d",
		"selectedColor":"#B3EE3A",
		"backgroundColor":"#FFFFFF",
		"borderStyle":"white",
		"position":"bottom",
		"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"
			}
		]
	}

condition启动模式配置

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

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

案例：

"condition":{
   
		"current":0,
		"list":[
			{
   
				"name":"详情页",
				"path":"pages/detail/detail",
				"query":"id=80"
			}
		]
	}

组件的基本使用

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接成自己的应用
uni-app中的组件，就像html中的div、p、span等标签的作用一样，用于搭建页面的基础结构

text文本组件的用法

text组件的属性

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：ensp、emsp、nbsp
decode	boolean	false	否	是否解码

space值说明

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

• text组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中

Tips

• <text> 组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。
• 在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
• decode 可以解析的有   < > & '    。
  各个操作系统的空格标准并不一致。
• 除了文本节点以外的其他节点都无法长按选中。
• 支持 \n 方式换行。
• 如果使用 <span> 组件编译时会被转换为 <text>。

view视图容器组件的用法

View视图容器，类似于HTML中的div

组件的属性