uni-app uni-app简介
uni-app简介
简介
功能框架

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

uni-app uni-app创建和运行
uni-app创建和运行
1. 通过 HBuilderX 可视化界面
创建uni-app
运行uni-app
2. 通过vue-cli命令行
环境安装
创建uni-app
运行、发布uni-app
3. 使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别
编译器的区别
开发工具的区别
官方文档的说明

uni-app创建和运行
uni-app支持通过 HBuilderX 可视化界面、vue-cli命令行 两种方式快速创建项目。
1. 通过 HBuilderX 可视化界面
创建uni-app


uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
运行uni-app


浏览器运行




真机运行




小程序运行




2. 通过vue-cli命令行
环境安装
全局安装vue-cli
npm install -g @vue/cli

创建uni-app
使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project

使用alpha版（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：


运行、发布uni-app
npm run dev:%PLATFORM%

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：




值
平台




app-plus
app平台生成打包资源（仅支持npm run build:app-plus，也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试）


h5
H5


mp-alipay
支付宝小程序


mp-baidu
百度小程序


mp-weixin
微信小程序


mp-toutiao
字节跳动小程序


mp-qq
qq 小程序


mp-360
360 小程序


quickapp-webview
快应用通用


quickapp-webview-union
快应用联盟


quickapp-webview-huawei
快应用华为


3. 使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别
编译器的区别
开发工具的区别
官方文档的说明
链接: uni-app官方文档

uni-app是一个使用 Vue.js 开发跨平台应用的前端框架，使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者，或者创业公司来说就是开发神器，省去了很多开发成本。下面就给大家介绍一下怎么快速上手uni-app。

uni-app使用的是vuejs的语法，所以会vuejs的朋友就可以跳过学习语法这一步了，还不会vuejs的朋友也不要紧，可以先去vue官方文档看看，vue的文档可以说非常通俗易懂了，如果你有遇到前端方面的问题或者需要一些前端学习资料可以加q群：682783851。下面就假设大家都会vuejs了。

首先，我们已经知道uni-app是用来制作一个跨平台应用的，所以，在开始之前，我们一定要知道uni-app是如何打包到多个平台的，使用uni-app开发，我这里是建议大家使用官方的开发者工具的，官方工具也非常好用，对于一些配置项非常方便，可以省去很多麻烦，使用开发者工具我们就知道了，uni-app跨平台都是开发者工具来完成编译的。

那么对于多个平台，是不是只需要看一端就行了呢？答案是否定的，uni-app对百分之90的样式是完全跨平台的，对于一些特殊的，因为每个平台要求不一样，所以我们要使用条件编译来做适配，另外对于一些第三方授权登录或者支付功能每个平台也有所不同。这里我们注意要使用条件编译，重要点是一定要注意每个平台对组件或接口的兼容性。

另外，需要注意的是uni-app中对vue语法的兼容性，使用 Vue.js 注意事项

了解上面的两点之后，我们就可以开始创建一个项目了，打开hbuilder X，左上角文件-新建-项目，可以选择uni-app的模板学习一下，看看uni-app的目录结构如何，下面是【购靓号】项目的目录结构

下面目录说明好好看一下

common      是存放公共js和css的目录，大家可以把一些工具js或者公共的css放这里面

components是放组件的目录，我们所有的组件都可以放这里面，记住组件里面不能使用uni-app页面钩子函数

pages          是uni-app放页面的文件夹，我们每次在这里面新建一个页面，hbuilder X都会在pages.json里面配置好。

static           是存放字体或图片的文件夹，一些静态资源都可以放这里面

store           是vuex状态管理，因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了

subpages    是因为内容过多，分的包，这里面新建的页面pages.json里面不会自动生成对应配置项

subpagesA 也是分的包，因为小程序限制，所以建议大家在一开始就考虑分包情况。免得后面又要整理

unpackage  里面的打包后的东西，我们可以不用管，h5打包后会放在这个里面的dist/build/h5里面

App.vue      可以说是入口文件，我们公共的css可以放这里面，应用启动需要做的事情也可以放这里面，但是这个里面是不能进行页面跳转的

main.js        是入口js文件，跟vue脚手架一样的，我们可以引入全局js，配置一些全局js函数等都可以在这里操作

