uni-app 自学笔记

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 实例的生命周期，同时还新增 应用生命周期 及 页面生命周期

应用生命周期

函数名	说明
onLaunch	当 uni-app 初始化完成时触发 (全局只触发一次)
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对为处理的 Promise 拒绝事件监听函数
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

页面生命周期

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

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

UniAPP 路由配置及页面跳转

路由配置

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

路由跳转

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

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 APIuni.navigateTo 、使用组件<navigator open-type="navigate"/>
页面重定向	当前页面出栈，新页面入栈	调用 APIuni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>
页面返回	页面不断出栈，直到目标返回页	调用 APIuni.navigateBack 、使用组件<navigator open-type="navigateBack"/>、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 APIuni.switchTab、使用组件 <navigator open-type="switchTab"/>、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 APIuni.reLaunch、使用组件<navigator open-type="reLaunch"/>

获取当前页面栈

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}

使用 <xx />

父子组件通信

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

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

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

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

slot 数据分发与作用域插槽

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

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

运行环境判断与跨端兼容

开发环境和生产环境

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

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

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

判断平台

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

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

// #ifdef H5
  alert('只有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%可取值：

值	生效条件
VUE3	HBuilderX 3.2.0+详情
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
APP-ANDROID	App Android 平台 仅限 uts文件
APP-IOS	App iOS 平台 仅限 uts文件
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为