大家吼，我是一枚前端小白！就职于 《虽然公司不大，但是老板人很好》科技有限公司！一个即将转正的实习生。

就在今天 ！！！ 我觉得我工作遇到了瓶颈！这是上班三个月以来遇到过的最大～挑战～

那就是...

我被我们不懂技术的老板拉去谈话了:

不懂技术的老板：你马上就要过实习了，给你安排个任务。

我：[乖巧跪坐] 好哒！请老大指示。

不懂技术的老板：我要你做个app ，还要做一个小程序，还要做h5，但是我不想招人了！！你去找一个框架看看能不能搞一下。

我： ... 我只是一个微不足道的小前端啊，我觉得我不行！

不懂技术的老板：我不要你觉得，我要我觉得，我不管，给你三个月时间，不管用什么技术。做出来给你转正、加薪哦～[俏皮眨眼]

我: ... [内心挣扎，区区金钱就可以打败我吗？] 好的，老大！我会努力的，老大～

不懂技术的老板：我看好你哦～出去把门带上，谢谢！！

基于技术人的尊严 ，我觉得我可以挑战一下，人嘛~还是要有梦想的，万一实现了呢？

有一位伟大的名人说过一句话：

困难虽然可怕，但它只是你成功路上的垫脚石 ------ 窝资基-朔德

那么，我是立志成为代码王的男人,岂会被这点小困难打到吗?不可能的。

困难虽然可怕，但它只是你成功路上的垫脚石

其实我感觉，一个事情最难的就是开头，俗话说的好，万事开头难。

那我把开头做好，后面不就轻松很多了吗？

小程序和 h5 我都有接触过，但是app 不是应该属于另一个领域了吗？前端还能做app ? 我这可是头一次听说啊 ！而且就算能做到，这么多个平台，我一个人要怎么搞？开个影分身之术？到底应该怎么办呢？

这时我不禁想起那个出差还没回来的 [头发很少,但是技术确实厉害] 的师傅说过:

“小白啊!遇到事情不要慌,百度一下你在刚!”

搜索开启你知识的大门

说干咱就干，我那个出差还没回来的 [头发很少,但是技术确实厉害] 的师傅还说过:

“小白啊！当你去搜索一个东西的时候，要学会关键字搜索，盲目的搜索，是找不到你要的答案的！”

终于到了检验学习成果的时候了，那么关键字是什么 ？现在回想一下我那个[不懂技术人却很好]的老板说过的话：

“我要你做个app ，还要做一个小程序，还要做h5，但是我不想招人了！！你去找一个框架看看能不能搞一下。”

阅读题干，我是不是可以分析出以下的几个关键字 ：

app、h5、小程序、框架、跨端

答案有了，那还等什么，赶紧打开百度验证真理吧！！！

经过缜密分析的我，果然搜索到了一些评测文章！！

随便点一个，进去看看，我丢 ~ 发现新大陆了哎 ，没想到世界上还有这么优秀的东西存在，这些跨端框架岂不是可以帮助我完成这个任务了吗 ？

但是，可但是，但可是 ，选择恐惧症犯了呀 ~ ，我选谁 ？uni-app ? taro?mpvue ...? 完全不懂呀... 真是“人生何处不相逢，就怕选择困难症” 。

但是我不能被吓倒，经过我再次缜密的分析（多读了几遍评测文档） ，我终于看到了希望。

• 如果你熟悉React，不懂Vue.js，推荐Taro；
• 如果你熟悉Vue.js，则推荐 uni-app；
• 如果你已经有H5代码，只想增加微信小程序平台，并且对性能要求不高，可以考虑kbone；
• 如果你的业务涉及多端，更推荐 uni-app；
• 如果你希望通过 serverless 方案快速上线业务，推荐 uni-app。

那我的目的是什么呢？新项目！多端！会vue.js （师傅教的）。那 uni-app 多票胜出了啊！

最后我不得不使出了大杀器 --- 出来吧！！微信好友系统～～

于是就这么愉快的决定了。 干巴爹~

uni-app 之迷

既然 [头发很少,但是技术确实厉害] 的师傅说让我选择 uni-app ,那就指定没错了。

接下来就是调研时间了，想要去了解一个新技术官方文档 肯定是必不可少的。

我需要了解的是什么 ？我觉得我应该从下面几点开始去了解它：

• uni-app 是什么？他能做什么？
• 他的特点是什么？
• 他的技术要求是什么？
• 用什么工具去开发？

带着疑问，我开始翻阅文档，找寻答案，挑战即将拉开序幕！！！

进入uni-app 的世界

打开官方的第一句话就解决了我第一个问题：

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

ok ，我大概知道 uni-app 是什么，无非就是可以使用前端技术开发一套代码，然后同时发布好多平台。从这一点，完全跟我的目的契合了啊！ 似乎更有动力了呢～

官网的下面给了好多二维码，说是扫码体验，我每个平台都去体验了一下，该说不说，效果确实不赖呢。

我还想要了解更多

现在我已经知道了 uni-app 是什么了，现在需要解决我的第二个问题： 他的特点是什么。

果然官方牛逼～，继续下翻。答案浮出水面！

咳咳～，总结一下：

uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势：

• 跨端数量更多
• 平台能力不受限
• 性能体验更优秀
• 周边生态丰富
• 学习成本低
• 开发成本低

想法或许有了，但是还需要有能力才能够去驾驭

我觉得这就是我想要的！ 如此优秀的框架，我能使用吗？毕竟我只是一个刚刚三个月的实习前端！

在继续翻阅中，我觉得我有点多虑了，技术要求竟然如此简单。

当初进入公司之后 ，[头发很少,但是技术确实厉害] 的师傅让我先去熟悉 vuejs和微信小程序果然派上了用场啊：

为了更好的跨端开发， 我还要遵守 uni-app 统一规范：

• 页面组件我们要遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近微信小程序规范
• 接口能力（JS API）靠近微信小程序规范
• 数据绑定及事件处理靠近 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

工欲善其事，必先利其器

对于uni-app 的初步了解，我觉得应该差不多了 ！ 现在只剩下最后一步了，我要用什么工具去开发呢 ？

隐约中我似乎看到一个叫做 HBuilderX 的东东：

HBuilderX内置相关环境，开箱即用，无需配置nodejs。 开始之前，开发者需先下载安装如下工具： HBuilderX：官方IDE下载地址 HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

同一个公司的产品，还做了特别强化，听起来很还不错啊。

工作总结

现在我的调研工作结束，基本上已经掌握了我想要的东西。

uni-app是什么？他的特点 ，我已经烂熟于心。

他的前置技能，恰巧我都略懂，开发工具看起来也棒的一批！

今天的任务结束，准备下班，明天开始写demo ！！

今天可真是元气满满的一天呀～

写在最后

准备用不同的风格，写一个系列的 uni-app 零基础教程

这篇是前导篇，之后会正式开始教程，争取事无巨细的把 uni-app 的大部分知识点讲明白。

不定期更新，且看小白如何从菜鸟成长为了熟练工～

可以不爱，请别伤害～ 么么哒。