SpringCloud微服务实战——搭建企业级开发框架(四十六):【移动开发】整合uni-app搭建移动端快速开发框架-环境搭建

本文涉及的产品
注册配置 MSE Nacos/ZooKeeper,118元/月
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
云原生网关 MSE Higress,422元/月
简介: 正如优秀的软件设计一样,uni-app把一些移动端常用的功能做成了独立的服务或者插件,我们在使用的时候只需要选择使用即可。但是在使用这些服务或者插件时一定要区分其提供的各种服务和插件的使用场景,例如其提供的【uni-starter快速开发项目模版】几乎集成了移动端所需的所有基础功能,使用非常方便,但是其许可协议只允许对接其uniCloud的JS开发服务端,不允许对接自己的php、java等其他后台系统。

  近年来uni-app发展势头迅猛,只要会vue.js,就可以开发一套代码,发布移动应用到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。凭借着此跨平台的特性,吸引了大批公司和开发者的青睐,据官网显示目前其有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件。
  正如优秀的软件设计一样,uni-app把一些移动端常用的功能做成了独立的服务或者插件,我们在使用的时候只需要选择使用即可。但是在使用这些服务或者插件时一定要区分其提供的各种服务和插件的使用场景,例如其提供的【uni-starter快速开发项目模版】几乎集成了移动端所需的所有基础功能,使用非常方便,但是其许可协议只允许对接其uniCloud的JS开发服务端,不允许对接自己的php、java等其他后台系统。

常见问题

  然而,我们的后台是java,因此,只能自己做一个类似于【uni-starter快速开发项目模板】的快速开发项目模板。好在【uni-starter快速开发项目模版】也是将uni-app提供的一些插件组合在一起的,尽管不能直接使用uni-starter,但是我们可以使用相同的插件来实现对应的功能。参考日常移动端开发及uni-starter提供的功能,我们要实现的移动端快速开发项目模板应包含以下基本功能:

  • 权限认证,获取token,token过期自动刷新
  • 登录注册(用户名密码登录、手机号验证码登录、APP一键登录、微信登录、微信小程序登录、微信公众号内登录)
  • 退出登录、账号注销
  • 个人信息修改(修改密码、忘记密码、头像更换、昵称修改)
  • App升级
  • 消息推送开关(app)、清除缓存(app)
  • 指纹解锁(app)、人脸解锁(app)
  • 多语言切换
  • 隐私权限 授权弹框
  • 权限引导

一、新建uni-app项目

  原则上你可以使用任何编写vue的代码编辑器来编写uni-app项目代码,但是为了使用uni-app官方提供的便捷性,这里我们选择使用官方开发工具HBuilderX来进行uni-app项目的开发。

1、下载HBuilderX并安装
2、在HBuilderX中依次点击:文件 -> 新建 -> 项目

新建项目

  在这里,我们选择Hello uni-app项目,其中有丰富的演示和接口模板,如果项目不需要可以进行删除。填写项目名称,选择Vue版本,自己根据项目情况选择使用Vue2还是Vue3。因为我们不使用uniCloud,使用的是自己的Java后台,所以这里不需要启用uniCloud。以上信息填完之后点击创建项目,就可以在项目列表中看到我们刚刚新建的项目了。

项目结构目录

3、配置uni-app基础信息:双击manifest.json文件可以打开uniapp基础信息配置界面,这里不详细描述,具体配置及说明请参考官方文档

uni-app基础信息

  以上配置完成之后,基本可以在手机模拟器中查看uni-app的官方示例了。

二、安装手机模拟器

  在开发过程中,我们需要对界面进行调试预览,这时候需要用到手机模拟器(当然也可以直接插上数据线运行到手机预览),IOS和Android都有对应的手机模拟器,IOS手机模拟器目前只有官方版本,并且需要运行在MAC系统;Android有官方版手机模拟器也有非官方版,但是在之前使用过程中,官方版用着非常卡,需要调整优化很多参数,非常麻烦,反而非官方版,很多是针对手游做过优化的,使用很方便,这里使用夜神模拟器为例,介绍HBuilder如何连接手机模拟器预览调试。

