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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
js回调函数原理与用法案例分析
Mar 04 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写的求多项式导数的函数代码
2012/07/04 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Python正则表达式如何匹配中文
2020/05/27 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
化工专业应届生求职信
2013/11/08 职场文书
学子宴答谢词
2014/01/25 职场文书
小学教师节活动方案
2014/01/31 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
画展邀请函
2015/01/31 职场文书
教师研修随笔感言
2015/11/18 职场文书