一文搞定多端开发,做全栈大牛 附三大企业实战项目
一个功能三套代码
一改需求就是加不完的班?
不存在的,告别改改改
拥抱多端开发
一套代码搞定多个平台
高效开发:一套代码,多端通用
根据统计数据,全球移动设备用户数已经超过了50亿。随着智能手机、平板电脑等移动设备的普及,移动端成为许多用户获取信息和使用应用程序的主要平台之一。为了同时覆盖多个平台的用户,跨平台应用开发变得越来越受欢迎。
采用多端开发策略可以减少开发和维护的工作量,通过使用统一的代码库和开发工具,前端工程师不仅可以在不同平台上复用代码,减少重复劳动,提高开发效率,还可以确保应用程序在不同平台上都有良好的用户体验,成为企业中的高效开发员工。
那么,前端工程师常用的多端开发的技术栈有哪些呢?
1. React Native:一个基于React框架的跨平台移动应用开发框架,可以同时开发iOS和Android应用。
2. Flutter:Google推出的UI工具包,可以跨平台开发高性能、高保真的移动应用程序。它使用Dart语言编写,并提供丰富的组件库。
3. Uni-app:DCloud推出的一种基于Vue.js的跨平台应用开发框架,可以真正做到一套代码编到15个平台。
多端开发技术栈如何选?
多端开发技术栈的选用往往需要根据低成本、用户体验以及生态标准三个维度来进行综合考量,而uni-app则因为其开发成本更低受到了更多企业的青睐。
那么,除了能够降低多端开发成本,uni-app还有哪些明显优势呢?
· 学习成本低:基于通用的前端技术栈,采用vue语法+微信小程序api,无额外学习成本。
· 开发者/案例数量更多:数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数,跨端完善度更高,真正落地的提高生产力。
· 平台能力不受限:在跨端的同时,通过条件编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。
· 性能体验优秀:加载新页面速度更快、自动diff更新数据。App端支持原生渲染,可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。
· 周边生态丰富:插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App。
还不会 uni-app?黑马三大项目随心选
黑马程序员研究院前端研发中心紧跟市场招聘趋势,对Boss直聘、猎聘、拉勾等招聘网站发布的前端工程师招聘需求进行深入分析,抢先布局电商、医疗、物流三大热门行业。
项目一: 小兔鲜 uni-app 电商项目
目前,中国已经成为全球最大的电商市场。而电商领域仍然在不断扩张,并衍生出更多的细分领域,比如新零售、农村电商、跨境电商等,目前已经成熟的电商业务模型在各细分领域都得到了广泛的应用。由于电商业务的通用性及可迁移性,使得电商在各类企业中不断深入发展。
因此,黑马程序研究院前端研发中心投入专职产研团队历时4个月进行电商项目研发,并由uni-app 官网推荐视频录制者、uni-app 开源生态贡献者、uni-helper 核心成员苏老师倾情讲授该课程。
本课程从 uni-app 基础入手,按照9大电商业务模块逐步实现完整的电商购物流程业务,上线至B站不足3个月,已累计高达19W播放量。
项目业务解决方案:
快捷登录:无需记住账号密码,一键登录方便快捷
商品加购:商品一键添加,一键提交订单,价格变动实时提醒,方便快捷
微信支付:购物车下单快如闪电,安全可信赖,用户隐私不外泄
商品分类&商品详情:商品信息一目了然,快速搜索节约时间
项目技术解决方案:
多端支持:微信小程序端、H5 端 、App 端均已上线
最新技术栈:Vue3 + TypeScript + Pinia + Uni UI
编码规范:ESLint + Prettier + Git Hooks + JSDoc
学完之后你的收获:
· 学习最新的技术栈,成为团队技术的牛人;
· 轻松胜任电商类小程序和APP的开发工作。
项目二: 优医问诊患者端
自2020年开始,中国医疗健康市场赢了来大爆发,各大医院、门诊、医药企业等都纷纷转战线上。
△ 数据来源网络(如侵删)
因此,黑马程序员研究院前端研发中心也紧跟市场动向,同步推出《优医问诊患者端》项目。本项目由Vue.js 开源生态贡献者、 Vant 核心成员周老师带领专职团队研发,历时7个月,解决线下问诊排队时间长,医疗资源分配不均等问题,提供线上问诊&线上购药服务,让患者无需排队看名医。
项目业务解决方案:
极速问诊:描述病情、选择患者、支付问诊订单、在线问诊、开方购药,免预约免排队5步解决看病难题
在线聊天:医生24h在线服务,1 V 1在线沟通无障碍
物流查询:药品到哪我知道,物流信息实时跟踪,药品安全到家保时效
订单管理:未付款订单怎么办?已完成订单哪里看?多状态订单管理覆盖下单场景
项目技术解决方案:
多端支持:微信小程序端、H5 端 、App 端
最新技术栈:Vue3 + Pinia + Uni UI + SokectIO
编码规范:ESLint + Prettier + Git Hooks + JSDoc
学完之后你的收获:
· 学习Vue3的uni-app技术栈,轻松达成OKR或KPI;
· 可以胜任在线问诊行业小程序和APP的开发工作。
项目三: 神领物流司机端
物流行业作为支撑全球贸易和供应链的关键领域,具有巨大的市场潜力。随着全球贸易的增长和电子商务的兴起,物流服务需求持续增长,创造了丰富的商机和发展空间。而我国的快递企业,也随着物流行业的兴起遍布全国。
据此,黑马程序员也研发了《神领物流司机端》项目课程,帮助物流企业进行货物全程的透明化管理。
项目业务解决方案:
实名认证:司机扫脸认证,行程数据更加安全可靠
提货管理:提货任务、运输货品、车辆、线路安排的准确合理,提货流程清晰可控
交付管理:凭证、清单缺一不可,货品交付数据详细、实时可查
回车登记:异常信息及时掌握,保障车辆安全运行
项目技术解决方案:
多端支持:微信小程序端、H5 端 、App 端
最新技术栈:Vue3 + Pinia + uViewUI + 实名认证
编码规范:ESLint + Prettier + Git Hooks + JSDoc
学完之后你的收获:
· 学习Vue3的uni-app技术栈,轻松达成OKR或KPI;
· 可以胜任物流行业小程序和APP的开发工作。
三大项目看一看,不同行业不同业务,帮你成为行业专家。一次搞定三个端,修改需求不再烦,高效开发不加班,成为企业中的高效员工。
黑马程序员:匠心精神,教育无界
黑马程序员研究院前端研发中心自成立以来,一直致力于洞察市场发展趋势,通过每季度千份调研问卷和每周更新前沿技术的方式,帮助学员们及时掌握最新的行业动态和技能需求。
这些努力不仅让学员们在学习过程中能够更好地掌握实际应用技能,同时也为他们的职业生涯提供了有力的支持,使他们能够更加顺利地达到企业的招聘需求,获得更好的职业发展机会。
为了确保学员们所学的技能能够满足企业的实际需求,黑马程序员研究院以企业需求为导向,经过7年的精心打造,形成了贴合企业真实需求的超大项目库。这些项目库已经覆盖了电商、人力资源、医疗、物流、社交等10多个行业。
在项目库的开发过程中,黑马程序员研究院严格遵循企业级项目研发的流程和标准,从需求文档、产品原型、UI设计图、接口文档等各个环节都配备了详尽的资料和文档,从而确保学员们能够全面掌握项目研发的全过程,全方位提升就业能力。
自成立17年来,黑马程序员秉承对教学质量精益求精,全心全意教授好每一位学生的理念,已经累计培养30万+IT从业者。在未来的日子里,黑马程序员将继续秉持匠心精神,为行业输送更多高质量IT人才。
相关文章:

