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~~~~~多多关注！！！！

支付宝扫码领取现金红包！！！