이 기사는 UniAPP 빠른 시작에 대한 관련 지식을 제공합니다. 도움이 되기를 바랍니다.
대규모 프런트엔드 시대의 맥락에서 프런트엔드 개발자는 더 이상 단일 웹사이드 개발 기능을 익히는 것만으로는 충분하지 않습니다. , Android 앱, IOS 앱, 심지어 Windows 데스크톱은 물론 최근 출시된 Hongmeng 시스템 개발은 우리가 성장함에 따라 숙달해야 할 기술이 되었습니다. 따라서 다양한 "크로스 플랫폼" 개발 솔루션이 시장에 등장하고 있으며, 가장 대표적인 것으로는 UniAPP, Flutter, React Native, Taro, Weex 등이 있습니다.
UniAPP은 "Vue + WeChat Mini 프로그램" 언어 시스템을 기반으로 하며, UniAPP 생태계가 점차 성숙해짐에 따라 개발자는 학습 비용이 저렴하고 빠르게 시작할 수 있습니다. 따라서 UniAPP을 기반으로 한 다중 터미널 프로젝트를 개발하는 것은 많은 중소기업의 일반적인 기술 솔루션이 되었습니다.
그래서 오늘은 UniAPP의 기초부터 시작하여 기업 수준의 실무 표준과 비교하여 멀티 터미널(WeChat 애플릿 + H5 + Android APP + IOS APP) 커뮤니티 포럼 프로젝트를 처음부터 단계별로 구축해 보겠습니다.
유치원 지침:
강좌 소개:
uni-app은 Vue.js를 사용하여 모든 프런트엔드 애플리케이션을 개발하는 프레임워크입니다. 개발자는 iOS, Android, H5 및 다양한 소규모 프로그램(WeChat/Alipay/Baidu/Toutiao)에 게시할 수 있는 코드 세트를 작성합니다. /QQ/ DingTalk와 같은 여러 플랫폼을 사용하면 개발자가 개발 사고 방식이나 개발 습관을 바꾸지 않고도 더 쉽고 빠르게 제품을 출시할 수 있습니다.
수십만 개의 애플리케이션, 12억 개의 Uni 통계 월별 활동, 70개 이상의 WeChat/QQ 그룹
단말기 간 조건부 컴파일 + 플랫폼별 API를 통해 호출을 통해 특정 플랫폼에 대한 개인화된 코드를 우아하게 작성하고 다른 플랫폼에 영향을 주지 않고 독점 기능을 호출할 수 있습니다
새 페이지를 더 빠르게 로드하고 diff를 통해 자동으로 데이터를 업데이트합니다. 앱 지원 기본 렌더링은 더 부드러운 사용자 경험을 지원합니다. , 미니 프로그램의 성능은 시중의 다른 프레임워크보다 우수합니다
플러그인 시장에는 NPM을 지원하고 미니 프로그램 구성 요소 및 SDK를 지원하는 수천 개의 플러그인이 있습니다. , WeChat 생태계의 다양한 SDK 크로스 플랫폼 APP에 직접 사용 가능
공통 프런트 엔드 기술 스택 기반, vue 구문 + WeChat 애플릿 API 사용, 추가 학습 비용 없음
HBuilderX는 일반적인 프론트엔드 개발툴이지만 uni를 위해 특별히 강화되었습니다. -앱. uni-app做了特别强化。
下载 App 开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用
选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。
还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
主要包括：浏览器运行、真机运行、小程序运行等
主要包括：云端原生 APP 、离线原生 APP、H5、各种小程序
┌─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下目录的 js 文件不会被 webpack 编译，里面如果有 es6 的代码，不经过转换直接运行，在手机设备上会报错。less、scss等资源同样不要放在 static目录下，建议这些公共的资源放在common目录下manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为H5 设置跨域拦截处理器
vue.config.js
uni-app을 실행하거나 게시할 때 uni를 설치하라는 메시지가 표시됩니다. -app 플러그인을 다운로드한 후 🎜🎜🎜를 사용하여 uni-app 프로젝트를 생성할 수 있습니다. 🎜🎜🎜 uni-app 유형을 선택하고 프로젝트 이름을 입력한 후 템플릿을 만들고 생성을 클릭하면 성공적으로 생성됩니다. 🎜🎜uni-app과 함께 제공되는 템플릿에는 공식 컴포넌트인 Hello uni-app과 API 예제가 포함되어 있습니다. 🎜🎜또 다른 중요한 템플릿은 uni ui 프로젝트 템플릿으로, 일상적인 개발에 권장되며 일반적으로 사용되는 많은 구성 요소가 내장되어 있습니다. 🎜🎜🎜uni-app 실행🎜🎜🎜주로 포함: 브라우저 실행, 실제 기계 실행, 작은 프로그램 실행 등 🎜🎜🎜uni-app 게시🎜🎜🎜주로 포함: 클라우드 네이티브 앱, 오프라인 네이티브 앱, H5, 다양한 미니 프로그램🎜🎜2. UniAPP 초기화 관련 구성🎜🎜 (1) 프로젝트 디렉터리 구조🎜<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 --> <image></image> <image></image> <!-- 相对路径 --> <image></image>
static 디렉터리에 js 파일이 있으면 webpack에서 컴파일되지 않습니다. es6이 포함되어 있습니다. 코드를 변환하지 않고 직접 실행하면 모바일 장치에서 오류가 보고됩니다. 🎜🎜그래서 less, scss 및 기타 리소스는 static 디렉터리에 배치하면 안 됩니다. 이러한 공용 리소스는 common에 배치하는 것이 좋습니다. > 디렉토리🎜 ul>🎜(2) 애플리케이션 구성 매니페스트.json🎜🎜manifest.json 파일은 이름, 아이콘, 권한 등을 지정하는 데 사용되는 애플리케이션의 구성 파일입니다. 여기에서 Vue를 구성할 수도 있습니다. H5는 도메인 간 차단 프로세서를 설정합니다🎜🎜(3) 컴파일 구성 vue.config.js🎜🎜vue.config.js는 선택적 구성 파일입니다. , 이 파일이 프로젝트의 루트 디렉터리에 있으면 자동으로 로드되며 일반적으로 webpack과 같은 컴파일 옵션을 구성하는 데 사용됩니다. 공식 문서 🎜pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json의 페이지 관리 부분에 대한 전역 구성입니다.
공식 문서
| Property | Type | Required | Description |
|---|---|---|---|
| globalStyle | Object | No | 창 성능 설정 기본 페이지 |
| pages | Object 배열 | Yes | 페이지 경로 및 창 성능 설정 |
| easycom | Object | No | 구성 요소 자동 도입 규칙 |
| tabBar | Object | No | 성능 |
| 상태 | Object | No | 실행 모드 구성 |
| subPackages | Object Array | No | 하위 패키지 로딩 구성 |
| preloadRule | Object | No | Subcon 사전 다운로드 규칙을 따르세요 |
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% 可取值如下：
| Value | Platform |
|---|---|
| APP-PLUS | App |
| APP-PLUS-NVUE | App nvue |
| H5 | H5 |
| MP-WEIXIN | WeChat 미니 프로그램 |
| MP-ALIPAY | Alipay 미니 프로그램 |
| MP-BAIDU | Baidu 미니 프로그램 |
| MP-TOUTIAO | Bytedance 미니 프로그램 |
| MP -QQ | QQ 미니 프로그램 |
| MP-360 | 360 미니 프로그램 |
| MP | WeChat 미니 프로그램/Alipay 미니 프로그램/바이두 미니 프로그램/바이트댄스 미니 프로그램/QQ 미니 프로그램/360 미니 프로그램 |
| QUICKAPP-WEBVIEW | Quick App Universal(Alliance, Huawei 포함) |
| QUICKAPP-WEBVIEW-UNION | Quick App Alliance |
| QUICKAPP-WEBVIEW-HUAWEI | Quick App Huawei |
추천: uniapp 튜토리얼 "
위 내용은 꼭 알아야 할 UniAPP 입문 지식 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
