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


Posted in Javascript onDecember 24, 2022

一、uni-app项目介绍

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

项目结构:

  • ├── 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:

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

相关开发文档:

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

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

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

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

三、安装开发工具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云打包
  • scss/sass编译
  • stylus编译

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

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

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

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

五、小程序和H5打包

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

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

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

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

六、安卓应用打包

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

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

3、点击打包按钮

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

七、IOS应用打包

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

2、按照unpackage/cert目录下的 README.md 说明填写:Bundle ID(AppID)、证书私钥密码、证书profile文件和私钥证书(直接点浏览按钮,选到 unpackage/cert 目录)

3、点击打包按钮

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

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

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

Android:apk文件,直接点击“打开所在目录”,生成的apk文件在 unpackage/release/apk文件夹下
IOS: ipa文件,直接点击“下载地址”,远程下载到本地

打包证书相关资料:
Android平台云端打包证书使用说明
Android平台云端打包 - DCloud公用证书(DCloud老版证书)
Android平台签名证书(.keystore)生成指南
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文件审核通过后才能下载使用

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

② 测试版本
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(记住安装的路径,后面生成证书的时候要用到)

2、打开命令行(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年有效期,单位天,建议时间设置长一点,避免证书过期

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

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

Javascript 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
jQuery常用选择器详解
Jul 17 jQuery
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 #Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 #Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 #Javascript
Moment的feature导致线上bug解决分析
Sep 23 #Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 #Javascript
js 实现验证码输入框示例详解
Sep 23 #Javascript
TypeScript 内置高级类型编程示例
Sep 23 #Javascript
You might like
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python中怎么表示空值
2020/06/19 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
物流专业求职计划书
2014/01/10 职场文书
数学教学随笔感言
2014/02/17 职场文书
长城导游词400字
2015/01/30 职场文书
求职简历自我评价2015
2015/03/10 职场文书
八年级历史教学反思
2016/02/19 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
mysql的数据压缩性能对比详情
2021/11/07 MySQL