一文搞定多端开发，做全栈大牛附三大企业实战项目

古城微笑少年丶 2024-02-19 10:45 19阅读 0赞

一个功能三套代码

一改需求就是加不完的班？

![图片][16c76153e9031f20446476bda2df1f33.png]

不存在的，告别改改改

拥抱多端开发

一套代码搞定多个平台

![图片][90fe97e761d02f695df5e9b5991c2756.gif]

![图片][23e3e78698efc75b5c1f1cafa3fa8637.png]

**高效开发：一套代码，多端通用**

根据统计数据，全球移动设备用户数已经超过了50亿。随着智能手机、平板电脑等移动设备的普及**，移动端成为许多用户获取信息和使用应用程序的主要平台之一。**为了同时覆盖多个平台的用户，**跨平台应用开发变得越来越受欢迎。**

采用多端开发策略可以减少开发和维护的工作量，通过使用统一的代码库和开发工具，**前端工程师不仅可以在不同平台上复用代码，减少重复劳动，提高开发效率，**还可以确保应用程序在不同平台上都有良好的用户体验，成为企业中的高效开发员工。

**那么，前端工程师常用的多端开发的技术栈有哪些呢？**

**1. React Native：**一个基于React框架的跨平台移动应用开发框架，可以同时开发iOS和Android应用。

**2. Flutter：**Google推出的UI工具包，可以跨平台开发高性能、高保真的移动应用程序。它使用Dart语言编写，并提供丰富的组件库。

**3. Uni-app：**DCloud推出的一种基于Vue.js的跨平台应用开发框架，可以真正做到一套代码编到15个平台。

![图片][72b17969c410ed949f0215fa1910102c.png]

![图片][61cc583ab4ae11f0425b96758b841c29.png]

**多端开发技术栈如何选？**

多端开发技术栈的选用往往需要根据低成本、用户体验以及生态标准三个维度来进行综合考量，**而uni-app则因为其开发成本更低受到了更多企业的青睐。**

![图片][d60abea7be925f7d16318df4b2269b5f.png]

那么，除了能够降低多端开发成本，uni-app还有哪些明显优势呢？

**· 学习成本低：**基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

**· 开发者/案例数量更多：**数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数，跨端完善度更高，真正落地的提高生产力。

**· 平台能力不受限：**在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。

**· 性能体验优秀：**加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。

**· 周边生态丰富：**插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App。

![图片][0626e1cfca0826f63e04fdc98c4a310e.png]

**还不会 uni-app？黑马三大项目随心选**

黑马程序员研究院前端研发中心紧跟市场招聘趋势，对Boss直聘、猎聘、拉勾等招聘网站发布的前端工程师招聘需求进行深入分析，**抢先布局电商、医疗、物流三大热门行业。**

**项目一：** **小兔鲜 uni-app 电商项目**

目前，中国已经成为全球最大的电商市场。**而电商领域仍然在不断扩张，并衍生出更多的细分领域，**比如新零售、农村电商、跨境电商等，目前已经成熟的电商业务模型在各细分领域都得到了广泛的应用。由于电商业务的通用性及可迁移性，使得电商在各类企业中不断深入发展。

因此，**黑马程序研究院前端研发中心投入专职产研团队历时4个月进行电商项目研发，**并由uni-app 官网推荐视频录制者、uni-app 开源生态贡献者、uni-helper 核心成员苏老师倾情讲授该课程。

本课程从 uni-app 基础入手，**按照9大电商业务模块逐步实现完整的电商购物流程业务，**上线至B站不足3个月，已累计高达19W播放量。

**项目业务解决方案：**

**快捷登录：**无需记住账号密码，一键登录方便快捷

**商品加购：**商品一键添加，一键提交订单，价格变动实时提醒，方便快捷

**微信支付：**购物车下单快如闪电，安全可信赖，用户隐私不外泄

**商品分类&商品详情：**商品信息一目了然，快速搜索节约时间

![图片][2137d2402790c6edd0e79caa25d7ab73.png]

**项目技术解决方案：**

**多端支持：**微信小程序端、H5 端 、App 端均已上线

**最新技术栈：**Vue3 + TypeScript + Pinia + Uni UI

**编码规范：**ESLint + Prettier + Git Hooks + JSDoc

**学完之后你的收获：**

**· 学习最新的技术栈，成为团队技术的牛人；**

**· 轻松胜任电商类小程序和APP的开发工作。**

**项目二：** **优医问诊患者端**

自2020年开始，中国医疗健康市场赢了来大爆发，各大医院、门诊、医药企业等都纷纷转战线上。

![图片][e7d10647ab759647e2b553d5a8376ec0.png]

△ 数据来源网络（如侵删）

因此，黑马程序员研究院前端研发中心也紧跟市场动向，**同步推出《优医问诊患者端》项目。**本项目由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的开发工作。**

