一、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目录下为各平台运行文件)。
六、安卓应用打包
- 点击“发行 - 原生App-云打包”。
- 根据unpackage/cert目录下的README.md说明,填写Android包名、证书别名、证书私钥密码,并选择证书文件(浏览到unpackage/cert目录)。
- 点击打包按钮开始打包。
七、iOS应用打包
- 点击“发行 - 原生App-云打包”。
- 根据unpackage/cert目录下的README.md说明,填写Bundle ID(AppID)、证书私钥密码、证书profile文件和私钥证书(浏览到unpackage/cert目录)。
- 点击打包按钮。
云打包需要等待一段时间,打包成功后控制台会显示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平台生成方法:
-
安装JRE环境: 从Oracle官网下载JRE安装包(https://www.oracle.com/technetwork/java/javase/downloads/index.html),记住安装路径。
-
添加JRE路径到系统环境变量: 打开命令行,将JRE的bin目录路径(例如"D:\Programs\jre\bin")添加到PATH环境变量中:
set PATH=%PATH%;"D:\Programs\jre\bin" -
生成证书: 使用keytool命令生成证书,例如在D盘根目录下执行:
keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore- testalias为证书别名,可自定义。
- android.keystore为证书文件名,可自定义或指定完整路径。
- 36500表示证书有效期(单位天),建议设置较长时间避免过期。
按提示输入信息后,在指定目录生成android.keystore文件,可用于安卓App打包。