写点什么

uni-app 跨端开发 H5、小程序、IOS、Android(一):太强了,一次性搞定全端开发

用户头像
黑马腾云
关注
发布于: 2021 年 03 月 17 日
uni-app跨端开发H5、小程序、IOS、Android(一):太强了,一次性搞定全端开发

大家好,我是黑马腾云。


文章断更了段时间,之前大半年一直在忙创业的事情,期间带领团队从 0 到 1 用 uni-app+java 开发了二款商城类商业级应用,产品形态覆盖 H5、微信小程序、IOS、Android。目前产品已成功发布到各大电子市场。


难得有空静下来对项目做下总结,本系列文章先站在公司的的角度对产品技术选型进行分析,然后再根据我们项目实际开发经验进行汇总,供大家参考。


一、我们为什么选 uni-app?


一个项目从立项开发到推向市场,开发只是其中占比很小的一个板块,尤其是对于初创企业来说,把每分钱都花在刀刃上显得尤为重要,因此产品开发的过程要够快、成本要够低。


基于一些特殊的原因,项目启动之初,团队对产品要求就是需要包含:微信小程序、H5、Android、Ios,并且尽可能多的覆盖其它平台。


单从技术角度去考虑,实现方式还是挺多的。


1、采用原生开发的模式


微信小程序:微信官方提供了原生的开发模式。


Android:采用 java 或 Kotlin 进行原生开发。


Ios:采用 Object-c 或 Swift 进行原生开发。


采用原生开发模式,小程序、Android、Ios 每个岗位都至少需要一位人员,成本较高。


2、采用大前端技术,一次开发,打包多个平台


大前端跨平台技术也有不同技术方案:uni-app、flutter、react native、Taro 等等,都可以做到一次开发,跨端兼容。


跨端技术经过这些年的发展,除非特殊场合对性能要求非常高的场合,针对普通应用,性能基本都能满足,即便是真有特殊需求也可以通过混合开发的模式进行解决。


综合从技术生态、开发者社区活跃度、学习成本等诸多方面考虑,针对初创团队来说 uni-app 是比较好的选择。uni-app 有很好的多端兼容机制,并有大量成功的项目案例。同时 uni-app 是基于 vue.js 实现,因此前端人员很容易就能实现 H5、小程序、App 以及管理后台的开发(甚至在很多小企业一个人就把这些活儿干完了),节约人力成本。


二、系列文章规划


研发产品的成功上线(App store、Android 电子市场、小程序发布)直接验证了方案的可行性。当然在开发过程中也遇到一些坑,特意梳理总结出来供参考和讨论。


为了让没接触过 uni-app 开发的人员也能快速上手,本系列文章将从最常用的基础知识点开始梳理,汇集成入门到实战系列文章。前半部分的文章主要讲解基础知识点、后半部分将以实战形式进行 demo 演示。


前置知识

了解微信小程序开发概念

了解 app 相关概念

有一定的 HTML+CSS 基础


适用人群

零基础前端人员

在校学生

想了解前端的后端程序员

对小程序和 app 开发感兴趣人员


内容规划



三、uni-app 简介


uni,读 you ni,是统一的意思。


uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。


uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等 8 大关键指标上拥有更强的优势。


uni-app 最大特点就是跨平台,底层屏蔽了各大平台的差异,使得开发者能用同一套语法开发不同平台的应用。uni-app 跨平台本质思想就是在编译时将代码转化为各自平台的代码。


官方提供的 uni-app 功能框架如下图:



平台经过几年的发展,目前已经聚集了几百万开发者,有着完善的插件市场和周边生态,也提供了广告变现,无论初创公司还是个人开发者都是一个不错的选项。


四、开发工具介绍


前端开发工具很多,主要分为文本编辑器和 IDE 集成环境,选择很多:Atom、sublime、Dreamweaver、Visual Studio Code、WebStorm、HbuilderX 等等。


没有最好,适合的就是好的。业界普遍用的多的就是:Visual Studio Code 和 HbuilerX,我们团队采用的是官方提供的 HbuilderX 进行跨端开发。


可以根据个人喜好选择某一个开发工具,也可以多个开发工具混用。


五、真实项目演示


真实商业项目,已发布小程序、上线各大电子市场,可自行根据名称进行搜索体验。


案例 1:“好厨联盟”


app store、各大电子市场、公众号、小程序皆可搜索体验。


案例 2:“大当家云火锅”


公众号、小程序皆可搜索体验。


下一篇文章,来看看 HBuilderX 开发工具的使用技巧。


更多精彩内容,欢迎持续关注。有任何疑问欢迎私信作者进行交流。


发布于: 2021 年 03 月 17 日阅读数: 80
用户头像

黑马腾云

关注

程序员、终身学习者、创业者。 2020.06.22 加入

“自学帮”公众号主。

评论

发布
暂无评论
uni-app跨端开发H5、小程序、IOS、Android(一):太强了,一次性搞定全端开发