基于 UniAPP 從入門到社區(qū)項目實戰(zhàn)

課程背景：

咱們作為前端開發(fā)人員，單純的Web 端開發(fā)已經(jīng)慢慢無法滿足我們的業(yè)務(wù)需求了，微信小程序、安卓 APP、IOS APP，甚至是 Windows 桌面端開發(fā)都成了我們需要掌握的技能。所以呢，市面上各種「跨平臺」開發(fā)解決方案層出不窮，比較有代表性的就是： UniAPP 、 Flutter、 React Native、Taro、Weex等等。

UniAPP 是基于「 Vue + 微信小程序 」語言體系，開發(fā)人員上手快學(xué)習(xí)成本低，同時隨著如今 UniAPP 生態(tài)也逐步趨于成熟。所以，基于 UniAPP 開發(fā)多端項目，已經(jīng)是很多中小型企業(yè)常用的技術(shù)解決方案。

那么，今天呢，我們就從 UniAPP 基礎(chǔ)開始，對照企業(yè)級實踐標準，從零到一，一步一步打造一個 多端（微信小程序 + H5 + 安卓 APP + IOS APP）的社區(qū)論壇類項目。

學(xué)前須知：

1. 掌握 HTML、CSS、JS基礎(chǔ)，能夠構(gòu)建靜態(tài)頁面
2. 掌握 Vue 基礎(chǔ)，能夠使用腳手架構(gòu)建應(yīng)用
3. 掌握微信小程序基礎(chǔ)，對微信小程序組件、API服務(wù)有一定的了解

課程簡介：

1. 課程大綱介紹
2. 實戰(zhàn)項目介紹

UniAPP 快速入門學(xué)習(xí)

一、UniAPP 介紹

（1）什么是 UniAPP ？

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到 iOS、Android、H5，以及各種小程序（微信/支付寶/百度/頭條/ QQ /釘釘）等多個平臺，方便開發(fā)者快速交付，不需要轉(zhuǎn)換開發(fā)思維，不需要更改開發(fā)習(xí)慣。

（2）為什么要選擇 UniAPP ？

1. 開發(fā)者/案例數(shù)量更多

幾十萬應(yīng)用、uni 統(tǒng)計月活12億、70+ 微信 / QQ群

2. 平臺能力不受限

在跨端的同時，通過條件編譯 + 平臺特有 API 調(diào)用，可以優(yōu)雅的為某平臺寫個性化代碼，調(diào)用專有能力而不影響其他平臺

3. 性能體驗優(yōu)秀

加載新頁面速度更快、自動 diff 更新數(shù)據(jù)，App 端支持原生渲染支撐更流暢的用戶體驗，小程序端的性能優(yōu)于市場其他框架

4. 周邊生態(tài)豐富

插件市場數(shù)千款插件，支持 NPM、支持小程序組件和SDK，微信生態(tài)的各種 sdk 可直接用于跨平臺 APP

5. 學(xué)習(xí)成本低

基于通用的前端技術(shù)棧，采用 vue 語法+微信小程序 api，無額外學(xué)習(xí)成本

（3）UniAPP 功能框架

[圖片上傳失敗...(image-e5737b-1646726387347)]

（4）UniAPP 開發(fā)環(huán)境搭建

1. 下載開發(fā)工具 HBuilderX

HBuilderX 是通用的前端開發(fā)工具，但為uni-app做了特別強化。

下載 App 開發(fā)版，可開箱即用；如下載標準版，在運行或發(fā)行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用

2. 創(chuàng)建 uni-app 項目

選擇uni-app類型，輸入工程名，選擇模板，點擊創(chuàng)建，即可成功創(chuàng)建。

uni-app自帶的模板有 Hello uni-app ，是官方的組件和API示例。

還有一個重要模板是 uni ui項目模板，日常開發(fā)推薦使用該模板，已內(nèi)置大量常用組件。

3. 運行 uni-app