1、下载安装手机模拟器 (到官网下载,这里不能直接放地址)
2、正常按照步骤安装模拟器,安装成功后,启动并开启“开发者选项”菜单,打开USB调试模式。
  • 打开模拟器中的设置

image.png

  • “开发者选项”菜单 默认不展示,需点击最下面的版本号5次,就会显示“开发者选项”菜单

image.png

  • 点击“开发者选项”,开启“USB调试”

image.png

3、配置HbuilderX连接手机模拟器

  adb(Android Debug Bridge)是Android SDK中的工具,使用此工具,您可以直接操作和管理Android模拟器或真实的Android设备。要连接夜神模拟器,我们需要用到夜神模拟器安装目录下的nox_adb.exe文件。

  • 在HbuilderX的菜单栏中依次点击:运行 -> 运行到手机或模拟器 -> ADB路径设置,将adb路径修改为夜神模拟器安装目录下的路径,我这里是 D:/Program Files/Nox/bin/nox_adb.exe ,同时修改Android模拟器端口为62001。

image.png

image.png

  • 配置好之后,连接到模拟器需要执行命令 ./nox_adb.exe connect 127.0.0.1:62001,我们可以在 ./nox_adb.exe文件所在的目录建立一个.bat命令的快捷方式,放在桌面,每次使用的时候,双机此.bat快捷方式即可。

image.png

nox_adb.bat内容:

.\nox_adb.exe connect 127.0.0.1:62001
  • 运行了nox_adb.bat命令之后,就可以通过HbuilderX将我们前面新建的uni-app项目运行到手机模拟器中预览了。依次点击 运行 -> 运行到手机或模拟器 -> 运行到Android App基座。

image.png

  • 此时弹出框会显示我们已连接的模拟器,点击运行,HBuilderX就可以自动打包app发布到模拟器中运行,并可以在HBuilderX控制台查看运行日志。

image.png

  • 点击运行之后,在夜神模拟器中就可以看到uni-app自动安装并打开,我们就可以在里面预览调试我们的移动应用了。

image.png

  此篇介绍了为何需要自己搭建uni-app快速开发框架、快速开发框架需要包含哪些基本功能、以及如何从零搭建uni-app的开发和测试环境。后续将根据需要的基本功能,介绍每个功能的详细搭建过程和步骤。

GitEgg-Cloud是一款基于SpringCloud整合搭建的企业级微服务应用开发框架,开源项目地址:

Gitee: https://gitee.com/wmz1930/GitEgg
GitHub: https://github.com/wmz1930/GitEgg