manifest.json是uni-app的配置项，一般都是可视化配置，很少用到源码配置，大家基本看一看就知道了，不知道的加QQ群私聊群主：682783851

pages.json   就是页面配置文件了，你写的每一个页面都要在这里面配置，每个页面一些的特殊配置项也是在这里面写，uni-app pages配置项

uni.scss       是uni-app的样式包，大家随意放

这个时候我们就可以开始开发页面了，直接在pages文件夹上右键就可以新建页面了，每一个页面都是vue文件，结构跟我们使用vue脚手架一样，写起来还是很舒服呀！

上面是一个大概的讲述，具体的学习路线还是要依赖官方文档，大家可以根据下面流程学习

一定要注意每个组件和接口在平台的支持情况。
官方文档非常详细，我们无需依赖其他书籍，有问题可以加QQ群，里面有很多学习资料，也可以提资源需求，还可以私聊群主解决问题，群主就是我，哈哈哈。

另外，想看看uni-app做出来的跨平台应用是什么体验的小伙伴，可以看下面了，体验一下中大型项目的感觉，包含登录支付功能，还可以分享。
下面是【购靓号】平台的跨平台应用，PC端可访问购靓号 或复制打开链接https://www.golianghao.com。手机端可扫码体验

uni-app项目路径介绍

介绍项目目录和文件作用
uni-app介绍 官方网页
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，uni-app同时也是更好的小程序开发框架。
具有vue和微信小程序的开发经验，可快速上手uni-app
为什么要去学习uni-app？
相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。
环境搭建
安装编辑器HbuilderX  下载地址
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
下载App开发版，可开箱即用
安装微信开发者工具 下载地址
利用HbuilderX初始化项目


点击HbuilderX菜单栏文件>项目>新建


选择uni-app,填写项目名称，项目创建的目录


运行项目
在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
注意：

如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
微信开发者工具在设置中安全设置，服务端口开启

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

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

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

全局配置和页面配置
通过globalStyle进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档




属性
类型
默认值
描述




navigationBarBackgroundColor
HexColor
#F7F7F7
导航栏背景颜色（同状态栏背景色）


navigationBarTextStyle
String
white
导航栏标题颜色及状态栏前景颜色，仅支持 black/white


navigationBarTitleText
String

导航栏标题文字内容


backgroundColor
HexColor
#ffffff
窗口的背景色


backgroundTextStyle
String
dark
下拉 loading 的样式，仅支持 dark / light


enablePullDownRefresh
Boolean
false
是否开启下拉刷新，详见页面生命周期。


onReachBottomDistance
Number
50
页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期


创建新的message页面
右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板
<template>
	<view>
		这是信息页面
	</view>
</template>

<script>
</script>

<style>
</style>

通过pages来配置页面




属性
类型
默认值
描述




path
String

配置页面路径


style
Object

配置页面窗口表现，配置项参考 pageStyle


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": {
				"navigationBarBackgroundColor": "#007AFF",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": true,
				"disableScroll": true,
				"h5": {
					"pullToRefresh": {
						"color": "#007AFF"
					}
				}
			}
		}
	]

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

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

属性说明：




属性
类型
必填
默认值
描述
平台差异说明




color
HexColor
是

tab 上的文字默认颜色



selectedColor
HexColor
是

tab 上的文字选中时的颜色



backgroundColor
HexColor
是

tab 的背景色



borderStyle
String
否
black
tabbar 上边框的颜色，仅支持 black/white
App 2.3.4+ 支持其他颜色值


list
Array
是

tab 的列表，详见 list 属性说明，最少2个、最多5个 tab



position
String
否
bottom
可选值 bottom、top
top 值仅微信小程序支持


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




属性
类型
必填
说明




pagePath
String
是
页面路径，必须在 pages 中先定义


text
String
是
tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标


iconPath
String
否
图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标


selectedIconPath
String
否
选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效


案例代码：
"tabBar": {
		"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 函数里获得


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




属性
类型
默认值
必填
说明




selectable
boolean
false
否
文本是否可选


space
string
.
否
显示连续空格，可选参数：ensp、emsp、nbsp


decode
boolean
false
否
是否解码



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