主要包括：瀏覽器運行、真機運行、小程序運行等

4. 發(fā)布 uni-app

主要包括：云端原生 APP 、離線原生 APP、H5、各種小程序

二、UniAPP 初始化相關(guān)配置

（1）工程目錄結(jié)構(gòu)

┌─components            uni-app組件目錄
│  └─comp-a.vue        可復(fù)用的a組件
├─hybrid                存放本地網(wǎng)頁的目錄（自建）
├─platforms             存放各平臺專用頁面的目錄（自建）
├─pages                 業(yè)務(wù)頁面文件存放的目錄
│  ├─index
│  │  └─index.vue      index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此
├─wxcomponents          存放小程序組件的目錄（自建）
├─common                公共資源（自建）
├─api                   請求封裝（自建）
├─store                 狀態(tài)管理（自建）
├─main.js               Vue初始化入口文件
├─App.vue               應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽 應(yīng)用生命周期
├─manifest.json         配置應(yīng)用名稱、appid、logo、版本等打包信息
└─pages.json            配置頁面路由、導(dǎo)航條、選項卡等頁面類信息
    

提示

• static下目錄的 js 文件不會被 webpack 編譯，里面如果有 es6 的代碼，不經(jīng)過轉(zhuǎn)換直接運行，在手機設(shè)備上會報錯。
• 所以less、scss等資源同樣不要放在 static目錄下，建議這些公共的資源放在common目錄下

（2）應(yīng)用配置 manifest.json

manifest.json 文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱、圖標、權(quán)限等，我們也可以在這里為 Vue 為H5 設(shè)置跨域攔截處理器

（3）編譯配置 vue.config.js

vue.config.js 是一個可選的配置文件，如果項目的根目錄中存在這個文件，那么它會被自動加載，一般用于配置 webpack 等編譯選項。官方文檔

（4）全局配置 page.json

pages.json 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等。它類似微信小程序中app.json的頁面管理部分。

官方文檔

（5）全局樣式 uni.scss

uni.scss文件的用途是為了方便整體控制應(yīng)用的風(fēng)格。比如按鈕顏色、邊框風(fēng)格，uni.scss文件里預(yù)置了一批scss變量預(yù)置。官方文檔

uni-app 官方擴展插件（uni ui）及 插件市場 上很多三方插件均使用了這些樣式變量，如果你是插件開發(fā)者，建議你使用 scss 預(yù)處理，并在插件代碼中直接使用這些變量（無需 import 這個文件），方便用戶通過搭積木的方式開發(fā)整體風(fēng)格一致的App。

uni.scss是一個特殊文件，在代碼中無需 import 這個文件即可在scss代碼中使用這里的樣式變量。uni-app的編譯器在webpack配置中特殊處理了這個 uni.scss，使得每個 scss 文件都被注入這個uni.scss，達到全局可用的效果。如果開發(fā)者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

（6）主組件 App.vue

App.vue是uni-app的主組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件。但App.vue本身不是頁面，這里不能編寫視圖元素。

這個文件的作用包括：調(diào)用應(yīng)用生命周期函數(shù)、配置全局樣式、配置全局的存儲globalData

應(yīng)用生命周期僅可在App.vue中監(jiān)聽，在頁面監(jiān)聽無效。

（7）入口文件 main.js

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

官方文檔

（8）UniAPP 開發(fā)規(guī)范及資源路徑

1. 開發(fā)規(guī)范約定

• 頁面文件向?qū)?Vue單文件組件（SFC）規(guī)范
• 組件標簽靠近小程序規(guī)范，詳見 uni-app 組件規(guī)范
• 互連能力（JS API）靠近微信小程序規(guī)范，但需要將替換替換 wx 為 uni ，詳見uni-app接口規(guī)范
• 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時補充了 App 和頁面的生命周期
• 為兼容多端運行，建議使用 flex 布局進行開發(fā)

2. 資源路徑說明