相关实践学习
AnalyticDB PostgreSQL 企业智能数据中台:一站式管理数据服务资产
企业在数据仓库之上可构建丰富的数据服务用以支持数据应用及业务场景;ADB PG推出全新企业智能数据平台,用以帮助用户一站式的管理企业数据服务资产,包括创建, 管理,探索, 监控等; 助力企业在现有平台之上快速构建起数据服务资产体系
相关文章
|
3天前
|
消息中间件 Java 开发者
Spring Cloud微服务框架:构建高可用、分布式系统的现代架构
Spring Cloud是一个开源的微服务框架,旨在帮助开发者快速构建在分布式系统环境中运行的服务。它提供了一系列工具,用于在分布式系统中配置、服务发现、断路器、智能路由、微代理、控制总线、一次性令牌、全局锁、领导选举、分布式会话、集群状态等领域的支持。
20 5
|
3天前
|
开发框架 Dart 前端开发
移动应用开发的未来:跨平台框架与原生系统之争
【5月更文挑战第72天】本文深入探讨了移动应用开发领域的最新趋势,重点关注跨平台开发框架与原生操作系统之间的竞争。文章首先概述了移动应用的重要性及其在现代社会中不断增长的需求。随后,分析了当前流行的跨平台工具如React Native和Flutter,以及它们如何使得开发者能够用单一代码库为不同操作系统构建应用程序。此外,文中还讨论了这些工具与苹果iOS和谷歌Android等原生系统之间的比较,以及它们在性能、用户体验和市场接受度方面的差异。最后,文章预测了未来移动应用开发可能的发展方向,并提出了对开发者和企业的具体建议。
|
3天前
|
人工智能 开发框架 自然语言处理
移动应用开发的未来趋势:跨平台框架与AI的融合
随着移动设备成为日常生活中不可或缺的一部分,移动应用开发领域正在经历前所未有的变革。跨平台框架的出现使得开发者能够以更高的效率和更低的成本创建在多个操作系统上运行的应用,而人工智能(AI)技术的集成则为移动应用带来了更加智能化和个性化的用户体验。本文将探讨这些技术进步如何塑造移动应用的未来,包括Flutter等跨平台框架的优势、AI在移动应用中的实际应用案例,以及这些技术对移动应用开发行业的影响。
10 0
|
3天前
|
机器学习/深度学习 人工智能 自然语言处理
移动应用开发的未来趋势:跨平台框架与人工智能的融合
在数字化时代,移动应用开发领域正经历着前所未有的变革。本文将探讨移动应用开发的新动向,特别是跨平台框架的兴起和人工智能技术的整合,以及它们如何重塑开发者的工作方式和用户的互动体验。通过分析当前市场数据、技术发展趋势及案例研究,我们将揭示这些创新如何推动移动应用向更高效、更智能的方向发展。
8 0
|
4天前
|
搜索推荐 前端开发 Android开发
移动应用开发的未来趋势:跨平台框架与性能优化
【7月更文挑战第11天】在移动应用开发领域,随着技术的不断进步和市场需求的多样化,开发者们面临着新的挑战和机遇。本文将深入探讨跨平台框架的兴起、性能优化的必要性以及未来移动应用开发的可能方向。通过分析Flutter、React Native等流行框架的特点,以及介绍最新的性能调优技术,文章旨在为移动应用开发人员提供指导和启示,帮助他们在竞争激烈的市场中脱颖而出。
|
4天前
|
机器学习/深度学习 人工智能 搜索推荐
移动应用开发的未来趋势:跨平台框架与人工智能的融合
【7月更文挑战第11天】随着移动设备的普及,移动应用开发领域正经历着前所未有的变革。本文将深入探讨当前移动应用开发的新趋势,特别关注跨平台框架和人工智能技术的结合如何推动行业发展。我们将分析Flutter、React Native等跨平台框架的优势,以及它们如何简化开发流程和降低成本。同时,我们也将讨论人工智能在移动应用中的集成,包括智能助手、个性化服务和自动化测试等方面。通过这些技术的应用案例,我们将展示未来移动应用开发的潜力和挑战。
|
5天前
|
机器学习/深度学习 人工智能 搜索推荐
探索移动应用开发的未来:跨平台框架与原生开发的较量
本文深入探讨了移动应用开发领域中,跨平台框架与原生开发之间的竞争关系。通过分析当前市场上的主要技术趋势、开发者偏好以及企业需求,文章揭示了两种开发模式各自的优势与挑战,并预测了未来移动应用开发可能的发展方向。同时,本文也对如何选择合适的开发策略提供了见解,旨在帮助开发者和企业做出更明智的技术决策。
10 0
|
6天前
|
消息中间件 供应链 Java
实现基于Spring Cloud的事件驱动微服务
实现基于Spring Cloud的事件驱动微服务
|
5天前
|
Dart 前端开发 JavaScript
移动应用开发中的跨平台解决方案
【7月更文挑战第10天】 在移动应用开发的广阔天地中,跨平台解决方案如同一把瑞士军刀,为开发者提供了多面手的便利。本文将深入探讨跨平台技术的核心优势与挑战,并通过实例分析,揭示这些解决方案如何影响移动应用的构建和生态系统。我们将一同见证跨平台技术如何在不断变化的移动市场中,为开发者和企业带来创新的机遇。
|
8天前
|
机器学习/深度学习 人工智能 搜索推荐
移动应用开发的未来趋势:跨平台框架与AI的融合
【7月更文挑战第7天】在数字时代的浪潮中,移动应用开发不断进化,以满足日益增长的用户需求和技术创新。本文将探讨移动应用开发的最新趋势,特别是跨平台框架的兴起和人工智能技术的整合,以及它们如何共同塑造着移动应用的未来。我们将深入分析Flutter等跨平台解决方案的优势,并探索AI如何增强移动应用的功能性和用户体验。通过实际案例研究,本文旨在为开发者提供对未来移动应用开发的洞见和指导。