uni-app開發之二uni-app開發流程及常用組件講解詳情 - 前端開發,移動開發,uni-app,條件編譯,uni-app,Html,CSS,前端開發 mob64ca14085c24 博客

1. HBuilderX 的安裝

HBuilderX 是一款由 DCloud 開發的高效前端開發工具，專門用於 uni-app 的開發。安裝步驟如下：

下載 HBuilderX：訪問 DCloud 官網，找到 HBuilderX 下載鏈接，選擇適合自己操作系統的版本。
安裝 HBuilderX：下載完成後，運行安裝包並按照提示完成安裝，安裝過程簡單，無需複雜設置。
首次啓動：安裝完成後，打開 HBuilderX，首次啓動時可以選擇創建一個新項目或打開現有項目。

2. HBuilderX 的使用

HBuilderX 提供了一系列便捷的功能，幫助開發者高效編寫代碼：

項目管理：通過左側的項目管理面板，可以方便地創建、刪除和管理項目文件。
代碼編輯：支持語法高亮、自動補全、智能提示等功能，提升編碼效率。
插件支持：可以通過插件市場安裝各種插件，擴展編輯器功能，例如代碼格式化、版本控制等。
實時預覽：支持 H5 和小程序的實時預覽，可以在編輯過程中立即看到效果。
調試工具：集成了調試工具，方便開發者進行斷點調試和性能分析。

3. 初始化應用步驟

3.1. 創建新項目

打開 HBuilderX，在歡迎界面點擊“新建”按鈕，選擇“uni-app”項目模板。
填寫項目信息：在彈出的窗口中輸入項目名稱、項目路徑、項目描述等信息，選擇合適的模板。
點擊創建：確認信息後點擊“創建”，HBuilderX 將自動生成項目目錄結構。

3.2. 配置項目

修改 manifest.json：在項目根目錄下找到 manifest.json 文件，進行必要的配置，如應用名稱、版本號、圖標、描述等。
修改 pages.json：配置應用的頁面路由，包括頁面路徑、導航欄樣式等。此文件定義了項目的頁面結構。

4. 調試應用程序

4.1. 調試 H5

啓動 H5 預覽：在 HBuilderX 中，點擊工具欄的“運行”按鈕，選擇“運行到瀏覽器”或直接使用“運行到 Chrome”，啓動 H5 版本的應用。
使用調試工具：在瀏覽器中打開的應用可以使用瀏覽器自帶的開發者工具進行調試，查看控制枱輸出、網絡請求、元素樣式等信息。

4.2. 調試微信小程序

設置微信小程序環境：在 HBuilderX 中，需確保安裝了微信開發者工具並在 manifest.json 中配置好小程序的 AppID。
運行到微信小程序：點擊工具欄的“運行”按鈕，選擇“運行到微信小程序”。
使用微信開發者工具：HBuilderX 會自動打開微信開發者工具，開發者可以在此環境中調試小程序，包括查看控制枱輸出、模擬用户交互、監測性能等。

5. uni-app 基礎開發

5.1. 項目結構

uni-app 的項目結構通常包含以下幾個重要文件和目錄：

|/src：存放源代碼的目錄。
|----/pages：頁面目錄，每個頁面對應一個 .vue 文件。
|----/components：自定義組件目錄。
|----/static：存放靜態資源。
|manifest.json：項目配置文件，用於配置應用名稱、圖標、權限等。
|pages.json：頁面路由配置文件，定義各個頁面的路徑和導航。

5.2. 基本頁面結構

每個頁面的基本結構如下：

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="handleClick">點擊我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!'
    };
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按鈕被點擊了！',
        icon: 'success'
      });
    }
  }
};
</script>

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

6. 常見組件

6.1. 視圖組件

<view>：塊級容器，用於佈局。
<text>：文本組件，用於顯示文本。
<button>：按鈕組件，用於觸發事件。

<view>
  <text>這是一個文本</text>
  <button @click="handleClick">點擊</button>
</view>

6.2. 輸入組件

<input>：單行輸入框。
<textarea>：多行輸入框。