template 內(nèi)約會靜態(tài)資源，如 image，video 等標簽的 src 屬性時，可以使用相對路徑或絕對路徑，形式如下：

<!-- 絕對路徑，/static指根目錄下的static目錄，在cli項目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對路徑 -->
<image class="logo" src="../../static/logo.png"></image>

注意

• @ 初始的絕對路徑以及相對路徑會通過 base64 轉(zhuǎn)換規(guī)則校驗
• 約會的靜態(tài)資源在非 h5 平臺，均不轉(zhuǎn)為 base64
• H5平臺，小于4kb的資源會被轉(zhuǎn)換成base64，其余不轉(zhuǎn)

js 文件或 script 標簽內(nèi)，可以使用相對路徑和絕對路徑，形式如下：

// 絕對路徑，@指向項目根目錄，在cli項目中@指向src目錄
import add from '@/common/add.js'
// 相對路徑
import add from '../../common/add.js'

css 文件或 style 標簽內(nèi)，可以使用相對路徑和絕對路徑，形式如下：

/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');

css 文件或 style 標簽內(nèi)引用的圖片路徑，可以使用相對路徑也可以使用絕對路徑，形式如下：

/* 絕對路徑 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相對路徑 */
background-image: url(../../static/logo.png);

三、UniAPP 生命周期

學(xué)習(xí)一個工具的目的核心是什么？是為了解決核心業(yè)務(wù)邏輯問題，業(yè)務(wù)邏輯很多時候簡單的解釋一句話：“在合適的時機干合適的事情”，OK！什么是合適的時機呢？簡單的說，頁面運行過程中，各個階段的回調(diào)函數(shù)就是頁面中的時機，我們也叫這個為“生命周期鉤子函數(shù)”，當然，業(yè)務(wù)中我們也會寫到很多「回調(diào)」的邏輯，這些回調(diào)其實也是咱們自定義的時機，UniAPP 的生命周期鉤子函數(shù)回調(diào)函數(shù)有哪些呢？我們來理解一下！

uni-app 完整支持 Vue 實例的生命周期，同時還新增 應(yīng)用生命周期 及 頁面生命周期。

（1）應(yīng)用生命周期

（2）頁面生命周期

四、UniAPP 路由配置及頁面跳轉(zhuǎn)

（1）路由配置

uni-app 頁面路由全部交給框架統(tǒng)一管理，開發(fā)者需要在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）路由跳轉(zhuǎn)

uni-app 有兩種頁面路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)（標簽式導(dǎo)航）、調(diào)用API跳轉(zhuǎn)（編程式導(dǎo)航）

框架以棧的形式管理當前所有頁面， 當發(fā)生路由切換的時候，頁面棧的表現(xiàn)如下：

（3）獲取當前頁面棧

getCurrentPages() 函數(shù)用于獲取當前頁面棧的實例，以數(shù)組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。

注意： getCurrentPages() 僅用于展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態(tài)錯誤。

（4）路由傳參與接收

說明：頁面生命周期的 onLoad(）監(jiān)聽頁面加載，其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù)，如：

//頁面跳轉(zhuǎn)并傳遞參數(shù)
uni.navigateTo({
    url: 'page2?name=liy&message=Hello'
});

url為將要跳轉(zhuǎn)的頁面路徑 ，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔。如 'path?key1=value2&key2=value2'，path為下一個頁面的路徑，下一個頁面的onLoad函數(shù)可得到傳遞的參數(shù)。

// 頁面 2 接收參數(shù)
onLoad: function (option) { //option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)
    console.log(option.name); //打印出上個頁面?zhèn)鬟f的參數(shù)。
    console.log(option.message); //打印出上個頁面?zhèn)鬟f的參數(shù)。
}

注意：url 有長度限制，太長的字符串會傳遞失敗，并且不規(guī)范的字符格式也可能導(dǎo)致傳遞失敗，所以對于復(fù)雜參數(shù)建議使用 encodeURI、decodeURI 進行處理后傳遞

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

