前端瓶颈突破,我选择uni-app之打包Android和iOS及真机调试教程

本文主要介绍安卓手机的打包和联调,本人使用的是华为Mate40Pro鸿蒙系统4.0

前言

  • 作为一个6年多的前端开发者,做过了网页管理页面vue2/vue3是常规技术、使用electron打包桌面应用、小程序蓝牙连接控制设备、小程序udp和tcp连接硬件设备、网页串口连接控制沙盘LED灯开关、小程序VR实景图three.js使用、小程序云服务node.js后台开发。感觉在前端行业已经遇到了瓶颈,所以想找点东西突破下,所以今年想进军下安卓和iOS软件开发以及鸿蒙系统下的软件开发。
  • 本文只说uni-app的云打包和真机调试,离线打包就不说了,因为云打包已经满足大部分了,不想太麻烦,除非遇到非用离线不可在研究研究~

创建项目

  • 没有uni-app账号的要注册一个,地址就不放了,创建项目会提示,根据提示创建注册就行
  • 创建项目可以选择uni-app,当然其它2个也行,只是web前端开发基本会选择uni-app,然后可以选择你属性的vue2/vue3,填写项目名称,如图:

创建Android证书

  • 在uni-app后台应用选择你创建的项目名称,然后点击进去。开发者中心地址
  • 点击Android云端证书 选项,点击创建证书 按钮

HBuilderX工具云打包

  • 点击工具顶部发行 =>原生App-云打包
  • 这里需要注意,一天打包好像只能打包5次,有限制的,并且每次打包需要2-5分钟左右,如果多人打包还得排队打包(多人指平台上打包人数)
  • 为了不浪费打包次数,我们开发一般利用真机调试,后面会讲。
  • 打开打包界面后,选择需要打包的安装包,安装可选择使用云端证书省去很多麻烦,然后要上架什么应用市场,按需点击就行,不需要上线市场应用可不选(不选打包更快点)
  • 最后我比较喜欢使用传统打包,看个人喜爱。
  • 打包完后控制台会告诉你下载App软件的地址,然后提示只能下载5次,所以下载了就要保存好。
  • 根据上面的操作步骤已经完成了App打包了,就这么简单完成了App打包~

真机调试(华为Mate40Pro为例)

  • 点击运行=>运行到手机或模拟器=>运行到Android App基座
  • 打开关于手机页面
  • 然后双击鸿蒙版本,双击3-4次就会打开开发者模式,在双击3-4次会关闭开发者模式
  • 返回页面,选择系统和更新 列表,有个开发人员选项 入口
  • 然后需要 打开 USB调试
  • 重新插入数据线或者下拉顶部菜单有提示,点击到这个USB连接方式 页面,选择MIDI 模式(注意这里很奇怪,不同手机选择的方式不同或者名称不同,建议都点下试试)
  • 最后在工具里面,点击刷新,就会出现一个设备了,就是你手机了,点击运行就会自动在你手机运行App了,支持热更新很方便。

结束语

  • 经过上面的操作已经可以打包完成一个uni-app打包了,至于内容开发,看文档就行,有说明哪些功能不能用,哪些可以用,按文档开发就行。
  • 个人感觉以后鸿蒙App需求会更大点,我就不解析了,要解析就是我是花粉哈。
  • 多个技能多条出路,加油程序猿~
  • 等uni-app x成熟点,我在用他开发下App,现在感觉还不稳定,好像现在只支持安卓打包
  • 如果有什么不对,可以指出。看都看完了,希望点下赞,创作不易~
相关推荐
前端百草阁20 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜21 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40422 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish22 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple22 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five23 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序24 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54124 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普25 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省25 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript