本篇文章為大家帶來了關於UniAPP快速入門的相關知識整理，希望對大家有幫助。
大前端時代背景下，前端開發人員掌握單一的Web 端開發能力已經遠遠不夠了，微信小程式、安卓APP、IOS APP，甚至是Windows 桌面端，還有最近出的鴻蒙系統開發，都成了我們成長需要掌握的技能。所以呢，市面上各種「跨平台」開發解決方案層出不窮，比較有代表性的就是： UniAPP 、 Flutter、 React Native、Taro、Weex 等等。
UniAPP 是基於「 Vue 微信小程式 」語言體系，開發人員學習成本低上手快，同時隨著現今 UniAPP 生態也逐步趨於成熟。所以，基於 UniAPP 開發多端項目，已經是許多中小型企業常用的技術解決方案。
那麼，今天呢，我們就從 UniAPP 基礎開始，對照企業級實踐標準，從零到一，一步一步打造一個 多端（微信小程式 H5 安卓 APP IOS APP）的社群論壇類專案。
學前須知：
課程簡介：
在跨端的同時，透過條件編譯平台特有API 調用，可以優雅的為某平台寫個人化程式碼，調用專有能力而不影響其他平台
效能體驗優秀週邊生態豐富
插件市場數千款插件，支援NPM、支援小程式元件和SDK，微信生態的各種sdk 可直接用於跨平台APP學習成本低
下載開發工具HBuilderX
下載App 開發版，可開箱即用；如下載標準版，在運行或發行
uni-app類型，輸入工程名，選擇模板，點選創建，即可成功創建。
還有一個重要模板是 uni ui專案模板，日常開發建議使用該模板，已內建大量常用元件。 主要包含：瀏覽器運作、真機運作、小程式運作等二、UniAPP 初始化相關設定（1）工程目錄結構
┌─components uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─hybrid 存放本地网页的目录（自建） ├─platforms 存放各平台专用页面的目录（自建） ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此 ├─wxcomponents 存放小程序组件的目录（自建） ├─common 公共资源（自建） ├─api 请求封装（自建） ├─store 状态管理（自建） ├─main.js Vue初始化入口文件 ├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息 └─pages.json 配置页面路由、导航条、选项卡等页面类信息
static
pages.json 檔案用來對uni-app 進行全域配置，決定頁面檔案的路徑、視窗樣式、原生的導覽列、底部的原生tabbar 等。它類似微信小程式中app.json的頁面管理部分。
官方文件
| #屬性 | 類型 | 必填 | ##描述|
|---|---|---|---|
| Object | #否 | 設定預設頁面的視窗表現 | |
| #pages | Object Array | ||
| 設定頁面路徑及視窗表現 | easycom | Object | |
| 元件自動引入規則 | #tabBar | Object | |
| 設定底部tab 的表現 | condition | Object | |
| Object Array | N | #分包載入配置 |
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。官方文档
uni-app 官方扩展插件（uni ui）及 插件市场 上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。
uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
应用生命周期仅可在App.vue中监听，在页面监听无效。
main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。
官方文档
template 内约会静态资源，如 image，video 等标签的 src 属性时，可以使用相对路径或绝对路径，形式如下：
<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 --> <image></image> <image></image> <!-- 相对路径 --> <image></image>
注意
js 文件或 script 标签内，可以使用相对路径和绝对路径，形式如下：
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录 import add from '@/common/add.js' // 相对路径 import add from '../../common/add.js'
css 文件或 style 标签内，可以使用相对路径和绝对路径，形式如下：
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');css 文件或 style 标签内引用的图片路径，可以使用相对路径也可以使用绝对路径，形式如下：
/* 绝对路径 */ background-image: url(/static/logo.png); background-image: url(@/static/logo.png); /* 相对路径 */ background-image: url(../../static/logo.png);
学习一个工具的目的核心是什么？是为了解决核心业务逻辑问题，业务逻辑很多时候简单的解释一句话：“在合适的时机干合适的事情”，OK！什么是合适的时机呢？简单的说，页面运行过程中，各个阶段的回调函数就是页面中的时机，我们也叫这个为“生命周期钩子函数”，当然，业务中我们也会写到很多「回调」的逻辑，这些回调其实也是咱们自定义的时机，UniAPP 的生命周期钩子函数回调函数有哪些呢？我们来理解一下！
uni-app 完整支持 Vue 实例的生命周期，同时还新增 应用生命周期 及 页面生命周期。
| 函数名 | 说明 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
| 函数名 | 说明 |
|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化 |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考示例 |
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项 |
| onTabItemTap | 点击 tab 时触发，参数为Object，具体见下方注意事项 |
| onShareAppMessage | 用户点击右上角分享 |
| onPageScroll | 监听页面滚动，参数为Object |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object |
| onBackPress | 监听页面返回 |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 |
| onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 |
| onShareTimeline | 监听用户点击右上角转发到朋友圈 |
| onAddToFavorites | 监听用户点击右上角收藏 |
uni-app 页面路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式（类似小程序在 app.json 中配置页面路由）。
"pages": [
{
"path": "pages/index",
"style": {
"navigationBarTitleText": "路由配置",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
},
{
"path": "pages/user",
"style": {
"navigationBarTitleText": "路由配置",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
}
}]uni-app 有两种页面路由跳转方式：使用navigator组件跳转（标签式导航）、调用API跳转（编程式导航）
框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：
| 路由方式 | 页面栈表现 | 触发时机 |
|---|---|---|
| 初始化 | 新页面入栈 | uni-app 打开的第一个页面 |
| 打开新页面 | 新页面入栈 | 调用 API uni.navigateTo、使用组件 <navigator open-type="navigate"></navigator>
|
| 页面重定向 | 当前页面出栈，新页面入栈 | 调用 API uni.redirectTo 、 使用组件 |
| 页面返回 | 页面不断出栈，直到目标返回页 | 调用 API uni.navigateBack 、 使用组件 、 用户按左上角返回按钮、安卓用户点击物理back按键 |
| Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 | 调用 API uni.switchTab 、 使用组件 、 用户切换 Tab |
| 重加载 | 页面全部出栈，只留下新的页面 | 调用 API uni.reLaunch 、 使用组件 |
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
注意： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
说明：页面生命周期的 onLoad(）监听页面加载，其参数为上个页面传递的数据，如：
//页面跳转并传递参数uni.navigateTo({
url: 'page2?name=liy&message=Hello'});url为将要跳转的页面路径 ，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。如 ‘path?key1=value2&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。
// 页面 2 接收参数
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.name); //打印出上个页面传递的参数。
console.log(option.message); //打印出上个页面传递的参数。
}注意：url 有长度限制，太长的字符串会传递失败，并且不规范的字符格式也可能导致传递失败，所以对于复杂参数建议使用 encodeURI、decodeURI 进行处理后传递
因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
所谓的主包，即放置默认启动页面及 TabBar 页面，而分包则是根据 pages.json 的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。
"subPackages": [
{
"root": "news",
"pages": [{
"path": "index",
"style": {
"navigationBarTitleText": "新闻中心",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF"
}
}
]
}
... ]，// 预下载分包设置"preloadRule": {
"pages/index": {
"network": "all",
"packages": ["activities"]
}}uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。
虽然不推荐使用 HTML 标签，但实际上如果开发者写了p等标签，在编译到非H5平台时也会被编译器转换为 view 标签，类似的还有 span 转 text、a 转navigator等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发， 基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。
案例：知心姐姐布局实现
uni-app的 js 代码，h5 端运行于浏览器中，非 h5 端 Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 自带的 jscore 引擎中。所以，uni-app的 jsAPI 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。
ECMAScript 由 Ecma 国际管理，是基础 js 语法。浏览器基于标准 js 扩充了window、document 等 js API；Node.js 基于标准 js 扩充了 fs 等模块；小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。
标准 ecmascript 的 API 非常多，比如：console、settimeout等等。
非 H5 端，虽然不支持 window、document、navigator 等浏览器的 js API，但也支持标准 ECMAScript。
开发者不要把浏览器里的 js 等价于标准 js。
所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。
案例：知心姐姐聊天功能
组件是 vue 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升，在项目的component目录下存放组件，uni-app 只支持 vue 单文件组件（.vue 组件）
组件可以使用「全局注册」和「页面引入」两种方式进行使用，使用分为三步：
导入 import xxx from 'xxx'
注册 Vue.use('xx',xx) components:{ xxx }
使用 <xx></xx>
父组件通过自定义属性向子组件传递数据
子组件通过 props 接收父组件传递的数据
slot分发给子组件slot 标签上添加属性，向父组件通信数据，作用域插槽uni.$on创建一个全局事件uni.$emit 来触发全局事件，实现多组件见的数据通信Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue多个组件之间需要共享数据或状态。
import {
mapState,
mapActions} from 'vuex'export default {
computed: {
...mapState(['loginState', 'userInfo'])
},
methods: {
...mapActions(['userLoginAction', 'userLogoutAction']),
}}注意：配合使用 Storage 来实现刷新页面后状态持续保持的业务需求
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX 中，点击「运行」编译出来的代码是开发环境，点击「发行」编译出来的代码是生产环境
if(process.env.NODE_ENV === 'development'){
console.log('开发环境')}else{
console.log('生产环境')}平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。
编译期判断编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码，
// #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 规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
\#ifdef：if defined 仅在某平台存在\#ifndef：if not defined 除了某平台均存在%PLATFORM% 可取值如下：
| 值 | 平台 |
|---|---|
| #APP-PLUS | App |
| APP-PLUS-NVUE | App nvue |
| #H5 | H5 |
| MP-WEIXIN | 微信小程式 |
| MP-ALIPAY | 支付寶小程式 |
| MP-BAIDU | 百度小程式 |
| MP-TOUTIAO | 位元組跳動小程式 |
| MP-QQ | QQ小程式 |
| MP-360 | #360小程式 |
| MP | 微信小程式/付款寶小程式/百度小程式/位元組跳動小程式/QQ小程式/360小程式 |
| QUICKAPP-WEBVIEW | 快應用通用(包含聯盟、華為) |
| QUICKAPP-WEBVIEW-UNION | 快速應用聯盟 |
| #QUICKAPP-WEBVIEW-HUAWEI | 快應用華為 |
#推薦：《uniapp教學》
以上是你必須了解的UniAPP入門知識整理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
