https://juejin.cn/post/7440119937644101684

uni-app官網

本文是關于 UniApp 從入門到精通的全指南，涵蓋基礎入門（環境搭建、創建項目、項目結構、編寫運行）、核心概念與進階知識（組件與開發、頁面路由與導航、數據綁定與響應式原理、生命周期鉤子）、電商應用開發（商品展示、購物車、訂單結算等功能）、項目優化與部署（性能、安全優化及不同平臺部署）、案例分析及總結展望，為開發者全面介紹 UniApp 開發知識體系。

關聯問題:UniApp如何壓縮圖片怎樣優化購物車功能如何部署到小程序

一、引言

在當今移動應用開發領域，跨平臺開發框架因其能夠顯著提高開發效率、降低成本而備受青睞。UniApp 作為一款優秀的跨平臺應用開發框架，允許開發者使用 Vue.js 技術棧一次編寫代碼，即可生成 iOS、Android、H5、小程序等多端應用，為開發者提供了極大的便利。本文將詳細介紹 UniApp 的入門到精通知識，助力開發者快速上手并深入掌握這一強大的開發工具。

二、UniApp 基礎入門

（一）環境搭建

1. 安裝 Node.js：Node.js 是 UniApp 開發的基礎環境，可前往官網（nodejs.org/）下載適合操作系統的版本并進行安裝。安裝完成后，可在命令行中輸入?node -v?和?npm -v?檢查安裝是否成功以及版本信息。
2. 安裝 HBuilderX：HBuilderX 是 UniApp 的官方開發工具，集成了豐富的開發功能和插件。在 HBuilderX 官網（www.dcloud.io/hbuilderx.h…）下載對應版本并安裝。安裝完成后，啟動 HBuilderX，在菜單欄中點擊 “工具”->“插件安裝”，確保安裝了 “uni-app” 插件。

（二）創建項目

1. 打開 HBuilderX，點擊 “文件”->“新建”->“項目”。
2. 在項目創建向導中，選擇 “uni-app” 項目類型，填寫項目名稱、項目路徑等信息，點擊 “創建”。創建完成后，HBuilderX 會自動生成一個包含基礎結構的 UniApp 項目。

（三）項目結構

1. pages 目錄：存放應用的頁面文件，每個頁面由一個.vue 文件組成，包括頁面的結構、樣式和邏輯。
2. static 目錄：用于存放靜態資源，如圖片、字體文件等，這些資源在編譯后會直接拷貝到各個端的項目中。
3. manifest.json 文件：項目的配置文件，包含應用的名稱、圖標、權限設置、頁面路徑等信息，用于配置應用在不同端的基本屬性。
4. pages.json 文件：用于配置應用的頁面路由、導航欄樣式、底部 tabBar 等頁面相關的全局設置。

（四）編寫第一個頁面

1. 在 pages 目錄下創建一個新的.vue 文件，例如?index.vue。

2. 在?<template>?標簽內編寫頁面的 HTML 結構，例如：

xml

代碼解讀

復制代碼

<template> <view class="container"> <text>Hello, UniApp!</text> </view> </template>

1. 在?<script>?標簽內編寫頁面的 JavaScript 邏輯，例如：

xml

代碼解讀

復制代碼

