前端瓶颈突破,我选择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,现在感觉还不稳定,好像现在只支持安卓打包
  • 如果有什么不对,可以指出。看都看完了,希望点下赞,创作不易~
相关推荐
2分钟速写快排13 分钟前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60611 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角2 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!2 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰2 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi4 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen4 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马5 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu5 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss
IT_陈寒5 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端