乐趣区

关于前端:uniapp跨端开发H5小程序IOSAndroid一太强了一次性搞定全端开发

大家好,我是黑马腾云。

这是一个原创系列连载文章,基于企业实在我的项目案例分享教训,带你疾速入门 uni-app 开发!欢送点击头像关注,防止迷路!同时如果感觉文章不错,欢送转发帮忙更多人。

文章断更了段时间,之前大半年始终在忙守业的事件,期间率领团队从 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-app 跨端开发 H5、小程序、IOS、Android(一):太强了,一次性搞定全端开发

uni-app 跨端开发 H5、小程序、IOS、Android(二):应用 HBuilderX 等工具进行跨端开发

uni-app 跨端开发 H5、小程序、IOS、Android(三):了解 uni-app 框架思维

uni-app 跨端开发 H5、小程序、IOS、Android(四):理解 uni-app 我的项目构造

uni-app 跨端开发 H5、小程序、IOS、Android(五):一文弄清 uni-app 双向数据绑定

uni-app 跨端开发 H5、小程序、IOS、Android(六):一文弄清 uni-app 事件绑定机制

uni-app 跨端开发 H5、小程序、IOS、Android(七):uni-app 渲染

uni-app 跨端开发 H5、小程序、IOS、Android(八):了解 uni-app 生命周期函数及作用

uni-app 跨端开发 H5、小程序、IOS、Android(九):为什么 uni-app 能自适应不同屏幕尺寸

uni-app 跨端开发 H5、小程序、IOS、Android(十):如何实现跨端兼容,全平台笼罩

uni-app 跨端开发 H5、小程序、IOS、Android(十一):有哪些支流的前端布局形式

uni-app 跨端开发 H5、小程序、IOS、Android(十二):一文把握 flex 布局中的容器属性

uni-app 跨端开发 H5、小程序、IOS、Android(十三):一文把握 flex 布局中的元素属性

demo 局部 ……

三、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 开发工具的应用技巧。

更多精彩内容,欢送继续关注。有任何疑难欢送增加作者进行交换。

作者介绍:黑马腾云,码农、创业者、一生学习者!乐于分享技术、守业、人生思考。关注我,一起为人生欢呼!

退出移动版