作為一位有Vue3基礎的開發者，學習UniApp將會是一個相對平滑的過程。UniApp是一個使用Vue.js開發跨平臺應用的前端框架，可以編譯到iOS、Android、H5以及各種小程序平臺。

一、UniApp簡介

UniApp是基于Vue.js的跨平臺開發框架，具有以下特點：

• 一次開發，多端發布（iOS/Android/H5/微信小程序/支付寶小程序等）
• 使用Vue語法，學習成本低
• 豐富的組件和API
• 良好的社區支持和文檔

二、環境搭建

1. 安裝HBuilderX

vscode也可以寫uniapp，但是HBuilderX是官方推薦的IDE，下載地址：HBuilderX-高效極客技巧

2. 創建項目

1. 打開HBuilderX
2. 文件 → 新建 → 項目
3. 選擇"uni-app"項目模板
4. 填寫項目名稱和路徑
5. 選擇"默認模板"或"uni-ui項目"
6. 點擊創建

3. 項目結構

├── pages                 // 頁面目錄
│   ├── index             // 首頁
│   │   ├── index.vue     // 首頁vue文件
│   │   └── index.json    // 首頁配置文件
├── static                // 靜態資源
├── App.vue               // 應用入口文件
├── main.js               // 入口js文件
├── manifest.json         // 應用配置文件
└── pages.json            // 頁面路由和導航欄配置

三、Vue3與UniApp的結合

1. 組合式API使用

UniApp完全支持Vue3的組合式API，你可以像在Vue3中一樣使用setup()函數：

<script setup>
import { ref, onMounted } from 'vue'const count = ref(0)onMounted(() => {console.log('組件已掛載')
})function increment() {count.value++
}
</script><template><view><button @click="increment">點擊計數: {{ count }}</button></view>
</template>

2. 響應式系統

UniApp使用Vue3的響應式系統，你可以直接使用ref和reactive：

<script setup>
import { ref, reactive } from 'vue'const message = ref('Hello UniApp!')
const user = reactive({name: '張三',age: 25
})function updateUser() {user.name = '李四'user.age += 1
}
</script>

四、核心概念

1. 頁面與組件

UniApp中的頁面和組件都是.vue文件，但有一些區別：

• 頁面：位于pages目錄下，每個頁面有自己的路由路徑
• 組件：可復用的UI單元，通常放在components目錄下

2. 路由系統

UniApp的路由配置在pages.json中：

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁"}},{"path": "pages/user/user","style": {"navigationBarTitleText": "用戶中心"}}]
}

頁面跳轉使用UniApp提供的API：

// 保留當前頁面，跳轉到應用內的某個頁面
uni.navigateTo({url: '/pages/user/user'
})// 關閉當前頁面，跳轉到應用內的某個頁面
uni.redirectTo({url: '/pages/user/user'
})// 返回上一頁面
uni.navigateBack()

3. 生命周期

UniApp在Vue生命周期基礎上擴展了一些應用和頁面生命周期：

??應用生命周期（App.vue中）??：

• onLaunch - 初始化完成時觸發
• onShow - 啟動或從后臺進入前臺顯示
• onHide - 從前臺進入后臺

??頁面生命周期??：

• onLoad - 頁面加載時
• onShow - 頁面顯示時
• onReady - 頁面初次渲染完成
• onHide - 頁面隱藏時
• onUnload - 頁面卸載時

在組合式API中，可以使用onXxx來監聽：

import { onLoad, onShow } from '@dcloudio/uni-app'onLoad(() => {console.log('頁面加載')
})onShow(() => {console.log('頁面顯示')
})

五、UI開發

1. 基本組件

UniApp提供了一系列跨平臺組件，替換了HTML原生標簽：

HTML標簽	UniApp組件	說明
div	view	視圖容器
span	text	文本
img	image	圖片
a	navigator	鏈接

示例：

<view class="container"><text>這是一段文本</text><image src="/static/logo.png" mode="aspectFit"></image>
</view>

2. 樣式編寫

UniApp支持大部分CSS特性，但需要注意：

• 使用rpx作為響應式單位（1rpx ≈ 0.5px）
• 某些CSS屬性在不同平臺可能有差異
• 支持Flex布局

.container {display: flex;flex-direction: column;align-items: center;padding: 20rpx;
}.title {font-size: 32rpx;color: #333;
}

3. 條件編譯

UniApp提供了條件編譯來處理多端差異：

<!-- #ifdef H5 -->
<view>這段內容只在H5平臺顯示</view>
<!-- #endif --><!-- #ifdef MP-WEIXIN -->
<view>這段內容只在微信小程序顯示</view>
<!-- #endif -->

也可以在JS中使用：

// #ifdef H5
console.log('這段代碼只在H5平臺執行')
// #endif

六、API調用

UniApp提供了豐富的API，涵蓋設備、網絡、媒體等功能：

1. 網絡請求

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

2. 數據緩存

// 異步存儲
uni.setStorage({key: 'token',data: 'abcdefg',success: () => {console.log('存儲成功')}
})// 同步存儲（推薦在setup中使用）
try {uni.setStorageSync('token', 'abcdefg')
} catch (e) {console.error(e)
}

3. 設備信息

uni.getSystemInfo({success: (res) => {console.log(res.platform) // 平臺console.log(res.windowWidth) // 窗口寬度}
})

七、狀態管理

對于復雜應用，可以使用Pinia進行狀態管理：

1. 安裝Pinia

npm install pinia @pinia/nuxt

2. 創建store

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++}}
})

3. 在main.js中配置

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'export function createApp() {const app = createSSRApp(App)app.use(createPinia())return {app}
}

4. 在組件中使用

<script setup>
import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()
</script><template><view><text>Count: {{ counter.count }}</text><button @click="counter.increment()">增加</button></view>
</template>

八、調試與發布

1. 調試

• H5：直接在瀏覽器中調試
• 小程序：使用對應開發者工具
• App：使用真機調試或模擬器

2. 發布

1. HBuilderX中選擇"發行"
2. 選擇目標平臺（H5/小程序/App等）
3. 根據向導完成配置
4. 生成發布包

九、學習資源

1. 官方文檔：https://uniapp.dcloud.net.cn/
2. UniUI組件庫：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html
3. 插件市場：https://ext.dcloud.net.cn/
4. 社區論壇：https://ask.dcloud.net.cn/