一文搞定多端开发,做全栈大牛 附三大企业实战项目
一个功能三套代码 一改需求就是加不完的班? 不存在的,告别改改改 拥抱多端开发 一套代码搞定多个平台 高效开发:一套代码,多端通用 根据统计数据,全球移动设备用户数已经超过了50亿。随着智能手机、平板电脑等移动…...

带有滑动菜单指示器的纯 CSS 导航选项卡
效果展示 CSS 知识点 filter 属性回顾 transition 属性回顾 使用单选框实现导航菜单的思路 单选框当点击完成后就会有一个:checked属性,可以利用这个属性来实现导航菜单底部滑动块的滑动动画和当前菜单项激活状态的管理。 整体页面结构 <div class"tab…...
Java学习笔记41——接口组成更新
接口祖成更新 接口组成更新接口组成更新概述接口的组成接口中的默认方法接口中的静态方法接口中的私有方法 接口组成更新 接口组成更新概述 接口的组成 常量 public static final 抽象方法 public abstract 默认方法(Java8)静态方法(Java8…...

iview实现table里面每行数据的跳转
我的需求是跳转到第三方网站,看官方是写了如何跳转站内路由,不符合我的要求,在csdn发现了一篇文章,我贴一下代码 <template><Table border :columns"ReportColumns" :data"ReportData"><templ…...

Docker快速搭建Drupal内容管理系统并远程访问
🎬 鸽芷咕:个人主页 🔥个人专栏:《Linux深造日志》《C干货基地》 ⛺️生活的理想,就是为了理想的生活! 文章目录 前言1. Docker安装Drupal2. 本地局域网访问3 . Linux 安装cpolar4. 配置Drupal公网访问地址5. 公网远程访问Drupal…...

Ansible优化大全
文章目录 一、关闭系统信息收集二、开启加速 Ansible 执行速度修改配置文件/etc/ansible/ansible.cfg由于该功能与sudo冲突,必须关闭 requiretty 选项方法一方法二 参考文章: https://blog.csdn.net/o0o0o0D/article/details/110998873 一、关闭系统信息…...

Python|OpenCV-图像的添加和混合操作(8)
前言 本文是该专栏的第8篇,后面将持续分享OpenCV计算机视觉的干货知识,记得关注。 在使用OpenCV库对图像操作的时候,有时需要对图像进行运算操作,类似于加法,减法,位操作等处理。而本文,笔者将针对OpenCV对图像的添加,混合以及位操作进行详细的介绍说明和使用。 下面,…...

Vue3+vite+cesium环境搭建
引言 目前有不少vue3cesium的配置教学,存在以下两个问题: (1)vue3cli方式,随着项目的迭代,npm run serve 启动调试很慢; (2)vue3vite 确实能将调试启动提升不少的&…...
metaObjecthandler 的基本理解与使用(自动插入更新人和创建人)
metaObjecthandler 的基本理解与使用(自动插入更新人和创建人) mysql 自动插入更新和修改时间 更新字段信息 ALTER TABLE test MODIFY create_date timestamp not null default CURRENT_TIMESTAMP; ALTER TABLE test MODIFY update_date timestamp not null default CURRE…...
SpringBoot与ES7实现多条件搜索
SpringBoot与ES7实现多条件搜索 利用Kibana内置的航班数据,查询从威尼斯到中国按票价升序排列的前10条航班数据。 第一步,新建SpringBoot功能,pom.xml引入四个依赖。 <dependency><groupId>org.elasticsearch.client</groupI…...

【排序算法】 快速排序(快排)!图解+实现详解!
🎥 屿小夏 : 个人主页 🔥个人专栏 : 算法—排序篇 🌄 莫道桑榆晚,为霞尚满天! 文章目录 📑前言🌤️快速排序的概念☁️快速排序的由来☁️快速排序的思想☁️快速排序的实…...
急招开发、安全工程师实习生
信息安全工程师-实习生 公司:四川久远银海软件股份有限公司 工作职责 1、负责对公司WEB应用、APP、小程序、公众号等产品进行安全渗透测试; 2、负责对参与攻防演练、护网行动的项目组提供安全技术支撑; 3、负责提供基线核查、风险评估、主…...

数据结构与算法—插入排序选择排序
目录 一、排序的概念 二、插入排序 1、直接插入排序 直接插入排序的特性总结: 2、希尔排序 希尔排序的特性总结: 三、选择排序 1、直接选择排序 时间复杂度 2、堆排序—排升序(建大堆) 向下调整函数 堆排序函数 代码完整版: …...

基于词云图的短信热词数据可视化
热词统计:短信、邮件、微信、QQ、微博、电商评价、新闻、各行业热词(旅游、世界杯、战争、考研等)、热点事件等场景。 展示模型:给定多段文本,绘制出词云图。 核心思想:根据样本集中的文本包含的高频词…...

Linux/centos上如何配置管理Web服务器?
Linux/centos上如何配置管理Web服务器? 1 Web简单了解2 关于Apache3 如何安装Apache服务器?3.1 Apache服务安装3.2 httpd服务的基本操作 4 如何配置Apache服务器?4.1 关于httpd.conf配置4.2 常用指令 5 简单实例 1 Web简单了解 Web服务器称为…...

Java EE进阶2
包如果下载不下来怎么办? 1,确认包是否存在 2.如果包存在就多下载几次 3.如果下载了很多次都下载不下来,看看是不是下面几步出现了问题? 1)是否配置了国内源 settings.xml 2)目录是否为全英文,存在中文的话就修改路径 3)删除本地仓库的 jar 包,重新下载(可能由于网络的原…...

最新AI系统ChatGPT源码+AI绘画系统源码+支持GPT4.0+Midjourney绘画+搭建部署教程+附源码
一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…...
大厂面试题-为什么一线互联网公司严禁使用存储过程
之所以互联网公司不让用,主要有几个方面的原因: 1.存储过程不好调试,一旦涉及到非常复杂的逻辑,定位问题的时候比较麻烦 2.存储过程的一致性很差,如果从Oracle迁移到MySQL,涉及到部分数据库独有特性的时候…...
SpringBoot+Swagger详细使用方法
一、接口文档概述 swagger是当下比较流行的实时接口文文档生成工具。接口文档是当前前后端分离项目中必不可少的工具,在前后端开发之前,后端要先出接口文档,前端根据接口文档来进行项目的开发,双方开发结束后在进行联调测试。 二…...

[动态规划] (十二) 简单多状态 LeetCode 213.打家劫舍II
[动态规划] (十二) 简单多状态: LeetCode 213.打家劫舍II 文章目录 [动态规划] (十二) 简单多状态: LeetCode 213.打家劫舍II题目解析解题思路状态表示状态转移方程初始化和填表顺序返回值提醒 代码实现总结 213. 打家劫舍 II 题目解析 本题是对打家劫舍和按摩师的升级题型&am…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...

在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...