**项目三：** **神领物流司机端**

物流行业作为支撑全球贸易和供应链的关键领域，具有巨大的市场潜力。**随**着全球贸易的增长和电子商务的兴起，**物流服务需求持续增长，创造了丰富的商机和发展空间。**而我国的快递企业，也随着物流行业的兴起遍布全国。

据此，**黑马程序员也研发了《神领物流司机端》项目课程，**帮助物流企业进行货物全程的透明化管理。

![图片][06582cc02de5173ed3ad343c9cc08744.png]

**项目业务解决方案：**

**实名认证：**司机扫脸认证，行程数据更加安全可靠

**提货管理：**提货任务、运输货品、车辆、线路安排的准确合理，提货流程清晰可控

**交付管理：**凭证、清单缺一不可，货品交付数据详细、实时可查

**回车登记：**异常信息及时掌握，保障车辆安全运行

**项目技术解决方案：**

**多端支持：**微信小程序端、H5 端 、App 端

**最新技术栈：**Vue3 + Pinia + uViewUI + 实名认证

**编码规范：**ESLint + Prettier + Git Hooks + JSDoc

**学完之后你的收获：**

**· 学习Vue3的uni-app技术栈，轻松达成OKR或KPI；**

**· 可以胜任物流行业小程序和APP的开发工作。**

三大项目看一看，不同行业不同业务，帮你成为行业专家。一次搞定三个端，修改需求不再烦，高效开发不加班，成为企业中的高效员工。

![图片][626e612dd0227fb35c12799a8963ff22.png]

![图片][bf0d95ab264038cab8b2cb29f443b825.png]

**黑马程序员：匠心精神，教育无界**

黑马程序员研究院前端研发中心自成立以来，**一直致力于洞察市场发展趋势，通过每季度千份调研问卷和每周更新前沿技术的方式，**帮助学员们及时掌握最新的行业动态和技能需求。

这些努力不仅让学员们在学习过程中能够更好地掌握实际应用技能，同时也为他们的职业生涯提供了有力的支持，**使他们能够更加顺利地达到企业的招聘需求，获得更好的职业发展机会。**

为了确保学员们所学的技能能够满足企业的实际需求，黑马程序员研究院以企业需求为导向，**经过7年的精心打造，形成了贴合企业真实需求的超大项目库。****这些项目库已经覆盖了电商、人力资源、医疗、物流、社交等10多个行业。**

在项目库的开发过程中，黑马程序员研究院严格遵循企业级项目研发的流程和标准，**从需求文档、产品原型、UI设计图、接口文档等各个环节都配备了详尽的资料和文档，**从而确保学员们能够全面掌握项目研发的全过程，全方位提升就业能力。

![图片][a86a34c292031d86be80e9e1a960db9b.png]

自成立17年来，黑马程序员秉承对教学质量精益求精，**全心全意教授好每一位学生的理念，已经累计培养30万+IT从业者。**在未来的日子里，黑马程序员将继续秉持匠心精神，为行业输送更多高质量IT人才。

![图片][7e511e7b474d43da9f7b9f78a3c9bdf4.png]

[16c76153e9031f20446476bda2df1f33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/6a83a32dbdbd4ce985f8a561fce716ad.png
[90fe97e761d02f695df5e9b5991c2756.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/091def47c0cf4895ace5b1fd8d5629ba.png
[23e3e78698efc75b5c1f1cafa3fa8637.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ec7fd6889b834ce7b912333fb78c00b7.png
[72b17969c410ed949f0215fa1910102c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/6ff95689bfda4944b48ca85d46900269.png
[61cc583ab4ae11f0425b96758b841c29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/412f6bd09f234b19bf1115cb025cd564.png
[d60abea7be925f7d16318df4b2269b5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0e1b883fb1f9408a8ed07c1b1f243cd0.png
[0626e1cfca0826f63e04fdc98c4a310e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c66ff9e1136e4921bcce96ce025190b8.png
[2137d2402790c6edd0e79caa25d7ab73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/da838b3532744a209341d5b058918b5a.png
[e7d10647ab759647e2b553d5a8376ec0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/58f1375aefb94fa3a3a1b1fbbdc2ab4d.png
[06582cc02de5173ed3ad343c9cc08744.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3817902f6d1a4daf89580fb8ca14add4.png
[626e612dd0227fb35c12799a8963ff22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/481063ca02684045b3bda02cc9d204a9.png
[bf0d95ab264038cab8b2cb29f443b825.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2a47e3d1c02943ea8d359f39dea1c4b3.png
[a86a34c292031d86be80e9e1a960db9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/4f3fdfb005384776b273b36ede641342.png
[7e511e7b474d43da9f7b9f78a3c9bdf4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/fd036361059a4731bb16d55988ca2317.png