<script> export default { data() { return { // 數據定義 } }, methods: { // 方法定義 }, mounted() { // 生命周期鉤子，頁面加載完成時執行 } } </script>

1. 在?<style>?標簽內編寫頁面的 CSS 樣式，例如：

xml

代碼解讀

復制代碼

<style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style>

（五）運行項目

1. 在 HBuilderX 中，點擊菜單欄中的 “運行”->“運行到瀏覽器”，可以在瀏覽器中預覽項目的 H5 版本。
2. 點擊 “運行”->“運行到手機或模擬器”，如果連接了手機或啟動了模擬器，會將項目安裝到手機或模擬器中運行，可查看項目的原生應用效果（iOS 或 Android）。
3. 點擊 “運行”->“運行到小程序模擬器”，可選擇微信小程序、支付寶小程序等不同平臺的小程序模擬器進行項目預覽。

三、UniApp 核心概念與進階知識

（一）組件與組件化開發

1. 內置組件：UniApp 提供了豐富的內置組件，如?<view>（視圖容器）、<text>（文本）、<image>（圖片）、<button>（按鈕）等，開發者可以直接在頁面中使用這些組件構建界面。例如：

arduino

代碼解讀

復制代碼

<image src="/static/logo.png" mode="aspectFit"></image>

上述代碼在頁面中顯示一張圖片，src?屬性指定圖片路徑，mode?屬性設置圖片的縮放模式。
2.?自定義組件：除了內置組件，開發者還可以創建自定義組件，實現代碼的復用。在項目中創建一個?components?目錄，在該目錄下創建自定義組件的.vue 文件。例如創建一個名為?my-header.vue?的自定義組件：

xml

代碼解讀

復制代碼

<template> <view class="header"> <text>{{title}}</text> </view> </template> <script> export default { props: { title: { type: String, default: '默認標題' } } } </script> <style> .header { height: 50px; line-height: 50px; background-color: #007aff; color: #fff; text-align: center; } </style>

在其他頁面中使用自定義組件：

xml

代碼解讀

復制代碼

<template> <view class="container"> <my-header title="我的頁面標題"></my-header> </view> </template> <script> import myHeader from '@/components/my-header.vue' export default { components: { myHeader } } </script>

（二）頁面路由與導航

1. 路由配置：在?pages.json?文件中配置頁面路由，例如：

json

代碼解讀

復制代碼

{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁" } }, { "path": "pages/detail/detail", "style": { "navigationBarTitleText": "詳情頁" } } ] }

上述配置定義了兩個頁面的路由路徑和導航欄標題。
2.?導航方式：

• 編程式導航：在 JavaScript 代碼中使用?uni.navigateTo、uni.redirectTo、uni.switchTab?等方法進行頁面跳轉。例如：

css

代碼解讀

復制代碼

uni.navigateTo({ url: '/pages/detail/detail?id=123' })

上述代碼跳轉到詳情頁，并傳遞一個參數?id，值為?123。

• 聲明式導航：在頁面的?<template>?標簽中使用?<navigator>?組件進行導航，例如：

ini

代碼解讀

復制代碼

<navigator url="/pages/detail/detail?id=456">跳轉到詳情頁</navigator>

（三）數據綁定與響應式原理

1. 數據綁定語法：在 UniApp 中，使用?{{}}?語法進行數據綁定。例如在頁面的?<template>?標簽中：

arduino

代碼解讀

復制代碼

<text>{{message}}</text>

在對應的?<script>?標簽中：

javascript

代碼解讀

復制代碼

export default { data() { return { message: 'Hello, Vue!' } } }

頁面加載時，text?組件會顯示?Hello, Vue!。
2.?響應式原理：UniApp 基于 Vue.js 的響應式原理，當數據發生變化時，會自動更新與之綁定的視圖。例如：

javascript

代碼解讀

復制代碼

export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } }

在頁面中綁定一個按鈕的點擊事件：

css

代碼解讀

復制代碼

<button @click="increment">{{count}}</button>

每次點擊按鈕，count?的值會增加，頁面上顯示的數字也會隨之更新。

（四）生命周期鉤子

1. 頁面生命周期：UniApp 頁面有多個生命周期鉤子函數，如?onLoad（頁面加載時觸發）、onShow（頁面顯示時觸發）、onReady（頁面初次渲染完成時觸發）、onHide（頁面隱藏時觸發）、onUnload（頁面卸載時觸發）等。例如：

javascript

代碼解讀

復制代碼

export default { onLoad(options) { // 頁面加載時獲取參數 options console.log('頁面加載，參數：', options) }, onShow() { // 頁面每次顯示時執行 console.log('頁面顯示') } }

1. 應用生命周期：除了頁面生命周期，UniApp 應用也有生命周期鉤子，如?onLaunch（應用啟動時觸發）、onShow（應用前臺顯示時觸發）、onHide（應用后臺運行時觸發）等。在?main.js?文件中可以注冊應用生命周期鉤子：

javascript

代碼解讀

復制代碼

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() // 注冊應用生命周期鉤子 uni.onLaunch(() => { console.log('應用啟動') })

四、UniApp 與原生功能交互

（一）網絡請求

1. uni.request 方法：UniApp 提供了?uni.request?方法用于發送網絡請求，例如：

javascript

代碼解讀

復制代碼

uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log('請求成功', res.data) }, fail: (err) => { console.log('請求失敗', err) } })

上述代碼向指定的 API 地址發送一個 GET 請求，并在成功或失敗時打印相應信息。
2.?封裝網絡請求模塊：為了更好地管理網絡請求，通常會封裝一個網絡請求模塊。創建一個?utils?目錄，在該目錄下創建?http.js?文件：

javascript

代碼解讀

復制代碼

const baseUrl = 'https://api.example.com' export const request = (options) => { return new Promise((resolve, reject) => { uni.request({ url: baseUrl + options.url, method: options.method || 'GET', data: options.data || {}, success: (res) => { if (res.statusCode === 200) { resolve(res.data) } else { reject(res) } }, fail: (err) => { reject(err) } }) }) }

在頁面中使用封裝后的網絡請求模塊：

javascript

代碼解讀

復制代碼

import { request } from '@/utils/http.js' export default { methods: { fetchData() { request({ url: '/data' }).then((data) => { console.log('獲取數據成功', data) }).catch((err) => { console.log('獲取數據失敗', err) }) } } }

（二）存儲與緩存

1. 同步存儲與緩存：UniApp 提供了?uni.setStorageSync（同步設置緩存）、uni.getStorageSync（同步獲取緩存）、uni.removeStorageSync（同步移除緩存）等方法。例如：

arduino

代碼解讀

復制代碼

// 設置緩存 uni.setStorageSync('token', 'abcdefg') // 獲取緩存 const token = uni.getStorageSync('token') console.log('緩存中的 token：', token) // 移除緩存 uni.removeStorageSync('token')

1. 異步存儲與緩存：除了同步方法，還有對應的異步方法?uni.setStorage、uni.getStorage、uni.removeStorage?等，異步方法返回一個 Promise。例如：

javascript

代碼解讀

復制代碼

// 異步設置緩存 uni.setStorage({ key: 'userInfo', data: { name: 'John', age: 25 } }).then(() => { console.log('緩存設置成功') }).catch((err) => { console.log('緩存設置失敗', err) })

（三）設備信息與系統功能調用

1. 獲取設備信息：使用?uni.getSystemInfo?或?uni.getSystemInfoSync?方法獲取設備信息，如設備型號、屏幕寬度、屏幕高度等。例如：

javascript

代碼解讀

復制代碼

uni.getSystemInfo({ success: (res) => { console.log('設備信息：', res) } })

1. 調用系統功能：UniApp 提供了豐富的 API 用于調用系統功能，如?uni.makePhoneCall（撥打電話）、uni.chooseImage（選擇圖片）、uni.getLocation（獲取地理位置）等。例如：

php

代碼解讀

復制代碼

// 撥打電話 uni.makePhoneCall({ phoneNumber: '13888888888' })

五、UniApp 多端適配與優化

（一）樣式適配

1. rpx 單位：UniApp 推薦使用 rpx 單位進行樣式編寫，rpx 會根據設備屏幕寬度自動進行換算，從而實現自適應布局。例如：

css

代碼解讀

復制代碼

.container { width: 750rpx; height: 100rpx; background-color: #f00; }

在不同屏幕寬度的設備上，container?元素的寬度和高度會根據比例自動調整。
2.?條件編譯：針對不同平臺的樣式差異，可以使用條件編譯。例如：

css

代碼解讀

復制代碼

/* #ifdef APP-PLUS */ .app-only-style { color: #007aff; } /* #endif */ /* #ifdef MP-WEIXIN */ .weixin-only-style { background-color: #f5f5f5; } /* #endif */

上述代碼中，.app-only-style?樣式只會在 APP 端生效，.weixin-only-style?樣式只會在微信小程序端生效。

（二）性能優化

1. 圖片優化：在項目中盡量使用合適尺寸和格式的圖片，避免使用過大的圖片資源。可以使用圖片壓縮工具對圖片進行壓縮，或者使用雪碧圖、base64 編碼等方式優化圖片加載。

2. 代碼分包：對于大型項目，可以使用代碼分包技術，將不同頁面或功能的代碼拆分成多個分包，在需要時才加載相應的分包，從而減少首屏加載時間。在?pages.json?文件中配置代碼分包：

json

代碼解讀

復制代碼

{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁" } } ], "subPackages": [ { "root": "subpkg1", "pages": [ { "path": "detail/detail", "style": { "navigationBarTitleText": "詳情頁" } } ] } ] }

上述配置將?detail?頁面所在的代碼放在?subpkg1?分包中。
3.?數據懶加載：對于頁面中不需要立即顯示的數據，可以采用數據懶加載的方式，在用戶滾動到相應位置或觸發特定事件時才加載數據，提高頁面的初始加載速度。例如：

ini

代碼解讀

復制代碼

<view v-for="(item, index) in list" :key="index" v-if="index < visibleCount">{{item}}</view> <button @click="loadMore">加載更多</button>

javascript

代碼解讀

復制代碼

export default { data() { return { list: [], visibleCount: 10, page: 1 } }, methods: { loadMore() { // 模擬加載更多數據 const newData = [] for (let i = 0; i < 10; i++) { newData.push('新數據' + (this.page * 10 + i)) } this.list = this.list.concat(newData) this.visibleCount += 10 this.page++ } } }

六、UniApp 項目實戰與案例分析

（一）實戰項目搭建

1. 需求分析：確定項目的功能需求，例如開發一個電商應用，需要包括商品列表展示、商品詳情頁、購物車功能、訂單結算、用戶登錄注冊等功能。

2. 技術選型：根據項目需求，選擇合適的技術棧和插件。對于 UniApp 項目，確定使用 Vue.js 進行頁面開發，選擇合適的 UI 框架（如 uView UI）提高開發效率，使用后端開發語言（如 Node.js + Express）搭建后端 API 服務。

3. 數據庫設計：設計項目所需的數據庫表結構，如用戶表、商品表、訂單表、購物車表等，確定表之間的關系和字段類型。

4. 項目架構設計：規劃項目的目錄結構，將頁面、組件、接口請求、工具函數等分別放在不同的目錄中，便于管理和維護。例如：

arduino

代碼解讀

復制代碼

- api // 接口請求目錄 - index.js // 接口請求模塊入口 - user.js // 用戶相關接口 - product.js // 商品相關接口 - components // 組件目錄 - header.vue // 頭部組件 - footer.vue // 底部組件 - pages // 頁面目錄 - index.vue // 首頁 - productList.vue // 商品列表頁 - productDetail.vue // 商品詳情頁 - cart.vue // 購物車頁 - order.vue // 訂單頁 - login.vue // 用戶登錄頁 - register.vue // 用戶注冊頁 - utils // 工具函數目錄 - http.js // 網絡請求工具函數 - storage.js // 存儲工具函數 - static // 靜態資源目錄 - images // 圖片資源 - fonts // 字體資源

（二）核心功能實現

1. 商品列表頁：

   • 在?productList.vue?頁面中，使用?uni.request?向后端 API 請求商品列表數據，在?onLoad?生命周期鉤子中發起請求。例如：

javascript

代碼解讀

復制代碼

import { request } from '@/utils/http.js' export default { data() { return { productList: [] } }, onLoad() { request({ url: '/product/list' }).then((res) => { this.productList = res.data }).catch((err) => { console.log('獲取商品列表失敗', err) }) } }

• 在頁面的?<template>?中使用?v-for?指令循環渲染商品列表數據：

xml

代碼解讀

復制代碼

<template> <view class="product-list"> <view class="product-item" v-for="(product, index) in productList" :key="index"> <image :src="product.image" mode="aspectFit"></image> <text>{{product.name}}</text> <text>￥{{product.price}}</text> <button @click="addToCart(product)">加入購物車</button> </view> </view> </template>

1. 商品詳情頁：

   • 接收從商品列表頁傳遞過來的商品 ID 參數，在?onLoad?生命周期中根據 ID 請求商品詳情數據。例如：

javascript

代碼解讀

復制代碼

export default { data() { return { productDetail: {} } }, onLoad(options) { const productId = options.id request({ url: `/product/detail/${productId}` }).then((res) => { this.productDetail = res.data }).catch((err) => { console.log('獲取商品詳情失敗', err) }) } }

• 在頁面中展示商品詳情信息，包括圖片、名稱、價格、描述等。

1. 購物車功能：

   • 在?cart.vue?頁面中，從本地緩存或后端獲取購物車數據并展示。例如：

javascript

代碼解讀

復制代碼

export default { data() { return { cartList: [] } }, onLoad() { const cartData = uni.getStorageSync('cart') || [] this.cartList = cartData } }

• 實現添加商品到購物車功能，在商品列表頁或商品詳情頁點擊 “加入購物車” 按鈕時，將商品信息添加到購物車數據中，并更新本地緩存和頁面顯示。例如：

scss

代碼解讀

復制代碼

methods: { addToCart(product) { const cartData = uni.getStorageSync('cart') || [] const index = cartData.findIndex(item => item.id === product.id) if (index!== -1) { // 商品已存在，數量加 1 cartData[index].quantity++ } else { // 新商品加入購物車 cartData.push({...product, quantity: 1 }) } uni.setStorageSync('cart', cartData) this.$forceUpdate() // 強制更新頁面數據 } }

• 實現購物車商品數量修改、刪除商品等功能。

1. 訂單結算功能：

   • 在?order.vue?頁面中，計算購物車中商品的總價，展示訂單信息。
   • 點擊 “提交訂單” 按鈕時，向后端提交訂單數據，包括用戶信息、收貨地址、商品信息等，后端處理訂單邏輯并返回訂單結果。

（三）項目優化與部署

1. 性能優化：

   • 對項目中的圖片進行壓縮和優化，使用雪碧圖或 base64 編碼處理小圖標，減少網絡請求次數。
   • 對代碼進行混淆和壓縮，去除不必要的代碼注釋和空白字符，減小代碼體積。在 HBuilderX 中，可以在項目的發行設置中開啟代碼壓縮功能。
   • 優化頁面的加載速度，采用數據懶加載、骨架屏等技術。例如，在商品列表頁，當用戶滾動到頁面底部時，再加載更多的商品數據；在頁面加載時，先顯示骨架屏，待數據加載完成后再顯示真實內容。

2. 安全優化：

   • 對用戶輸入的數據進行嚴格的驗證和過濾，防止 SQL 注入、XSS 攻擊等安全漏洞。例如，在用戶登錄注冊頁面，對用戶名、密碼等輸入框進行輸入限制和驗證，確保輸入的數據符合要求。
   • 對后端 API 進行權限驗證，確保只有合法用戶才能訪問敏感數據和操作。例如，使用 JWT（JSON Web Tokens）進行用戶身份認證，在用戶登錄成功后，后端返回一個 JWT 令牌，前端在后續的 API 請求中攜帶該令牌，后端驗證令牌的有效性來確定用戶身份和權限。

3. 項目部署：

   • 將 UniApp 項目編譯成不同平臺的應用程序。在 HBuilderX 中，點擊 “發行” 菜單，可以選擇編譯成 iOS 應用、Android 應用、H5 網站或小程序等。
   • 對于 iOS 應用，需要在蘋果開發者賬號中創建應用證書和描述文件，然后使用 Xcode 進行應用的打包和發布到 App Store。
   • 對于 Android 應用，需要生成簽名證書，然后使用 Android Studio 或其他打包工具進行應用的打包和發布到各大應用商店，如華為應用市場、小米應用商店等。
   • 對于 H5 網站，可以將編譯后的代碼部署到自己的服務器或使用云服務平臺（如阿里云、騰訊云等）進行部署，配置好域名和服務器環境后即可通過瀏覽器訪問。
   • 對于小程序，需要在對應的小程序平臺（如微信小程序、支付寶小程序等）注冊開發者賬號，然后將編譯后的小程序代碼上傳到平臺進行審核和發布。

（四）案例分析

以一個成功的 UniApp 電商應用為例，分析其在市場上取得成功的因素：

1. 用戶體驗：該應用界面設計簡潔美觀，操作流程簡單流暢，用戶能夠快速找到所需商品并完成購物流程。例如，商品分類清晰，搜索功能強大，購物車和訂單結算方便快捷，提供了良好的用戶交互體驗。

2. 性能優化：應用在加載速度、圖片顯示、數據請求等方面進行了有效的優化。在網絡較差的情況下，也能快速顯示商品列表的骨架屏，并在數據加載完成后及時更新頁面，減少了用戶的等待時間。同時，圖片經過壓縮和優化，加載速度快，不會出現卡頓現象。

3. 功能完整性：涵蓋了電商應用的核心功能，如商品展示、購物車、訂單結算、用戶評價、售后客服等，滿足了用戶在購物過程中的各種需求。并且，還提供了一些特色功能，如個性化推薦、積分系統、優惠券等，增加了用戶的粘性和購物樂趣。

4. 多端適配：在 iOS、Android、H5 和小程序等多端都有良好的表現，用戶可以在不同的設備和平臺上使用該應用，擴大了應用的用戶群體和使用場景。例如，在小程序端，利用微信的社交屬性，用戶可以方便地分享商品鏈接給好友，促進了商品的傳播和銷售。

通過對這個案例的分析，可以總結出 UniApp 項目開發的一些經驗和教訓，為后續的項目開發提供參考和借鑒，幫助開發者更好地打造出高質量、受歡迎的跨平臺應用。

七、總結與展望

UniApp 作為一款強大的跨平臺應用開發框架，為開發者提供了高效、便捷的開發方式。從入門的環境搭建、項目創建，到核心概念的掌握、原生功能的交互，再到多端適配與優化以及項目實戰，本文全面地介紹了 UniApp 的開發知識體系。通過學習和實踐 UniApp，開發者可以快速構建出功能豐富、性能優良、多端兼容的應用程序，滿足不同用戶群體和業務場景的需求。隨著移動應用開發技術的不斷發展，UniApp 也在持續更新和完善，未來有望在更多領域得到廣泛應用，為跨平臺應用開發帶來更多的創新和突破。開發者應不斷關注 UniApp 的發展動態，深入學習和探索其新特性和功能，提升自己的開發技能，在跨平臺應用開發領域創造出更多優秀的作品。