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

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
简介: 正如优秀的软件设计一样,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

相关实践学习
使用CLup和iSCSI共享盘快速体验PolarDB for PostgtreSQL
在Clup云管控平台中快速体验创建与管理在iSCSI共享盘上的PolarDB for PostgtreSQL。
AnalyticDB PostgreSQL 企业智能数据中台:一站式管理数据服务资产
企业在数据仓库之上可构建丰富的数据服务用以支持数据应用及业务场景;ADB PG推出全新企业智能数据平台,用以帮助用户一站式的管理企业数据服务资产,包括创建, 管理,探索, 监控等; 助力企业在现有平台之上快速构建起数据服务资产体系
相关文章
|
19天前
|
API 数据库 开发者
构建高效可靠的微服务架构:后端开发的新范式
【4月更文挑战第8天】 随着现代软件开发的复杂性日益增加,传统的单体应用架构面临着可扩展性、维护性和敏捷性的挑战。为了解决这些问题,微服务架构应运而生,并迅速成为后端开发领域的一股清流。本文将深入探讨微服务架构的设计原则、实施策略及其带来的优势与挑战,为后端开发者提供一种全新视角,以实现更加灵活、高效和稳定的系统构建。
23 0
|
7天前
|
消息中间件 监控 持续交付
构建高效微服务架构:后端开发的进阶之路
【4月更文挑战第20天】 随着现代软件开发的复杂性日益增加,传统的单体应用已难以满足快速迭代和灵活部署的需求。微服务架构作为一种新兴的分布式系统设计方式,以其独立部署、易于扩展和维护的特点,成为解决这一问题的关键。本文将深入探讨微服务的核心概念、设计原则以及在后端开发实践中如何构建一个高效的微服务架构。我们将从服务划分、通信机制、数据一致性、服务发现与注册等方面入手,提供一系列实用的策略和建议,帮助开发者优化后端系统的性能和可维护性。
|
28天前
|
监控 Java 开发者
构建高效微服务架构:后端开发的新范式
在数字化转型的浪潮中,微服务架构以其灵活性、可扩展性和容错性成为企业技术战略的关键组成部分。本文深入探讨了微服务的核心概念,包括其设计原则、技术栈选择以及与容器化和编排技术的融合。通过实际案例分析,展示了如何利用微服务架构提升系统性能,实现快速迭代部署,并通过服务的解耦来提高整体系统的可靠性。
|
2天前
|
持续交付 API 开发者
构建高效微服务架构:后端开发的新范式
【4月更文挑战第24天】 随着现代软件系统的复杂性日益增加,传统的单体应用已难以满足快速迭代与灵活扩展的需求。微服务架构作为一种新兴的软件开发模式,以其服务的细粒度、独立部署和弹性伸缩等优势,正在逐渐成为后端开发的重要趋势。本文将深入探讨微服务架构的设计原则、关键技术以及在实际业务中的应用实践,旨在为后端开发者提供构建和维护高效微服务架构的参考指南。
|
4天前
|
监控 API 持续交付
构建高效微服务架构:后端开发的新趋势
【4月更文挑战第23天】 随着现代软件开发实践的不断演进,微服务架构已经成为企业追求敏捷、可扩展和弹性解决方案的首选。本文深入探讨了如何构建一个高效的微服务架构,涵盖了关键的设计原则、技术选型以及实践建议。通过分析微服务的独立性、分布式特性和容错机制,我们将揭示如何利用容器化、服务网格和API网关等技术手段,来优化后端系统的可维护性和性能。文章旨在为后端开发人员提供一套全面的指南,以应对不断变化的业务需求和技术挑战。
|
9天前
|
监控 持续交付 开发者
构建高效微服务架构:后端开发的新趋势
【4月更文挑战第18天】在数字化转型的浪潮中,微服务架构已成为企业提升系统灵活性、加速产品迭代的关键。此文深入探讨了构建高效微服务架构的实践方法,包括服务划分原则、容器化部署、持续集成/持续部署(CI/CD)流程以及监控与日志管理等关键技术点。通过分析具体案例,揭示了微服务在提高开发效率、降低维护成本及促进团队协作方面的显著优势。
|
12天前
|
监控 负载均衡 API
构建高性能微服务架构:后端开发的最佳实践
【4月更文挑战第14天】 在当今快速发展的软件开发领域,微服务架构已成为构建可扩展、灵活且容错的系统的首选方法。本文深入探讨了后端开发人员在设计和维护高性能微服务时需要遵循的一系列最佳实践。我们将从服务划分原则、容器化部署、API网关使用、负载均衡、服务监控与故障恢复等方面展开讨论,并结合实际案例分析如何优化微服务性能及可靠性。通过本文的阅读,读者将获得实施高效微服务架构的实用知识与策略。
|
25天前
|
Kubernetes API 开发者
构建高效微服务架构:后端开发的新范式
在数字化转型的浪潮中,微服务架构已成为许多企业追求敏捷开发、持续交付和系统可维护性的关键解决方案。本文将深入探讨微服务架构的设计原则、技术选型以及实践案例,为后端开发者提供一套构建和维护微服务系统的实用指南。
|
28天前
|
Java fastjson 数据安全/隐私保护
【Dubbo3技术专题】「云原生微服务开发实战」 一同探索和分析研究RPC服务的底层原理和实现
【Dubbo3技术专题】「云原生微服务开发实战」 一同探索和分析研究RPC服务的底层原理和实现
39 0
|
29天前
|
消息中间件 监控 API
构建高效微服务架构:后端开发的新趋势
在现代软件开发中,随着业务需求的多样化和系统复杂性的增加,传统的单体应用已经难以满足快速迭代和灵活部署的需求。本文将探讨如何通过构建高效的微服务架构来应对这些挑战,包括微服务的定义、优势、关键组件以及在实际应用中的设计原则和最佳实践。我们将深入分析微服务架构如何在保证系统可维护性和扩展性的同时,提高开发效率和系统的响应速度。