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

简介: 用uni-app开发多端项目,一套代码可同时打包出各端小程序、h5和app,uni-app支持通过 HBuilderX可视化界面 和 vue-cli命令行 两种方式创建项目

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

1.png

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

开始开发前需要先去uni的开发者后台注册一个账号,登录注册地址:https://dev.dcloud.net.cn/,然后在里面创建一个你自己的应用:
2.png

三、安装开发工具HBuilderX

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

发布App时,需要使用HBuilderX,其他开发工具无法发布App,但可以发布H5、各种小程序。如需开发App,可以先在HBuilderX里运行起来,然后在其他编辑器里修改保存代码,代码修改后会自动同步到手机基座。HBuilderX下载地址:https://www.dcloud.io/hbuilderx.html。

四、新建和运行项目

先安装一些常用的插件:

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

通过HBuilderX顶部菜单:工具 - 插件安装
3.png

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

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

五、小程序和H5打包

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

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

六、安卓应用打包

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

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

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

3、点击打包按钮
7.png

七、IOS应用打包

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

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

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

3、点击打包按钮
8.png

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

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

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

八、发布上线

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文件审核通过后才能下载使用
10.png

② 测试版本

ios-app测试时,将ipa文件上传到蒲公英上:https://www.pgyer.com/

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

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

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

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

1、安装JRE环境

可从Oracle官方下载jre安装包:https://www.oracle.com/technetwork/java/javase/downloads/index.html(记住安装的路径,后面生成证书的时候要用到)

打开命令行(cmd),可以先切换到要生成的目录下,我直接在D盘根目录下生成输入:

d:

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

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

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

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

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

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore
  • testalias:是证书别名,可修改为自己想设置的字符,建议使用英文字母和数字
  • android.keystore:是证书文件名称,可修改为自己想设置的文件名称,也可以指定完整文件路径
  • 36500:是证书的有效期,表示100年有效期,单位天,建议时间设置长一点,避免证书过期
    11.png

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

相关文章
|
6天前
|
编解码 数据安全/隐私保护 开发者
uniapp打包的ipa上架到appstore的傻瓜式教程
uniapp打包的ipa上架到appstore的傻瓜式教程
30 0
|
6天前
|
Android开发 iOS开发 开发者
轻松实现 UniApp Xcode 上传 IPA 无需 Mac,appuploder 一键上传助你高效开发!
轻松实现 UniApp Xcode 上传 IPA 无需 Mac,appuploder 一键上传助你高效开发!
|
6天前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
92 3
|
4天前
|
开发框架 监控 物联网
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
【5月更文挑战第17天】Uniapp作为跨平台开发框架,在物联网、实时数据监控、企业级应用、地理定位和教育、电商领域展现出广泛应用潜力。通过蓝牙连接智能家居,实时展示数据变化,构建复杂业务流程,定位服务及互动学习平台,它提供了创新解决方案。随着技术发展,Uniapp将继续为开发者创造更多机遇和挑战,推动移动应用领域的前进。
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
|
4天前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
3天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
24 3
|
4天前
|
缓存 数据处理 UED
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
【5月更文挑战第17天】在 Uniapp 开发中,解决页面间数据传递、网络请求异常、屏幕适配及性能优化等问题至关重要。利用路由参数传递复杂数据,如`uni.navigateTo`和`JSON.stringify`;处理网络请求异常时,添加错误处理机制增强健壮性;使用响应式设计和缓存策略优化布局和性能。针对组件问题,需排查依赖和配置,而平台差异则需定制化处理。通过不断学习和实践,提升开发技能,确保项目成功实施。
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
【Uniapp 专栏】迈向 Uniapp 开发高手之路的进阶技巧
【5月更文挑战第16天】掌握Uniapp进阶技巧,包括深入理解组件化开发,如创建可复用的按钮组件;运用Vuex进行状态管理,便于全局状态操作;善用Flex布局实现灵活页面设计;合理使用请求库并设置拦截器处理错误和优化请求;同时关注性能优化,提升开发效率和应用质量。
【Uniapp 专栏】迈向 Uniapp 开发高手之路的进阶技巧
|
6天前
|
Android开发 UED 开发者
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
【5月更文挑战第15天】UniApp与原生开发各有千秋。UniApp以高效跨平台著称,一套代码覆盖多平台,降低开发成本,适合快速开发简单应用。原生开发则提供优秀性能和用户体验,适合对性能要求高的复杂应用。两者在功能实现和维护上各有优势,开发者需根据项目需求权衡选择。随着技术进步,两者都在不断优化,为移动应用开发带来新机遇。
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
|
6天前
|
数据安全/隐私保护 Android开发 UED
【Uniapp 专栏】Uniapp 在社交应用开发中的案例研究
【5月更文挑战第12天】本文探讨了一个使用Uniapp开发的社交应用案例,该应用提供用户注册登录、个人资料管理、好友关系、动态发布、消息聊天等功能。Uniapp的跨平台特性和丰富的组件简化了开发过程,确保应用在iOS和Android上的兼容性。特色功能如话题标签、点赞评论和附近的人增加了用户互动。设计上追求简洁美观,同时重视数据安全。此案例展示了Uniapp在社交应用开发的潜力和优势。

热门文章

最新文章