uni-app入门介绍

软件开发的时间通常是这样的:一开始的 90% 开发工作用掉了整个计划 90% 的时间,剩下的 10% 同样需要整个计划 90% 的时间,而最终发布前的修改也是如此。—— 汤姆 · 嘉吉

一、引入

1.为什么学习Uniapp开发?

当今社会互联网技术在不断的极速发展,其中离不开每一位热情奋进的技术人员。每天层出不穷的新概念,热火朝天的区块链,泛滥的共享经济,每年蜂拥而至抢着每一手热点发布的手机厂商,还有资讯快餐充斥着我们所有能看到的场景。这一切都离不开界面的呈现,内容上、形式上、功能上都在以非同凡响的效果吸引着你我,当中离不开一个角色–前端。

前端是从web应用开发分离出来的用户层,也就是用户接口,直接与用户进行交互,通信技术发展促进了很多前端技术的变革。从最传统的开发模式开始,随着的前后端分离,AMD,CMD和UMD的模块化管理,工程化出现和发展,再演变为前端MVVM和当今的小程序。前端与其说是一个职业,更是一项不断学习提升自我的过程,作为前端开发者堪比盖世武侠,招式固然重要,唯有内功心法才能让功力大增。

2017 年,微信小程序横空出世,依托微信的强大市场占有量,小程序的出现影响了人们的生活,简单方便的移动操作界面应用在生活方方面面,但是对于前端开发者来说,意味着我们又要掌握一套的框架,甚至又催生了一个职业—小程序工程师。

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

开发市场规模不断扩大,前端开发的角色越发重要。对于大部分应用级开发而言,开发团队的人员配备正向前端倾斜,包括Android开发、iOS开发、PC端开发、小程序开发等角色进一步壮大了前端开发团队,前端工程师的岗位权重占比将不断加重。

虽然开发应用一直在向前端倾斜过渡,作为一名小小的前端,是不是也敢挺着身板自称程序员呢?因为前端就三大法宝:HTML、JS、CSS。技术,显然站不住脚。前端三架马车React、Angular、Vue 这样面向现代 web 应用需求的前端框架及其生态,与APP结合的混合开发模式,内嵌单页webview,Hybrid App。都在混淆这前端界。这些让我们感觉渺小羸弱。

你是否也在考虑WEB统一的时代来临,更或是由你改变?如果你有这样的想法,那么你来对了,Uniapp正在做这些事情,让开发有着统一的规范。

Uniapp 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码,Uniapp 将其编译到iOS、Android、H5、以及各种小程序平台。

在实际开发中,同一个项目可能需要分别在H5 端,小程序端,甚至React Native 端有相同的表现,我们就需要开发和维护多端不同代码,工作量是非常巨大的。Uniapp 继承自 Vue.js,提供了完整的 Vue.js 开发体验。Uniapp 组件规范和扩展api与微信小程序基本相同。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手,用特定的集成语言与多端语言进行对话就能在多个平台发布,省去了开发成本,节约了时间,何乐而不为呢?

2.uniapp的由来

参考与官网 | 链接

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

很多人以为小程序是微信先推出的,其实,DCloud才是这个行业的开创者。

DCloud于2012年开始研发小程序技术,优化webview的功能和性能,并加入W3C和HTML5中国产业联盟,推出了HBuilder开发工具,为后续产业化做准备。

2015年,DCloud正式商用了自己的小程序,产品名为“流应用”,它不是B/S模式的轻应用,而是能接近原生功能、性能的App,并且即点即用,第一次使用时可以做到边下载边使用。

为将该技术发扬光大,DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟,并推进各家流量巨头接入该标准,开展小程序业务。

360手机助手率先接入,在其3.4版本实现应用的秒开运行。

uni-app入门介绍_bom

随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。

在2015年9月,DCloud推进微信团队开展小程序业务,演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例,以及分享了webview体验优化的经验。

微信团队经过分析,于2016年初决定上线小程序业务,但其没有接入联盟标准,而是订制了自己的标准。

DCloud持续在业内普及小程序理念,推进各大流量巨头,包括手机厂商,陆续上线类似小程序/快应用等业务。

部分公司接入了联盟标准,但更多公司因利益纷争严重,标准难以统一。

技术是纯粹的,不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。

造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。

既然各巨头无法在标准上达成一致,那么就通过这个框架为开发者抹平各平台差异。

这,就是uni-app的由来。

  • 因为多年积累,所以DCloud拥有800多万开发者,并不意外
  • 因为DCloud一直都有小程序的iOS、Android引擎,所以uni-app的App端和小程序端保持高度一致,并不意外
  • 因为DCloud在引擎上的持续投入,所以uni-app的App端功能、性能比大多数小程序引擎都优秀,并不意外
  • 因为DCloud对各家小程序太了解了,所以做好抹平各端差异的跨端框架,并不意外

现在,uni-app已经是业内最风靡的应用框架,支撑着12亿活跃手机用户的庞大生态。

世界兜兜转转,当你踏出第一步时,随后很多事不会按你的预期发展。但只要你不忘初心,你想要的那个目标,最终会换个方式实现。

二、uniapp介绍

1.什么是uniapp?

一个基于 Vue.js 的全端开发框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台。一次开发,到处运行。

uni-app入门介绍_atom_02

2.生态环境

uniapp官方的qq群目前已经有35个了,都是2000人的大群。还有各种基于uniapp的开源组件库,比如uViewUI、colorui、ThorUI、uCharts,最完整最出名的目前是uViewUI,官方文档也是比较完备了。

官方文档 | 链接

uview官网 | 链接

三、uview介绍

在平时开发中推荐使用uView

uni-app2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归。

因此,uView应运而生,uView的目标是成为uni-app生态最优秀的UI框架。

关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意。

四、有哪些uni-app的作品

uni-app入门介绍_bom_03

五、uni-app的社区规模

uni-app入门介绍_dom_04

六、参考资料

官方文档 | 链接

参考文档 看云 | 链接