Uniapp打包成App全方位指南

一、什麼是Uniapp

Uniapp 是一種基於 Vue.js 開發跨平台應用程序的框架，支持一次編寫，多端使用，如微信小程序、阿里小程序、H5、App等。Uniapp 的官方網站（https://uniapp.dcloud.io/）提供了詳細的文檔和教程。不需要太多的複雜配置，就能完成各個平台的應用打包。下面介紹如何用 Uniapp 打包成 App。

二、Uniapp打包步驟

1、創建項目

1. 創建 uni-app 項目，輸入命令：

npm install -g uni-app-cli
uni-app create my-project

2. 在項目中，使用以下命令安裝需要的插件：

npm i uni-app-plus -D
npm i @dcloudio/uni-cli -D

2、配置

打開 `manifest.json` 文件，這個文件都是剛創建uni-app項目時生成的配置文件，修改以下屬性：

{
  "name": "AppName",
  "app-plus": {
      "navbarBackgroundSafari": "#ffffff",
      "navbarTitleColor": "#000000",
      "supportsDarkMode": true
  }
}

屬性 `name` 是你 App 的名字。 `app-plus` 下的屬性是 App 打包會用到的，`navbarBackgroundSafari` 是導航欄背景色， `navbarTitleColor`是導航欄標題顏色，`supportsDarkMode` 是 App 是否支持深色模式。

3、打包 Native App

輸入以下命令：

npm run dev:plus

如果需要打包不同平台的 App，可以按照以下步驟進行：

– 打包安卓 App

npm install -g @dcloudio/dcloud-hbuilderx-installer
hbuilderx -D

打開 HbuidlerX，進入 toolets => 插件市場，安裝App-cli插件。接著輸入以下命令：

npm run build

– 打包 iOS App

打包 iOS App 可以通過 Xcode 完成，具體步驟請前往官方文檔查看。

4、發布

在 HbuilderX 中，打開 iOS 工程，選擇要打包的證書等信息，點擊手機上面的真機調試，選擇需要安裝的 App 即可。

在 Android 工程中，將 `MyProject\unpackage\android` 目錄下的安裝包安裝即可。

三、注意事項

1. AppPlus不支持uni-app原生組件，如果想使用原生組件需要各平台小程序進行測試

2. 請勿使用全局狀態，只能用 vuex 來保存狀態

3. 在 pages.json 中需要用 __uniappplus__ 來判斷平台，以區分不同平台的 App。

4. 如果需要使用 weex 組件，需要同時保證 iOS 和 Android 都能夠引用到。

四、總結

本文介紹了使用 Uniapp 打包成 App 的全過程，從創建項目到配置，最後發布 App。在這個過程中，需要注意一些細節，防止出錯，打包失敗。Uniapp框架在多平台應用開發中，有著廣泛的適用性，希望本文能對你有所幫助。