知っておくべきUniAPPの入門知識をまとめました。

この記事では、UniAPP クイック スタートに関する関連知識をいくつか紹介します。お役に立てば幸いです。

序文コースの紹介

1. コースの背景

大規模なフロントエンド時代の文脈において、フロントエンド開発者は単一の Web エンド開発をマスターする 能力だけではもはや十分ではなく、WeChat アプレット、Android APP、IOS APP、さらには Windows デスクトップ、そして最近リリースされた Hongmeng システム開発はすべて、成長するために習得する必要のあるスキルとなっています。そのため、さまざまな「クロスプラットフォーム」開発ソリューションが市場に登場しており、代表的なものとしては、UniAPP、Flutter、React Native、Taro、Weex などが挙げられます。

UniAPP は「Vue WeChat Mini Program」言語システムに基づいており、開発者が低コストで学習してすぐに使い始めることができると同時に、UniAPP エコシステムは徐々に成熟してきています。したがって、UniAPP に基づいてマルチターミナル プロジェクトを開発することは、多くの中小企業にとって一般的な技術ソリューションとなっています。

そこで、今日は UniAPP の基礎から始めて、エンタープライズ レベルの実践標準と比較し、マルチターミナル (WeChat ミニ プログラム H5 Android APP IOS APP) コミュニティ フォーラム プロジェクトを段階的に構築していきます。ゼロから一へ。

2. 就学前の指示

就学前の指示:

1. HTML、CSS、JS の基礎をマスターし、静的ページを構築できるようになります。
2. Vue の基礎をマスターし、スキャフォールディングを使用してアプリケーションを構築できるようになります
3. WeChat ミニ プログラムの基礎をマスターし、WeChat ミニ プログラムのコンポーネントと API サービスをある程度理解する

3. コース概要

コース紹介 ：

1. コース概要紹介
2. 実践プロジェクト紹介

UniAPPクイック スタート学習

##1. UniAPP の概要

(1) UniAPP とは何ですか?

uni-app は、Vue.js を使用してすべてのフロントエンド アプリケーションを開発するためのフレームワークです。開発者は、iOS、Android、H5、およびさまざまな小規模プログラム (WeChat/Alipay/ Baidu/Toutiao/QQ/DingTalk) やその他のプラットフォームを利用すると、開発者は開発の考え方や開発習慣を変えることなく、迅速に開発を行うことができます。

(2) UniAPP を選ぶ理由?

より多くの開発者/ケース
1. #数十万のアプリケーション、大学統計による月間アクティブ ユーザー数 12 億人、70 の WeChat/QQ グループ

プラットフォームの機能に制限はありません

複数のターミナル間で、プラットフォーム固有の API 呼び出しの条件付きコンパイルを通じて、特定のプラットフォーム向けにパーソナライズされたコードをエレガントに記述し、他のプラットフォームに影響を与えることなく独自の機能を呼び出すことができます

優れたパフォーマンス エクスペリエンス

新しいページの読み込みが高速になり、自動の差分更新によりデータが更新され、アプリはネイティブ レンダリングをサポートしてよりスムーズなユーザー エクスペリエンスをサポートし、ミニ プログラムのパフォーマンスはより優れています。市場 その他のフレームワーク

豊かな環境環境

プラグイン市場には数千のプラグインがあり、NPM をサポートし、小さなプログラム コンポーネントと SDK、およびさまざまな SDK をサポートしていますWeChat エコシステムで直接使用できる クロスプラットフォーム APP

低学習コスト

共通のフロントエンド テクノロジー スタックに基づいて、Vue 構文 WeChat アプレット API を使用し、追加の学習コストなし
5. #（ 3）UniAPP 機能フレームワーク

（4）UniAPP 開発環境構築

開発版をダウンロードツール HBuilderX

HBuilderX これは一般的なフロントエンド開発ツールですが、

uni-app
1. 用に特別に強化されています。

アプリ開発バージョンをダウンロードすると、すぐに使用できます。標準バージョンをダウンロードすると、実行時に

uni-app プラグインをインストールするように求められます。 uni-app

