Uniapp打包成App全方位指南

小蓝 • 2024-12-12 12:59 • 编程

一、什么是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框架在多平台应用开发中，有着广泛的适用性，希望本文能对你有所帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/243965.html