用uniapp开发打包多端应用完整指南

矫情吗；* 2023-10-14 20:27 128阅读 0赞

### 一、uni-app项目介绍 ###

用uni-app开发多端项目，一套代码可同时打包出各端小程序、h5和app，uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目，下面示例项目采用 HBuilderX可视化界面 的方式创建，cli项目可参考uni文档，大部分流程都是通用的。

**项目结构：**

├── common           api文件  
    ├── components       公用组件  
    ├── libs             公共方法  
    ├── pages            页面  
    ├── static           本地静态资源，注意：静态资源只能存放于此  
    ├── store            状态管理  
    ├── styles           公共样式  
    ├── config.js        配置文件  
    ├── manifest.json    配置应用名称、appid、logo、版本等打包信息，详见  
    ├── pages.json       配置页面路由、导航条、选项卡等页面类信息  
    └── unpackage  
        ├── res          图标、启动页  
        ├── cert         APP证书文件  
        └── dist         打包的文件

拿到源码先修改 config.js 里的 api 请求接口地址，改成你自己的请求域名，然后 manifest.json 里各平台的 appid 改成你自己小程序的 appid：

![ebb16202308141532297782.png][]

**相关开发文档：**

1.  [vue][]
2.  [uniapp][]
3.  [HBuilderX][]
4.  [stylus][]

![ff7a6202308141532435775.png][]

### 二、注册开发者账号和创建应用 ###

开始开发前需要先去uni的开发者后台注册一个账号，登录注册地址：[开发者中心][Link 1]，然后在里面创建一个你自己的应用：

![8c3be202308141532531367.png][]

### 三、安装开发工具HBuilderX ###

HBuilderX，简称HX，是轻如编辑器，强如IDE的合体版本，有点像vscode和小程序开发工具的结合体，顶部菜单栏有一个“运行”和“发行”的菜单，直接点击：运行 —— 运行到内置浏览器，可以直接像在浏览器里一样调试。

发布App时，需要使用HBuilderX，其他开发工具无法发布App，但可以发布H5、各种小程序。如需开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。HBuilderX下载地址：[HBuilderX-高效极客技巧][HBuilderX-]。

### 四、新建和运行项目 ###

**先安装一些常用的插件：**

*  内置浏览器
 *  uni-app（Vue2）编译
 *  uni-app（Vue3）编译
 *  App真机运行
 *  App云打包
 *  scss/sass编译
 *  stylus编译

![a7eac202308141533056496.png][]

**创建项目**

创建新项目可以通过HBuilderX顶部菜单：文件 - 新建 - 项目，导入已有项目：文件 - 导入 - 从...

**运行项目**

运行项目通过HBuilderX顶部菜单：运行 - 运行到...，开发阶段可先选择：运行到内置浏览器，如果有报错缺少xx插件，直接根据提示去安装对应插件，再重新运行就可以了。

![b5d7a202308141533158103.png][]

### 五、小程序和H5打包 ###

各平台的配置可以直接在manifest.json里配置，或者在HBuilderX开发工具里选中manifest.json文件，右侧会出现图形化界面直接选择配置

![c366b202308141533269616.png][]

先运行起来，然后点击：发行 - 小程序/网站 - 设置小程序/网站名字/appid/域名，打包成功后可以在dist - build 文件夹下找到对应平台的打包文件（dist - dev 目录下对应的是各平台运行文件）

![e14ec202308141533353993.png][]

### 六、安卓应用打包 ###

**1、点击：发行 - 原生App-云打包**

**2、按照unpackage/cert目录下的README.md说明填写：**

Android包名、证书别名、证书私钥密码、选择证书文件（直接点浏览按钮，选到 unpackage/cert 目录，Android开发证书生成参考文末的说明）

**3、点击打包按钮**

![b31ac202308141533454554.png][]

### 七、IOS应用打包 ###

**1、点击：发行 - 原生App-云打包**

**2、按照unpackage/cert目录下的 README.md 说明填写：**

Bundle ID(AppID)、证书私钥密码、证书profile文件和私钥证书（直接点浏览按钮，选到 unpackage/cert 目录）

**3、点击打包按钮**

![8269b20230814153356121.png][]

使用云打包点击了打包按钮后，需要等待一段时间，少则几分钟，多则大半天...最终打包成功后会在控制台打印出app安装文件的下载地址：

![1808a202308141534061914.png][]

Android：apk文件，直接点击“打开所在目录”，生成的apk文件在 unpackage/release/apk文件夹下

IOS: ipa文件，直接点击“下载地址”，远程下载到本地

打包证书相关资料：

[Android平台云端打包证书使用说明][Android]

[Android平台云端打包 - DCloud公用证书（DCloud老版证书）][Android_ - DCloud_DCloud]

[Android平台签名证书(.keystore)生成指南][Android_.keystore]

[iOS证书(.p12)和描述文件(.mobileprovision)申请][iOS_.p12_.mobileprovision]

### 八、发布上线 ###

**1、小程序**