因小程序有體積和資源加載限制，各家小程序平臺提供了分包方式，優(yōu)化小程序的下載和啟動速度。

所謂的主包，即放置默認啟動頁面及 TabBar 頁面，而分包則是根據(jù) pages.json 的配置進行劃分。

在小程序啟動時，默認會下載主包并啟動主包內(nèi)頁面，當用戶進入分包內(nèi)某個頁面時，會把對應(yīng)分包自動下載下來，下載完成后再進行展示，此時終端界面會有等待提示。

"subPackages": [
    {
            "root": "news",
            "pages": [{
                    "path": "index",
                    "style": {
                        "navigationBarTitleText": "新聞中心",
                        "navigationBarBackgroundColor": "#FFFFFF",
                        "navigationBarTextStyle": "black",
                        "backgroundColor": "#FFFFFF"
                    }
                }
            ]
        }
    ... 
]，
// 預(yù)下載分包設(shè)置
"preloadRule": {
        "pages/index": {
            "network": "all",
            "packages": ["activities"]
        }
}

五、UniAPP 常用組件簡介

uni-app 為開發(fā)者提供了一系列基礎(chǔ)組件，類似 HTML 里的基礎(chǔ)標簽元素，但 uni-app 的組件與 HTML 不同，而是與小程序相同，更適合手機端使用。

雖然不推薦使用 HTML 標簽，但實際上如果開發(fā)者寫了div等標簽，在編譯到非H5平臺時也會被編譯器轉(zhuǎn)換為 view 標簽，類似的還有 span 轉(zhuǎn) text、a 轉(zhuǎn)navigator等，包括 css 里的元素選擇器也會轉(zhuǎn)，但為了管理方便、策略統(tǒng)一，新寫代碼時仍然建議使用view等組件。

開發(fā)者可以通過組合這些基礎(chǔ)組件進行快速開發(fā)， 基于內(nèi)置的基礎(chǔ)組件，可以開發(fā)各種擴展組件，組件規(guī)范與vue組件相同。

案例：知心姐姐布局實現(xiàn)

六、UniAPP 常用 API 簡介

uni-app的 js 代碼，h5 端運行于瀏覽器中，非 h5 端 Android 平臺運行在 v8 引擎中，iOS 平臺運行在 iOS 自帶的 jscore 引擎中。所以，uni-app的 jsAPI 由標準 ECMAScript 的 js API 和 uni 擴展 API 這兩部分組成。

ECMAScript 由 Ecma 國際管理，是基礎(chǔ) 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。

開發(fā)者不要把瀏覽器里的 js 等價于標準 js。

所以 uni-app 的非 H5 端，一樣支持標準 js，支持 if、for 等語法，支持字符串、數(shù)組、時間等變量及各種處理方法，僅僅是不支持瀏覽器專用對象。

案例：知心姐姐聊天功能

七、UniAPP 自定義組件與通信

（1）自定義組件概念

組件是 vue 技術(shù)中非常重要的部分，組件使得與ui相關(guān)的輪子可以方便的制造和共享，進而使得vue使用者的開發(fā)效率大幅提升，在項目的component目錄下存放組件，uni-app 只支持 vue 單文件組件（.vue 組件）

組件可以使用「全局注冊」和「頁面引入」兩種方式進行使用，使用分為三步：

導(dǎo)入 import xxx from 'xxx'

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

使用 <xx />

（2）父子組件通信

1. 父組件通過自定義屬性向子組件傳遞數(shù)據(jù)

2. 子組件通過 props 接收父組件傳遞的數(shù)據(jù)

1. 父組件通過自定義事件標簽向子組件傳遞事件
2. 子組件通過觸發(fā)父組件定義事件方式修改父組件數(shù)據(jù)

（3）slot 數(shù)據(jù)分發(fā)與作用域插槽