を公開すると、プラグインのダウンロード後に

を使用して uni-app プロジェクトを作成できます。 「##uni-app」と入力し、プロジェクト名を入力し、テンプレートを選択して、「作成」をクリックすると、正常に作成されます。

uni-app に付属するテンプレートは Hello uni-app で、これは公式コンポーネントおよび API サンプルです。

2. もう 1 つの重要なテンプレートは、uni ui プロジェクト テンプレートです。日常の開発にはこのテンプレートを使用することをお勧めします。このテンプレートには、一般的に使用されるコンポーネントが多数組み込まれています。

uni-app の実行

主に、ブラウザの実行、実機の実行、小さなプログラムの実行などが含まれます。

uni-app の実行app

3. 主にクラウドネイティブAPP、オフラインネイティブAPP、H5、各種小規模プログラム

2. 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            配置页面路由、导航条、选项卡等页面类信息

4. Tips

static

ディレクトリ内の js ファイルは webpack によってコンパイルされません。中に es6 コードがある場合は、直接実行されます。携帯電話の場合 デバイス上でエラーが報告されます。

したがって、

less、scss

、およびその他のリソースは

static

ディレクトリに配置すべきではありません。これらのパブリック リソースは
• common# に配置することをお勧めします。 ## directory
(2) アプリケーション構成のmanifest.json
• manifest.json ファイルは、アプリケーションの構成ファイルであり、アプリケーションの名前、アイコン、権限など。ここで Vue と H5 のクロスドメイン インターセプト プロセッサをセットアップすることもできます。(3) vue.config.js# をコンパイルして構成します。
##vue.config.js

は選択された構成ファイルです。このファイルがプロジェクトのルート ディレクトリに存在する場合、自動的にロードされます。通常、Webpack などのコンパイル オプションを構成するために使用されます。 。公式文書

(4) グローバル構成 page.json

pages.json このファイルは、ユニアプリをグローバルに構成し、ページ ファイル、ウィンドウ スタイル、およびネイティブのパスを決定するために使用されます。ナビゲーション バー、下部のネイティブ タブバーなど。これは、WeChat アプレットの app.json の Page Management 部分に似ています。

公式ドキュメント

##globalStyleObjectNoデフォルト ページのウィンドウ パフォーマンスを設定しますpagesオブジェクト配列 isページ パスとウィンドウ パフォーマンスを設定しますeasycom ObjectNoコンポーネントは自動的にルールを導入しますtabBarObjectNo下部タブのパフォーマンスを設定します#条件#オブジェクト#スタートアップ モード設定subPackagesオブジェクト配列Noサブパッケージ読み込み構成preloadRuleオブジェクト Noサブパッケージングの事前ダウンロード ルール

（5）全局样式 uni.scss

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策略。

（6）主组件 App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

（7）入口文件 main.js

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

官方文档

（8）UniAPP 开发规范及资源路径

1. 开发规范约定

• 页面文件向导 Vue单文件组件（SFC）规范
• 组件标签靠近小程序规范，详见 uni-app 组件规范
• 互连能力（JS API）靠近微信小程序规范，但需要将替换替换 wx 为 uni ，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了 App 和页面的生命周期
• 为兼容多端运行，建议使用 flex 布局进行开发

2. 资源路径说明

template 内约会静态资源，如 image，video 等标签的 src 属性时，可以使用相对路径或绝对路径，形式如下：

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image></image>
<image></image>
<!-- 相对路径 -->
<image></image>

注意

• @ 初始的绝对路径以及相对路径会通过 base64 转换规则校验
• 约会的静态资源在非 h5 平台，均不转为 base64
• H5平台，小于4kb的资源会被转换成base64，其余不转

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);

三、UniAPP 生命周期

学习一个工具的目的核心是什么？是为了解决核心业务逻辑问题，业务逻辑很多时候简单的解释一句话：“在合适的时机干合适的事情”，OK！什么是合适的时机呢？简单的说，页面运行过程中，各个阶段的回调函数就是页面中的时机，我们也叫这个为“生命周期钩子函数”，当然，业务中我们也会写到很多「回调」的逻辑，这些回调其实也是咱们自定义的时机，UniAPP 的生命周期钩子函数回调函数有哪些呢？我们来理解一下！

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

