uni-app项目开发与打包发布完整指南

Viewed 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         打包的文件

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

开发前需要先在uni开发者后台注册账号,登录地址为:https://dev.dcloud.net.cn/,注册后创建一个新应用以便后续管理。

三、安装开发工具HBuilderX

HBuilderX(简称HX)是一款集编辑器和IDE功能的开发工具,类似于VSCode与小程序的结合体。顶部菜单栏提供“运行”和“发行”选项,点击“运行”——“运行到内置浏览器”可直接在浏览器中调试代码。发布App时必须使用HBuilderX,而其他开发工具仅支持发布H5和各种小程序。如需开发App,可先在HBuilderX中运行项目,然后在其他编辑器中修改代码,修改后会同步到手机基座。HBuilderX下载地址:https://www.dcloud.io/hbuilderx.html。

四、新建和运行项目

安装常用插件:

通过HBuilderX顶部菜单“工具 - 插件安装”,建议安装以下插件:

  • 内置浏览器
  • uni-app(Vue2)编译
  • uni-app(Vue3)编译
  • App调试
  • App真机运行
  • App云打包
  • scss/sass编译
  • stylus编译

创建项目:

通过HBuilderX顶部菜单“文件 - 新建 - 项目”创建新项目,或通过“文件 - 导入 - 从...”导入现有项目。

运行项目:

通过HBuilderX顶部菜单“运行 - 运行到...”启动项目,开发阶段可选择“运行到内置浏览器”。如果报错提示缺少插件,根据提示安装对应插件后重新运行即可。

五、小程序和H5打包

各平台配置可在manifest.json文件中直接编辑,或在HBuilderX中选中manifest.json文件,使用右侧的图形化界面进行配置。运行项目后,点击“发行 - 小程序/网站”,设置小程序或网站的名称、appid、域名等信息。打包成功后,在dist/build文件夹下找到对应平台的打包文件(dist/dev目录下为各平台运行文件)。

六、安卓应用打包

  1. 点击“发行 - 原生App-云打包”。
  2. 根据unpackage/cert目录下的README.md说明,填写Android包名、证书别名、证书私钥密码,并选择证书文件(浏览到unpackage/cert目录)。
  3. 点击打包按钮开始打包。

七、iOS应用打包

  1. 点击“发行 - 原生App-云打包”。
  2. 根据unpackage/cert目录下的README.md说明,填写Bundle ID(AppID)、证书私钥密码、证书profile文件和私钥证书(浏览到unpackage/cert目录)。
  3. 点击打包按钮。

云打包需要等待一段时间,打包成功后控制台会显示App安装文件的下载地址。对于Android,生成apk文件位于unpackage/release/apk文件夹;对于iOS,生成ipa文件需从远程地址下载。

八、发布上线

小程序: 使用小程序开发者工具导入dist/build文件夹下对应的目录,例如微信小程序对应dist/build/mp-weixin。

H5: 将打包出的H5文件(位于dist/build/h5)部署到线上服务器。

Android: 生成的apk文件可直接发送到安卓手机安装,或注册各大安卓应用市场账号后上传供用户下载。也可自行开发发布页,提供apk直接下载。

iOS:

  • 正式版本:需注册苹果开发者账号,填写应用资料,上传ipa文件到App Store审核通过后下载使用。
  • 测试版本:将ipa文件上传到蒲公英平台(https://www.pgyer.com/),用户通过Safari浏览器扫描二维码或输入下载地址即可安装。

附:Windows下生成安卓开发证书

Android平台打包发布apk需使用数字证书(.keystore文件)进行签名,证书生成自助免费。以下为Windows平台生成方法:

  1. 安装JRE环境: 从Oracle官网下载JRE安装包(https://www.oracle.com/technetwork/java/javase/downloads/index.html),记住安装路径。

  2. 添加JRE路径到系统环境变量: 打开命令行,将JRE的bin目录路径(例如"D:\Programs\jre\bin")添加到PATH环境变量中:

    set PATH=%PATH%;"D:\Programs\jre\bin"
    
  3. 生成证书: 使用keytool命令生成证书,例如在D盘根目录下执行:

    keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore
    
    • testalias为证书别名,可自定义。
    • android.keystore为证书文件名,可自定义或指定完整路径。
    • 36500表示证书有效期(单位天),建议设置较长时间避免过期。

    按提示输入信息后,在指定目录生成android.keystore文件,可用于安卓App打包。

0 Answers