<view>
  <input v-model="username" placeholder="請輸入用户名" />
  <textarea v-model="content" placeholder="請輸入內容"></textarea>
</view>

7. 常見 API

7.1. 網絡請求

使用 uni.request 進行網絡請求，示例代碼如下：

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

7.2. 數據存儲

使用 uni.setStorageSync 和 uni.getStorageSync 進行本地存儲操作：

// 存儲數據
uni.setStorageSync('key', 'value');

// 獲取數據
const value = uni.getStorageSync('key');
console.log(value); // 'value'

8. Vue3 Composition API 支持

在 uni-app 中，使用 Vue 3 的 Composition API 可以更靈活地組織和管理組件邏輯。以下是一個使用 setup 函數編寫 Composition API 的示例，展示瞭如何在 uni-app 中實現這一特性。

8.1. 基本結構

使用 Composition API 時，所有的邏輯都在 setup 函數中處理。以下是一個簡單的示例組件，演示如何使用 setup 創建響應式數據和方法。

示例：待辦事項列表

<template>
  <view class="todo-container">
    <input v-model="newTodo" placeholder="添加待辦事項" @confirm="addTodo" />
    <view v-for="(todo, index) in todos" :key="index" class="todo-item">
      <text>{{ todo }}</text>
      <button @click="removeTodo(index)">刪除</button>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 響應式數據
    const newTodo = ref('');
    const todos = ref([]);

    // 添加待辦事項
    const addTodo = () => {
      if (newTodo.value) {
        todos.value.push(newTodo.value);
        newTodo.value = '';
        uni.setStorageSync('todos', todos.value); // 存儲到本地
      }
    };

    // 刪除待辦事項
    const removeTodo = (index) => {
      todos.value.splice(index, 1);
      uni.setStorageSync('todos', todos.value); // 更新本地存儲
    };

    // 組件掛載時獲取本地存儲的數據
    onMounted(() => {
      const storedTodos = uni.getStorageSync('todos');
      if (storedTodos) {
        todos.value = storedTodos; // 初始化時獲取本地存儲的數據
      }
    });

    // 返回需要在模板中使用的變量和方法
    return {
      newTodo,
      todos,
      addTodo,
      removeTodo
    };
  }
};
</script>

