UNIAPP介绍

什么是UniAPP

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到各种平台，方便开发者快速交付，不需要转换开发思和更改开发习惯。

为什么选择UniAPP

1. 开发者/案例数量更多
2. 平台能力不受限
3. 性能体验优秀
4. 周边生态丰富
5. 学习成本低

UniAPP 功能框架

UniAPP开发环境搭建

1. 下载开发工具 HBuilderX
2. 创建 uni-app
3. 运行 uni-app
4. 发布 uni-app

UniAPP 初始化相关配置

工程目录结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  └─android            Android原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

提示

• static 下目录的 js 文件不会被 webpack 编译，里面如果有es6 的代码，不经过转换直接运行，在手机设备上会报错
• 所以less、scss等资源同样不要放在 static 目录下，建议这些公共资源放在 common 目录下

应用配置 manifest.json

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为 H5 设置跨域拦截处理器

编译配置 vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会自动加载，一般用于配置 webpack 等编译选项。

全局配置 page.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。它类似微信小程序中 app.json 的页面管理部分

全局样式 uni.scss

主组件 App.vue

是uni-app的主组件，是页面入口文件，本身不是页面，不能编写视图元素

这个文件作用主要包括：

• 调用生命周期函数
• 配置全局样式
• 配置全局的存储等

入口文件 main.js

是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件，使用需要的插件如vuex等。

UniAPP 开发规范及资源路径

1.开发规范规定

• 页面文件向导 Vue单文件组件规范
• 组件标签靠近小程序规范
• 互连能力靠近小程序规范
• 数据绑定及事件处理同Vue.js规范
• 为兼容多端运行，建议使用 flex 布局进行开发

UniAPP 生命周期

uni-app 完整支持 Vue 实例的生命周期，同时还新增 应用生命周期 及 页面生命周期

应用生命周期

页面生命周期

uni-app 支持如下页面生命周期函数：

UniAPP 路由配置及页面跳转

路由配置

uni-app 页面路由全部交给框架统一管理，开发者需要再pages.json里配置每个路由页面的路径及页面样式(类似小程序在 app.json 中配置页面路由)

路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转(标签式导航)、调用API跳转(编程式导航)，框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下

获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意：getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误

路由传参与接收

说明：页面生命周期的 onLoad() 监听页面加载，其参数为上个页面传递的数据

// 页面跳转并传递参数
uni.navigateTo({url:'page2?name=liy@message=Hello'
})

url为将要跳转的页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。下一个页面的onLoad函数可得到传递的参数。

// 页面接收参数
onLoad:function(option){console.log(option.name);console.log(option.message);
}

注意：url有长度限制，太长的字符串会传递失败，并且不规范的字符格式也可能导致传递失败，所以对于复杂参数建议使用 encodeURL、decodeURL进行处理后传递

小程序路由分包配置

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面即TabBar页面，而分包则是根据pages.json的配置进行划分。

在小程序启动时，默认会下载主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。

UniAPP 常用组件简介

uni-app 为开发者提供了一系列基础组件，类似HTML里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用

虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

开发者可以通过组合这些基础组件进行快速开发，基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。

UniAPP 常用API简介

uni-app的js代码，h5端运行于浏览器中，非h5端Android运行在v8引擎中，iOS平台运行在iOS自带的jscore引擎中。所以，uni-app的 js API 由标准ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

UniAPP 自定义组件与通信

自定义组件概念

组件是vue技术中非常重要的部分，组件使得与UI相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升，在项目的component目录下存放组件，uin-app只支持vue单文件组件

㢟可以使用全局注册和页面引入两种方式进行使用，使用分三步：

导入 import xxx from ‘xxx’

注册 Vue.use(‘xx’,xx) components：{xxx}

使用

父子组件通信

父组件通过自定义属性向子组件传递数据

子组件通过props接收父组件传递的数据

父组件通过自定义事件标签向子组件传递事件

子组件通过触发父组件定义事件方式修改父组件数据

slot 数据分发与作用域插槽

父组件通过子组件内部嵌套html内容作为slot分发给子组件

子组件通过在slot标签上添加属性，向父组件通信数据，作用域插槽

运行环境判断与跨端兼容

开发环境和生产环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或生产服务器的动态切换。

在HBuilderX中，点击运行编译出来的代码是开发环境，点击发行编译出来的代码是生产环境

if(process.env.NODE_ENV === 'development'){console.log('开发环境')
}else{console.log('生产环境')
}

判断平台

平台判断有两种场景，一种是在编译期判断，一种是在运行期判断。

编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码

// #ifdef H5alert('只有h5平台才有alert方法')
// #endif
// 如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

运行期判断 指代码已经打入包中，仍然需要在运行期判断平台，此时可使用uni.getSystemInfoSync().platform 判断客户端是Android、iOS还是小程序开发工具

switch(uni.getSystemInfoSync().platform){case 'android':console.log('运行在Android上')break;case 'ios':console.log('运行在iOS上')break;default:console.log('运行在开发者工具上')break;
}

推荐使用编译期判断，运行期需要编译，性能上存在一定消耗。

跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

• 大量写if else ，会造成代码执行性能低下和管理混乱
• 编译到不同的工程后二次修改，会让后续升级变得很麻烦

在 C 语言中，通过#ifdef、#ifndef的方式，为windows、mac等不同os编译不同的代码。uni-app 参考这个思路，为uni-app提供了条件编译手段，在一个工程里优雅的完成平台个性化实现。

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以#ifdef 或 #ifndef 加 %PLATFORM%开头，以 #endif 结尾。

• #ifdef：if defined 尽在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

%PLATFORM%可取值：