文章目录
一、uni-app介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，uni-app同时也是更好的小程序开发框架。
具有vue和微信小程序的开发经验，可快速上手uni-app
1.1为什么要去学习uni-app？
相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。
1.2 环境搭建
安装编辑器HbuilderX (应用商城下载即可）
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
下载App开发版，可开箱即用
安装微信开发者工具 微信开发者工具下载地址与更新日志 | 微信开放文档
1.3 利用HbuilderX初始化项目
点击HbuilderX菜单栏文件>项目>新建
选择uni-app,填写项目名称，项目创建的目录
1.4 运行项目
在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
注意：
如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
微信开发者工具在设置中安全设置，服务端口开启
1.5 介绍项目目录和文件作用
- 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布局进行开发
2.全局配置和页面配置
2.1 通过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， |
2.2 创建新的message页面
右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板
<template>
<view>
这是信息页面
</view>
</template>
<script>
</script>
<style>
</style>2.3 通过pages来配置页面
| 属性 | 类型 | 默认值 | 描述 |
| path | String | 配置页面路径 | |
| style | Object | 配置页面窗口表现 |
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"
}
}
}
}
]
2.4 配置tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
Tips:
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
| 属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说民 |
| color | HexColor | 是 | tab上的文字默认颜色 | ||
| selectColor | 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 值仅微信小程序支持 |
案例代码：
"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"
}
]
}
2.5 condition启动模式配置
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
| 属性 | 类型 | 是否必填 | 描述 |
| current | Number | 是 | 当前激活的模式，List 节点的索引值 |
| list | Array | 是 | 启动模式列表 |
list说明：
| 属性 | 类型 | 是否必填 | 描述 |
| name | String | 是 | 启动模式名称 |
| path | String | 是 | 启动页面路径 |
| query | String | 是 | 启动参数，可在也页面的onLoad函数里获得 |