用uniapp开发打包多端应用完整指南
一、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 打包的文件
Bash
Copy
拿到源码先修改 config.js 里的 api 请求接口地址,改成你自己的请求域名,然后 manifest.json 里各平台的 appid 改成你自己小程序的 appid:
相关开发文档:
- vue
- uniapp
- HBuilderX
- stylus
二、注册开发者账号和创建应用
开始开发前需要先去uni的开发者后台注册一个账号,登录注册地址:https://dev.dcloud.net.cn/,然后在里面创建一个你自己的应用:
三、安装开发工具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编译
创建项目
创建新项目可以通过HBuilderX顶部菜单:文件 - 新建 - 项目,导入已有项目:文件 - 导入 - 从...
运行项目
运行项目通过HBuilderX顶部菜单:运行 - 运行到...,开发阶段可先选择:运行到内置浏览器,如果有报错缺少xx插件,直接根据提示去安装对应插件,再重新运行就可以了。
五、小程序和H5打包
各平台的配置可以直接在manifest.json里配置,或者在HBuilderX开发工具里选中manifest.json文件,右侧会出现图形化界面直接选择配置
先运行起来,然后点击:发行 - 小程序/网站 - 设置小程序/网站名字/appid/域名,打包成功后可以在dist - build 文件夹下找到对应平台的打包文件(dist - dev 目录下对应的是各平台运行文件)
六、安卓应用打包
1、点击:发行 - 原生App-云打包
2、按照unpackage/cert目录下的README.md说明填写:
Android包名、证书别名、证书私钥密码、选择证书文件(直接点浏览按钮,选到 unpackage/cert 目录,Android开发证书生成参考文末的说明)
3、点击打包按钮
七、IOS应用打包
1、点击:发行 - 原生App-云打包
2、按照unpackage/cert目录下的 README.md 说明填写:
Bundle ID(AppID)、证书私钥密码、证书profile文件和私钥证书(直接点浏览按钮,选到 unpackage/cert 目录)
3、点击打包按钮
使用云打包点击了打包按钮后,需要等待一段时间,少则几分钟,多则大半天...最终打包成功后会在控制台打印出app安装文件的下载地址:
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文件审核通过后才能下载使用
② 测试版本
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:
Bash
Copy
3、将JRE安装路径添加到系统环境变量
我的JRE装在D盘下 "D:\Programs\jre\bin"
set PATH=%PATH%;"D:\Programs\jre\bin"
Bash
Copy
注意这里安装路径不要写错了,我这里刚开始路径里 Programs 就少了个s,后面就一直报错:keytool不是内部或外部命令,也不是可运行的程序
4、使用keytool -genkey命令生成证书
keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore
Bash
Copy
- testalias:是证书别名,可修改为自己想设置的字符,建议使用英文字母和数字
- android.keystore:是证书文件名称,可修改为自己想设置的文件名称,也可以指定完整文件路径
- 36500:是证书的有效期,表示100年有效期,单位天,建议时间设置长一点,避免证书过期
按提示输入信息后就会在D盘根目录下生成 android.keystore 文件,这个文件就可以用来直接打包安卓app了
用uniapp开发打包多端应用完整指南相关推荐
- 最新Uniapp开发的多端影视APP+对接苹果CMS
正文: 苹果10CMS影视APP对接,uniapp开发的多端影视APP,本APP有缓存,投屏,播放记录,收藏等功能是非常完善的. 是会员中心也是用的苹果cms的数据,可以打包到多端的代码. 程序: w ...
- 采用uni-app开发的多端圈子社区论坛系统
采用uni-app开发的多端圈子社区论坛系统 系统基于TP6 Uni-app框架开发:客户移动端采用uni-app开发,管理后台TH6开发. 系统支持微信公众号端.微信小程序端.H5端.PC端多端账号 ...
- uniapp开发微信小程序/h5完整流程,含vant/uview(h5适配vw)
theme: smartblue highlight: dark 创建项目 创建后的项目 此处插入一个坑 亦可以使用uniapp vue-cli 创建项目 vue create -p dcloudio ...
- uniapp 开发移动端对接巴法云物联网平台控制ESP8266开关灯
巴法云物联网平台的MQTT接入只有说明文档,没有移动端实例.经过多次连接测试,使用uniapp开发的移动端终于成功连接服务器. 手机端效果图 uniapp 代码(app, 小程序): <temp ...
- uni-app开发从入门到新闻资讯类跨端应用项目
1.开发流程与规划.mp4 2.应用效果展示与分析.mp4 3.微信小程序入门1.mp4 4.微信小程序入门2.mp4 5.uni-app 核心知识点概览.mp4 6.搭建uni-app开发环境.mp ...
- uniapp开发实例github_跨端开发痛点?送你一款Vue最流行的跨端框架——uni-app
前言 今天来聊一下前端必备技能--小程序开发. 从最早发布的微信小程序,到后来的支付宝小程序.字节跳动小程序.百度小程序.QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢 ...
- 使用uniapp开发APP时的调试/安卓打包等
一.调试 1.先用数据线连接电脑和手机,选择"文件传输", 2.打开开发者模式,华为手机举列-->设置-->关于手机-->版本号,多次连续点击"版本号& ...
- uni-app开发多端之钉钉小程序
经常有开发者咨询uni-app是否支持钉钉小程序? 答案当然是支持! 本文通过将hello uni-app发布到钉钉小程序,演示如何使用uni-app开发钉钉小程序. 扩展钉钉小程序平台 创建hell ...
- uniapp开发,打包成H5部署到服务器
哈喽大家好~我是马小跳.一名进阶中的程序媛. 在这里记录下自己成长的每一次进步,希望遇到志同道合的猿友 一起努力,一起把技术up up up!!! 前端使用uniapp开发项目完成后,需要将页面打包, ...
最新文章
- Python开发基础总结之套接字+字符串+正则表达式
- 几个帅气的linux命令
- MySQL中的条件赋值
- [Android]关于IntentService
- 阿里云上Kubernetes集群联邦
- springboot2整合mysql5_SpringBoot2整合SSM框架详解
- Android移植之自定义ProgressBar
- Pycharm使用os.system()执行cmd代码出现乱码的问题
- Fiddler对安卓模拟器里的APP抓包(步骤详细,各种抓包工具总结)
- python模拟登录百度贴吧_Python百度贴吧多线程自动登录签到/自动打码
- 数据库文档生成工具-markdown格式
- css 设置层级关系,css层级关系怎么设置
- 异常解决——Tomcat启动异常:Cannot assign requested address
- 阿里云短信服务-个人账户测试短信服务
- 如何给PDF文件添加页眉页脚,一分钟轻松搞定
- MATLAB批量将单通道图片转换为三通道图片
- c语言设计程序计算器,C语言程序设计,做一个简单计算器
- android中 menu的属性详细解释
- [原创.数据可视化系列之五]韩国萨德系统防御图
- Diskgenius v5.2专家级数据恢复,真正的可恢复硬盘大数据软件
热门文章
- 读《Ivor Horton's beginning Visual C++ 2010》有感
- 艾克姆 STC15W4K56S4 IAP15W4K58S4 51开发板 大赛esp8266开发板 STC15W4K56S4
- Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)...
- python 实现扫描器,arp欺骗,数据包分析。
- Tolua for Unity3d 编译字节码
- 装逼神器,5 行 Python 代码 实现一键批量扣图
- 【恩墨学院】原来银行都在用这些数据库
- DSP28335笔记 ———— 中断系统 之 外部中断
- IE浏览器版本检测小结
- Android Studio入学1-3:通过okhttp连接服务器