您的位置:

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