uniapp 简介
一、简介
uniapp 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见 (opens new window)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
二、官网
官网地址：https://uniapp.dcloud.net.cn/
三、开发环境搭建
3.1 描述
本次环境将采用 HbuilderX结合微信开发者工具 共同搭建
3.2 HbuilderX 的下载
官网地址：https://www.dcloud.io/hbuilderx.html
- 解压安装即可
3.3 微信开发者工具 的下载
官网地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 一路下一步安装到指定位置
3.4 uni-app的环境搭建和项目创建
3.4.1 利用HbuilderX初始化项目
3.4.1点击HbuilderX菜单栏文件>项目>新建
3.4.2 选择uni-app,填写项目名称，项目创建的目录
3.4.3 运行项目
在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行,
在微信开发者工具里运行：
进入hello-uniapp项目，点击工具栏的运行 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：
进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
注意：
如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
微信开发者工具在设置中安全设置，服务端口开启
【Hbuilderx中运行】
【关联 微信开发者工具中运行】
【HbuilderX和微信开发者工具关联成功】
【手机模拟器中运行】
设置好手机开发开发者模式连接好数据线
【重新开启HbuilderX软件】
3.4.4 项目目录的介绍
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) 规范 https://vue-loader.vuejs.org/zh/spec.html
- 组件标签靠近小程序规范，详见uni-app 组件规范 https://uniapp.dcloud.io/component/README
- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规 范 https://uniapp.dcloud.io/api/README
- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
- 为兼容多端运行，建议使用flex布局进行开发
3.4.5 全局配置和页面配置
用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档
https://uniapp.dcloud.io/collocation/pages?id=globalstyle
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F7F7F7 | 导航栏背景颜色（同状态栏背景色） |
| navigationBarTextStyle | String | white | 导航栏标题颜色及状态栏前景颜色，仅支持 black/white |
| navigationBarTitleText | String | 导航栏标题文字内容 | |
| navigationStyle | String | default | 导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意 |
| backgroundColor | HexColor | #ffffff | 下拉显示出来的窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新，详见页面生命周期。 |
| backgroundColor | HexColor | #ffffff | 下拉显示出来的窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark / light |
3.4.6 创建新的message页面
右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板
1.通过pages来配置页面
uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| path | String | 配置页面路径 | |
| style | Object | 配置页面窗口表现，配置项参考下方 pageStyle |
2.h5
配置编译到 H5 平台时的特定样式
| 属性 | 类型 | 描述 |
|---|---|---|
| titleNView | Object | 导航栏 |
| pullToRefresh | Object | 下拉刷新 |
3. h5 平台下拉刷新动画，只有 circle 类型。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| color | String | #2BD009 | 颜色值格式为"#RRGGBB" |
| offset | String | 0px | 下拉刷新控件的起始位置。支持百分比，如"10%“；像素值，如"50px”，不支持rpx。 |
4.配置tabbar
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 时，此参数无效 |
5.condition
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
| 属性 | 类型 | 描述 |
|---|---|---|
| current | Number | 当前激活的模式，list节点的索引值(必填) |
| list | Array | 启动模式列表(必填) |
list说明：
| 属性 | 类型 | 描述 |
|---|---|---|
| name | String | 启动模式名称(必填) |
| path | String | 启动页面路径(必填) |
| query | String | 启动参数，可在页面的 onLoad 函数里获得(否) |
原创不易~~~~~o~~~~~多多关注！！！！
支付宝扫码领取现金红包！！！
