摘要：Uniapp作為一款基于Vue.js的跨平臺開發框架，支持“一次開發，多端部署”。本文將手把手教你如何將Uniapp項目運行到微信小程序、H5、APP等多個平臺，并解析常見問題。

---

一、環境準備

在開始前，請確保已安裝以下工具🔧：

代碼編輯器

• HBuilderX（官方IDE，推薦使用）
  創建項目教程：官方HBuilderX創建項目教程
  下載地址：HbuilderX下載地址
• Vscode（博主推薦使用🌹🌹）
  但是需要自己通過vue-cli創建項目，并配置運營打包命令，我們可以直接下載官方的模版使用，具體的cli創建項目教程可以按照官方的步驟來：Vue-cli創建項目教程
  下載地址：Vscode下載地址

項目環境

• Node.js（需≥14版本）

其他平臺模擬器

• 各平臺開發工具：
  • 微信開發者工具（小程序）
  • Android Studio（Android App）
  • Xcode（iOS App）

---

二、創建Uniapp項目（我們以HBuilderX 創建項目舉例子）

1. 新建項目
   打開HBuilderX → 文件 → 新建 → 項目 → 選擇uni-app模板 → 輸入項目名稱。
   
   

2. 項目結構解析

   ├── pages        // 頁面目錄
   ├── static       // 靜態資源
   ├── App.vue      // 根組件
   ├── main.js      // 入口文件
   ├── manifest.json// 應用配置（如App圖標）
   └── pages.json   // 頁面路由與樣式
   

---

三、運行到不同平臺

3.1 微信小程序

1. 配置微信開發者工具路徑
   
   配置自己的微信開發者工具路徑
   

2. 配置manifest.json
   打開manifest.json → 微信小程序配置 → 輸入微信AppID（若無，可跳過但無法真機調試）。
   

3. 運行項目

   • 頂部菜單 → 運行 → 運行到小程序模擬器 → 微信開發者工具
     

   • 首次運行需在微信開發者工具中設置：設置 → 安全 → 開啟服務端口
     
     然后就運行成功了
     

常見問題

• 錯誤提示[error] 項目未配置appid
  在manifest.json中補充微信小程序的AppID，或點擊“試用”跳過。

---

3.2 H5網頁

1. 瀏覽器運行
   直接點擊HBuilderX工具欄的“運行” → 運行到瀏覽器 → 選擇Chrome。
   
   

2. 自定義配置
   在manifest.json的H5配置中可修改：

   • 路由模式（hash/history）
   • 跨域代理（解決本地開發接口跨域問題）

---

3.3 Android/iOS App

1. 基礎配置
   打開manifest.json → App SDK配置 → 選擇需要的模塊（如地圖、支付）。

2. 真機調試

   • 連接手機 → 開啟USB調試
   • 點擊“運行” → 運行到手機或模擬器
     

3. 云打包
   菜單 → 發行 → 原生App-云打包 → 選擇平臺并提交。

注意：iOS打包需Apple開發者賬號（年費$99），測試階段可使用免費證書。

---

3.4 其他平臺（快應用/支付寶小程序等）

在manifest.json中配置對應平臺參數，運行方式與微信小程序類似，需提前安裝各平臺開發者工具。

---

四、條件編譯技巧

通過注釋實現多平臺差異化代碼：
可以參考我之前寫的文章了解這部分知識：UniApp如何判斷平臺的多種方法（2025最新指南）

<!-- #ifdef H5 -->
<div>僅H5平臺顯示的內容</div>
<!-- #endif --><!-- #ifdef MP-WEIXIN -->
<view>僅微信小程序生效的組件</view>
<!-- #endif -->

---

五、常見問題匯總

問題描述	解決方案
微信開發者工具無法自動打開	檢查端口是否開啟，或手動導入項目目錄
H5頁面路由白屏	修改路由模式為history
App啟動閃退	檢查是否缺少必要模塊權限

---

六、總結

Uniapp通過統一的技術棧大幅降低多端開發成本，但需注意：

• 各平臺API存在差異，建議使用條件編譯
• 復雜功能（如原生插件）需單獨適配
• 調試時優先使用真機測試