共计 2703 个字符，预计需要花费 7 分钟才能阅读完成。
大家好，我是黑马腾云。
这是一个原创系列连载文章，基于企业实在我的项目案例分享教训，带你疾速入门 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 开发工具的应用技巧。
更多精彩内容，欢送继续关注。有任何疑难欢送增加作者进行交换。
作者介绍：黑马腾云，码农、创业者、一生学习者！乐于分享技术、守业、人生思考。关注我，一起为人生欢呼！