<style>
.todo-container {
  padding: 20px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
</style>

8.2. 關鍵點解析

響應式數據：使用 ref 創建響應式數據，ref 可以讓基本類型的數據變成響應式的。
方法定義：在 setup 中定義的方法可以直接操作響應式數據。
生命週期鈎子：使用 onMounted 鈎子來執行組件掛載後的邏輯，例如從本地存儲獲取數據。
返回值：setup 函數的返回值是模板中可用的變量和方法。

9. 頁面生命週期

9.1. 頁面加載時序介紹

在 uni-app 中，頁面的生命週期主要由以下幾個關鍵階段組成：

頁面創建：根據 pages.json 的配置，創建頁面，設置原生導航欄和背景色。
DOM 創建：根據頁面模板中的組件創建 DOM。注意，靜態 DOM 是在首次渲染時處理的，動態生成的 DOM不會在這個階段創建。
觸發 onLoad：此時頁面還未顯示，不能直接操作 DOM。適合進行數據請求和參數處理。
開始轉場動畫：新頁面進入時，啓動轉場動畫，默認耗時 300ms。
觸發 onReady：此時 DOM 已經創建，可以操作 DOM 元素，開始展示首批渲染內容。
轉場動畫結束：動畫完成後，頁面完全展示。

9.2. 關鍵方法和事件

以下是頁面生命週期中的重要方法和事件：

uni-app開發之二uni-app開發流程及常用組件講解_uni-app

9.3. 頁面加載常見問題

1. 白屏優化

避免頁面 DOM 元素過多，影響加載速度。
在 onLoad 中進行數據請求，不要在 onReady 中請求。
使用簡單的佔位組件，如 loading 組件或骨架屏，避免空白展示。

2. 卡住動畫不啓動

大量同步計算會影響轉場動畫的啓動，避免在 onLoad 中執行重計算邏輯。

10. 組件生命週期

uni-app 的組件生命週期與 Vue 標準組件的生命週期相同，不包含頁面級的生命週期方法。

以下是組件詳細生命週期：

uni-app開發之二uni-app開發流程及常用組件講解_#移動開發_02

運行示意圖如下：

uni-app開發之二uni-app開發流程及常用組件講解_#前端開發_03

一個APP啓動到頁面加載到組件加載的執行順序如下：

App Launch
App Show
Component beforeCreate
Component created
Page onLoad
Page onShow
Component beforeMount
Page onReady
Component mounted

11. 條件編譯

11.1. 條件編譯簡介

條件編譯通過特殊註釋作為標記，在編譯時根據平台進行選擇性編譯，以滿足不同平台的需求。

1. 基本語法

#ifdef：定義條件，僅在指定平台上編譯。
#ifndef：反向條件，除指定平台外均編譯。
%PLATFORM%：平台名稱。

2. 代碼示例

僅在 App 平台

#ifdef APP-PLUS
// 僅 App 平台的代碼
#endif

除 H5 平台外的所有平台

#ifndef H5
// 僅非 H5 平台的代碼
#endif

在 H5 或微信小程序平台

#ifdef H5 || MP-WEIXIN
// H5 和微信小程序平台的代碼
#endif

11.2. 支持的平台標識及文件類型

1. 平台標識

VUE3：用於區分 vue2 和 vue3。
APP-PLUS、APP-IOS、APP-ANDROID 等，分別用於 App、iOS 和 Android 平台。
MP-WEIXIN、MP-ALIPAY 等小程序平台。

2. 支持的文件類型

.vue、.nvue、.js、.css、.scss 等多種文件。

11.3. 各種條件編譯

1. API 的條件編譯

在 API 層面，可以用條件編譯實現平台特有的 API 調用。例如：

// #ifdef APP-PLUS
uni.showToast({ title: "App 專有功能" });
// #endif

2. 組件的條件編譯

在組件層面，條件編譯可以控制特定組件僅在指定平台展示。例如，僅在微信小程序中展示公眾號關注組件：

<view>
  <!-- #ifdef MP-WEIXIN -->
  <official-account></official-account>
  <!-- #endif -->
</view>

3. 樣式的條件編譯

在樣式層面，也可以使用條件編譯來定製特定平台的樣式。注意，樣式編譯需要用 /* 註釋 */ 格式。

/* #ifdef APP-PLUS */
body { background-color: blue; }
/* #endif */

4. pages.json 的條件編譯

pages.json 支持條件編譯，可定義某頁面僅在特定平台加載，優化包體積。

{
  "pages": [
    {
      "path": "pages/home/index",
      "style": { /* 僅在 App 平台生效 */ }
      // #ifdef APP-PLUS
      // 頁面相關配置
      // #endif
    }
  ]
}

5. 資源和目錄的條件編譯

static 目錄：可以創建專用目錄，放置不同平台的靜態資源。如 static/mp-weixin/a.png 僅在微信小程序中編譯進項目。
整體目錄條件編譯：可在根目錄創建 platforms 目錄，進一步分出 app-plus、mp-weixin 等子目錄，專用於不同平台的頁面文件。

11.4. HBuilderX 支持

HBuilderX 對 uni-app 的條件編譯提供了全面支持：

代碼塊支持：輸入 ifdef 可快速生成代碼片段。
語法高亮：提供語法高亮提示，幫助檢查寫法正確性。
註釋快捷鍵：Ctrl+Alt+/ 生成正確註釋（//、/* */、）。
摺疊與選中：可以快速摺疊或選中條件編譯部分的代碼。

11.5. 特殊説明

區分 Android 和 iOS：建議使用 uni.getSystemInfo 而非條件編譯。
低版本兼容：低於 HBuilderX 3.9 的版本不支持 uniVersion 條件編譯。
條件編譯 vs 多態：條件編譯能有效避免代碼冗餘，是跨平台適配的更優方案。

12. 應用構建發佈與上線

在 uni-app 中，構建和發佈應用是一個至關重要的環節。其實發布上線的工作，主要在於平台特性，比如微信小程序的上線，uni-app 構建打包好以後，對應包在小程序後台提交審核。

以下是 uni-app 應用的完整構建、發佈和上線流程，包括細節和注意事項。

12.1. 應用構建流程

1. 環境準備

在開始構建之前，需要確保開發環境已正確配置。主要步驟如下：

安裝 HBuilderX：下載並安裝最新版本的 HBuilderX，這是 uni-app 官方推薦的開發工具。
安裝 Node.js：確保本地已安裝 Node.js，用於依賴管理和構建。

2. 項目配置

在項目中，確保以下文件配置正確：

manifest.json：配置應用名稱、圖標、版本號、權限等基本信息。
pages.json：配置應用頁面路徑、標題、導航欄樣式等。

3. 構建應用

在 HBuilderX 中，使用菜單進行構建：

打開項目後，點擊菜單中的“發行” => “小程序-微信”或“小程序-支付寶”，根據目標平台進行選擇。
在彈出的構建窗口中，選擇需要的構建選項，如“壓縮”、“加密”等，完成配置後點擊“開始發行”。

12.2. 發佈流程

不同平台有不同的發佈流程，下面以微信和支付寶為例：

1. 微信小程序發佈

註冊小程序賬號：在微信公眾平台註冊小程序賬號，獲取 AppID。
上傳代碼：在 HBuilderX 中構建完成後，使用微信開發者工具打開 dist 目錄，進行代碼上傳。
填寫版本信息：在微信公眾平台中填寫版本信息，設置更新內容和版本號。
提交審核：提交審核，等待審核通過後進行發佈。

2. 支付寶小程序發佈

註冊小程序賬號：在支付寶開放平台註冊小程序賬號，獲取 AppID。
上傳代碼：在 HBuilderX 中構建完成後，使用支付寶開發者工具打開 dist 目錄，進行代碼上傳。
填寫版本信息：在支付寶開放平台填寫版本信息，設置更新內容和版本號。
提交審核：提交審核，等待審核通過後進行發佈。

12.3. 上線工作

1. 上線前的準備

在應用上線之前，確保完成以下準備工作：

功能測試：對應用進行全面測試，確保所有功能正常。
性能優化：檢查應用性能，優化加載速度和資源使用，確保用户體驗良好。
安全檢查：確保應用符合安全標準，避免敏感數據泄露。

2. 上線

在各個平台審核通過後，正式發佈應用。
在應用發佈後，監控用户反饋和使用情況，及時修復可能出現的問題。

3. 版本迭代

根據用户反饋和需求，定期進行版本迭代和更新。
在每次更新時，遵循相同的發佈流程，確保每個版本都經過測試和審核。

13. uni-cloud雲開發

uni-cloud 是 DCloud 提供的一種無服務器雲服務解決方案，旨在為開發者提供後端支持，簡化雲端應用的構建和管理。

允許開發者將業務邏輯、數據存儲和實時功能遷移到雲端，提升開發效率和應用性能。

uni-app開發之二uni-app開發流程及常用組件講解_#uni-app_04

13.1. 什麼是uni-cloud

uni-cloud 是一種無服務器（Serverless）架構的雲服務，允許開發者將應用邏輯和數據處理放在雲端運行，免去服務器管理的煩惱。

它通過提供一系列強大的後端服務，支持多種應用場景，包括移動應用、Web 應用和小程序。

13.2. 主要特點

無服務器架構：開發者無需管理和維護服務器，雲服務按需擴展，降低了運維成本和複雜性。
一站式服務：提供雲函數、雲數據庫、雲存儲等服務，方便快速構建後端應用。
與 uni-app 深度集成：uni-cloud 與 uni-app 平台緊密結合，簡化開發流程，減少配置和學習成本。
支持多種平台：兼容 H5、iOS、Android 和各大主流小程序平台，支持跨平台開發。
高安全性：提供用户身份驗證和權限管理，確保數據安全。

13.3. 核心功能

1. 雲函數

雲函數是 uni-cloud 的核心功能之一，允許開發者編寫業務邏輯代碼並在雲端運行。雲函數支持多種觸發方式，包括 HTTP 請求、數據庫觸發器等。

示例代碼：創建雲函數（工程選擇為 uni-cloud）

(1). 在 HBuilderX 中創建雲函數：右鍵項目，選擇“新建” => “雲函數”，命名為 helloWorld。

(2). 編寫 helloWorld/index.js

// helloWorld/index.js
exports.main = async (event, context) => {
  return {
    message: 'Hello, uni-cloud!',
    input: event
  };
};

(3). 部署雲函數，在 HBuilderX 中，右鍵雲函數，選擇 "上傳到雲端"。

(4). 調用雲函數

uniCloud.callFunction({
    name: 'helloWorld',
    data: { name: 'User' },
    success: (res) => {
        console.log(res.result); // 輸出: { message: 'Hello, uni-cloud!', input: { name: 'User' } }
    },
    fail: (err) => {
        console.error(err);
    }
});

2. 雲數據庫

uni-cloud 提供強大的雲數據庫服務，支持數據的存儲、查詢、更新和刪除操作。

示例代碼：使用雲數據庫。

(1). 在雲函數中操作數據庫

// helloWorld/index.js
const db = uniCloud.database();

exports.main = async (event, context) => {
    // 插入數據
    await db.collection('users').add({
        name: event.name,
        createdAt: db.serverDate()
    });

    // 查詢數據
    const result = await db.collection('users').get();

    return {
        users: result.data
    };
};

(2). 調用雲函數並傳遞數據

unicloud.callFunction({
    name: 'helloWorld',
    data: { name: 'User' },
    success: (res) => {
        console.log(res.result.users); // 輸出數據庫中的用户數據
    },
    fail: (err) => {
        console.error(err);
    }
});

3. 雲存儲

uni-cloud 提供雲存儲服務，可以上傳和管理文件，如圖片和視頻。

示例代碼：使用雲存儲

(1). 上傳文件。

const cloudPath = 'images/' + Date.now() + '.jpg'; // 設置雲存儲路徑
const file = ...; // 獲取文件對象，例如從相冊選擇的圖片

uniCloud.uploadFile({
    cloudPath: cloudPath,
    file: file,
    success: (res) => {
        console.log('文件上傳成功:', res.fileID); // 輸出文件 ID
    },
    fail: (err) => {
        console.error('文件上傳失敗:', err);
    }
});

(2). 下載文件

uniCloud.downloadFile({
    fileID: 'cloud://your-cloud-path/file.jpg', // 雲文件 ID
    success: (res) => {
        console.log('文件下載成功:', res.tempFilePath); // 下載到的文件路徑
    },
    fail: (err) => {
        console.error('文件下載失敗:', err);
    }
});

4. 實時數據推送

uni-cloud 支持 WebSocket 實現實時消息推送，適合即時通訊和實時更新場景。

示例代碼：實時數據推送

(1). 在雲函數中創建 WebSocket 連接。

exports.main = async (event, context) => {
    const ws = uniCloud.websocket;

    ws.on('connection', (ws) => {
        ws.on('message', (message) => {
            // 處理接收到的消息
            ws.send('收到消息：' + message);
        });
    });
};

(2). 客户端連接 WebSocket。

const socket = uni.connectSocket({
    url: 'wss://your-websocket-url'
});

socket.onOpen(() => {
    console.log('WebSocket 連接成功');
    socket.send({ data: 'Hello, WebSocket!' });
});

socket.onMessage((res) => {
    console.log('收到消息:', res.data);
});

5. 監控與分析

uni-cloud 提供監控和日誌功能，可以幫助開發者實時查看雲函數的運行狀態和性能數據。

日誌管理：可以通過控制枱查看雲函數的日誌輸出，幫助調試和排查問題。
性能監控：監控雲函數的調用次數、執行時長等，便於優化應用性能。

13.4. 適用場景

移動應用：提供後端支持，處理用户請求和數據存儲。
小程序：快速實現小程序的雲端功能，提升用户體驗。
Web 應用：支持動態內容生成和數據管理，便於快速迭代開發。

本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。

博客 / 詳情