（1）应用生命周期

属性	タイプ	必須	説明
##No

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

（2）页面生命周期

函数名	说明
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	监听用户点击右上角收藏

四、UniAPP 路由配置及页面跳转

（1）路由配置

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
			}
		}]

（2）路由跳转

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 、 使用组件

（3）获取当前页面栈

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

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

（4）路由传参与接收

说明：页面生命周期的 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 进行处理后传递

（5）小程序路由分包配置

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

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

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

"subPackages": [
  	{
			"root": "news",
			"pages": [{
					"path": "index",
					"style": {
						"navigationBarTitleText": "新闻中心",
						"navigationBarBackgroundColor": "#FFFFFF",
						"navigationBarTextStyle": "black",
						"backgroundColor": "#FFFFFF"
					}
				}
			]
		}
  	... ]，// 预下载分包设置"preloadRule": {
		"pages/index": {
			"network": "all",
			"packages": ["activities"]
		}}

五、UniAPP 常用组件简介

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

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

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

案例：知心姐姐布局实现

六、UniAPP 常用 API 简介

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 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。

案例：知心姐姐聊天功能

七、UniAPP 自定义组件与通信

（1）自定义组件概念

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

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

导入 import xxx from 'xxx'

注册 Vue.use('xx',xx) components:{ xxx }

使用 <xx></xx>

（2）父子组件通信

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

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

1. 父组件通过自定义事件标签向子组件传递事件
2. 子组件通过触发父组件定义事件方式修改父组件数据

（3）slot 数据分发与作用域插槽

1. 父组件通过调用子组件内部嵌套 html 内容作为slot分发给子组件
2. 子组件通过在 slot 标签上添加属性，向父组件通信数据，作用域插槽

（4）全局事件定义及通信

1. 在整个应用的任何地方均可以使用uni.$on创建一个全局事件
2. 在整个应用的任何地方也均可以使用 uni.$emit 来触发全局事件，实现多组件见的数据通信

八、UniAPP Vuex 状态管理

1. 概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. 应用场景

Vue多个组件之间需要共享数据或状态。

3. 关键规则

• State：存储状态数据
• Getter：从状态数据派生数据，相当于 State 的计算属性
• Mutation：存储用于同步更改状态数据的方法，默认传入的参数为 state
• Action：存储用于异步更改状态数据，但不是直接更改，而是通过触发 Mutation 方法实现，默认参数为context
• Module：Vuex 模块化

4. 交互关系

5. 使用方式

import {
		mapState,
		mapActions} from 'vuex'export default {
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			...mapActions(['userLoginAction', 'userLogoutAction']),
		}}

6. 体验案例：模拟用户登陆逻辑实现

注意：配合使用 Storage 来实现刷新页面后状态持续保持的业务需求

九、运行环境判断与跨端兼容

（1）开发环境和生产环境

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

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

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

（2）判断平台

平台判断有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;}

（3）跨端兼容

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% 可取值如下：

#価値プラットフォーム##APP-PLUS#APP-PLUS-NVUEアプリ nvueH5H5WeChat ミニ プログラムAlipay ミニ プログラムBaidu ミニ プログラムBytedance ミニ プログラムQQ ミニ プログラム360 ミニ プログラム #MPWeChat ミニ プログラム/Alipay ミニ プログラム/Baidu ミニ プログラム/Bytedance ミニ プログラム/QQ ミニ プログラム/360 ミニ プログラムQUICKAPP-WEBVIEWクイックApplication Universal (Alliance、Huawei を含む)QUICKAPP-WEBVIEW-UNIONQuick Application AllianceQUICKAPP-WEBVIEW- HUAWEIクイック アプリケーション Huaweiuniapp チュートリアル 」

アプリ
	#MP-WEIXIN
	MP-ALIPAY
	MP-BAIDU
	MP-TOUTIAO
	MP-QQ
	MP-360
	推奨: 「

以上が知っておくべきUniAPPの入門知識をまとめました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。