直接用小程序开发者工具导入 dist - build 文件夹下对应的目录，如微信小程序：dist/build/mp-weixin

**2、H5**

和web网站一样，将最终打包出来的H5文件部署到线上：dist/build/h5

**3、Android**

*  最终生成的apk文件，可以直接用聊天工具发送到安卓手机上安装使用
 *  去注册各大安卓应用市场账号，上传到应用市场供用户下载
 *  也可以自己开发一个发布页，将安卓apk放到项目里，用户点击直接下载到手机里，如果设备是ios还可以直接判断让跳转到appstore下载地址

**4、IOS**

① 正式版本

ios正式应用只能从app store里下载，需要先注册苹果开发者账号，填写各项应用资料，上传ipa文件审核通过后才能下载使用

![109fc202308141534258794.png][]

② 测试版本

用有授权的苹果手机扫描二维码在Safari浏览器里打开即可直接下载安装，或者直接在safari浏览器中输入“下载地址”

### 附：windows下生成安卓开发证书 ###

Android平台打包发布apk应用，需要使用数字证书（.keystore文件）进行签名，用于表明开发者身份，Android证书的生成是自助和免费的，不需要审批或付费。

可以使用JRE环境中的keytool命令生成，以下是windows平台生成证书的方法：

**1、安装JRE环境**

可从Oracle官方下载jre安装包：[https://www.oracle.com/technetwork/java/javase/downloads/index.html][https_www.oracle.com_technetwork_java_javase_downloads_index.html]（记住安装的路径，后面生成证书的时候要用到）

**2、打开命令行（cmd），可以先切换到要生成的目录下**

**我直接在D盘根目录下生成输入：**

Copy

BashCopy

**3、将JRE安装路径添加到系统环境变量**

我的JRE装在D盘下 "D:\\Programs\\jre\\bin"

set PATH=%PATH%;"D:\Programs\jre\bin"

Copy

BashCopy

注意这里安装路径不要写错了，我这里刚开始路径里 Programs 就少了个s，后面就一直报错：keytool不是内部或外部命令，也不是可运行的程序

**4、使用keytool -genkey命令生成证书**

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore

Copy

BashCopy

*  testalias：是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
 *  android.keystore：是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
 *  36500：是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期

![11792202308141534512118.png][]

按提示输入信息后就会在D盘根目录下生成 android.keystore 文件，这个文件就可以用来直接打包安卓app了

[ebb16202308141532297782.png]: https://img-blog.csdnimg.cn/img_convert/c7e62ec8f123ffb11fa8fc305d9a1741.png
[vue]: https://v3.cn.vuejs.org/
[uniapp]: https://uniapp.dcloud.io/
[HBuilderX]: https://hx.dcloud.net.cn/
[stylus]: https://www.stylus-lang.cn/
[ff7a6202308141532435775.png]: https://img-blog.csdnimg.cn/img_convert/da86603adc538448ad7c93bbeeea8913.png
[Link 1]: https://dev.dcloud.net.cn/
[8c3be202308141532531367.png]: https://img-blog.csdnimg.cn/img_convert/f884c9b98175d9d1a8b19c606268b9e5.png
[HBuilderX-]: https://www.dcloud.io/hbuilderx.html
[a7eac202308141533056496.png]: https://img-blog.csdnimg.cn/img_convert/a7dfa2e6ea0275fe661ac42507bbfe5d.png
[b5d7a202308141533158103.png]: https://img-blog.csdnimg.cn/img_convert/0c0ca677750ab3cb6037f3a9dcaed5ae.png
[c366b202308141533269616.png]: https://img-blog.csdnimg.cn/img_convert/419b17eb2eefaf41fc5693181e73da24.png
[e14ec202308141533353993.png]: https://img-blog.csdnimg.cn/img_convert/7e5bfc0a8a2d8e75e259221c23237ce2.png
[b31ac202308141533454554.png]: https://img-blog.csdnimg.cn/img_convert/79670289ec35697c169328ac68eaccb2.png
[8269b20230814153356121.png]: https://img-blog.csdnimg.cn/img_convert/828fcca54806e814763d300509b1c26a.png
[1808a202308141534061914.png]: https://img-blog.csdnimg.cn/img_convert/ae5462aeb041b31a98fc52f1d2f1897b.png
[Android]: https://ask.dcloud.net.cn/article/35985
[Android_ - DCloud_DCloud]: https://ask.dcloud.net.cn/article/68
[Android_.keystore]: https://ask.dcloud.net.cn/article/35777
[iOS_.p12_.mobileprovision]: https://ask.dcloud.net.cn/article/152
[109fc202308141534258794.png]: https://img-blog.csdnimg.cn/img_convert/0303b281751f3c1100ecd88aef6c03d6.png
[-_App_iOS_Android]: https://www.pgyer.com/
[https_www.oracle.com_technetwork_java_javase_downloads_index.html]: https://www.oracle.com/technetwork/java/javase/downloads/index.html
[11792202308141534512118.png]: https://img-blog.csdnimg.cn/img_convert/7f79ae5b28dacfb19c3989ed828e135e.png