1. 父組件通過調(diào)用子組件內(nèi)部嵌套 html 內(nèi)容作為slot分發(fā)給子組件
2. 子組件通過在 slot 標簽上添加屬性，向父組件通信數(shù)據(jù)，作用域插槽

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

1. 在整個應(yīng)用的任何地方均可以使用uni.$on創(chuàng)建一個全局事件
2. 在整個應(yīng)用的任何地方也均可以使用 uni.$emit 來觸發(fā)全局事件，實現(xiàn)多組件見的數(shù)據(jù)通信

八、UniAPP Vuex 狀態(tài)管理

1. 概念

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

2. 應(yīng)用場景

Vue多個組件之間需要共享數(shù)據(jù)或狀態(tài)。

3. 關(guān)鍵規(guī)則

• State：存儲狀態(tài)數(shù)據(jù)
• Getter：從狀態(tài)數(shù)據(jù)派生數(shù)據(jù)，相當于 State 的計算屬性
• Mutation：存儲用于同步更改狀態(tài)數(shù)據(jù)的方法，默認傳入的參數(shù)為 state
• Action：存儲用于異步更改狀態(tài)數(shù)據(jù)，但不是直接更改，而是通過觸發(fā) Mutation 方法實現(xiàn)，默認參數(shù)為context
• Module：Vuex 模塊化

4. 交互關(guān)系

[圖片上傳失敗...(image-c44ca2-1646726387347)]

5. 使用方式

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

6. 體驗案例：模擬用戶登陸邏輯實現(xiàn)

注意：配合使用 Storage 來實現(xiàn)刷新頁面后狀態(tài)持續(xù)保持的業(yè)務(wù)需求

九、運行環(huán)境判斷與跨端兼容

（1）開發(fā)環(huán)境和生產(chǎn)環(huán)境

uni-app 可通過 process.env.NODE_ENV 判斷當前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，一般用于連接測試服務(wù)器或生產(chǎn)服務(wù)器的動態(tài)切換。

在HBuilderX 中，點擊「運行」編譯出來的代碼是開發(fā)環(huán)境，點擊「發(fā)行」編譯出來的代碼是生產(chǎn)環(huán)境

if(process.env.NODE_ENV === 'development'){
    console.log('開發(fā)環(huán)境')
}else{
    console.log('生產(chǎn)環(huán)境')
}

（2）判斷平臺

平臺判斷有2種場景，一種是在編譯期判斷，一種是在運行期判斷。

編譯期判斷編譯期判斷，即條件編譯，不同平臺在編譯出包后已經(jīng)是不同的代碼，

// #ifdef H5
 alert("只有h5平臺才有alert方法")
// #endif
// 如上代碼只會編譯到H5的發(fā)行包里，其他平臺的包不會包含如上代碼。

運行期判斷 運行期判斷是指代碼已經(jīng)打入包中，仍然需要在運行期判斷平臺，此時可使用 uni.getSystemInfoSync().platform 判斷客戶端環(huán)境是 Android、iOS 還是小程序開發(fā)工具

switch(uni.getSystemInfoSync().platform){
 case 'android':
    console.log('運行Android上')
    break;
 case 'ios':
    console.log('運行iOS上')
    break;
 default:
    console.log('運行在開發(fā)者工具上')
    break;
}

（3）跨端兼容

uni-app 已將常用的組件、JS API 封裝到框架中，開發(fā)者按照 uni-app 規(guī)范開發(fā)即可保證多平臺兼容，大部分業(yè)務(wù)均可直接滿足，但每個平臺有自己的一些特性，因此會存在一些無法跨平臺的情況。

• 大量寫 if else，會造成代碼執(zhí)行性能低下和管理混亂。
• 編譯到不同的工程后二次修改，會讓后續(xù)升級變的很麻煩。

在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程里優(yōu)雅的完成了平臺個性化實現(xiàn)。

條件編譯是用特殊的注釋作為標記，在編譯時根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結(jié)尾。

• #ifdef：if defined 僅在某平臺存在
• #ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱

%PLATFORM% 可取值如下：