前言

朋友们，现在我已经正式加入uni-app了。 uni-app已经发布几个月了，这期间遇到的坑无数。但官方公司秉持着永不放弃的精神，积极解决开发者的各种简单和复杂的问题。我们谨表达我们的谢意。我想还有一些朋友在观望，还没有决定是否使用uni-app。另外，最近几天，很多跨端框架也出现在了大家的视线中，让我们更加迷茫，不知道该怎么办。已选择对比。 uni-app入门指南，帮助大家更好的了解uni-app。本文仅介绍uni-app，不与其他类似框架进行比较。

1.什么是uni-app

uni-app是一个使用Vue.js开发跨平台应用程序的前端框架。开发者编写一套可以编译到iOS、H5、小程序等多个平台的代码。详情请点击uni-app官方文档。 uni-app在跨终端数量、可扩展性、性能体验、周边生态、学习成本、开发成本等六大关键指标上具有较强的竞争优势。

2. 使用uni-app的前提条件

很多朋友可能要问：哇，一套代码可以编译到这么多平台。我学习起来会不会很麻烦？我只会Vue，不会小程序，也不会原生开发。我可以学吗？那么uni-app呢？

这是一个很好的问题，那么学习uni-app需要哪些技能呢？答：如果你会vue，基本上就可以解决大部分问题了。多读几遍文档，你会发现开发很顺利。

但为了更好的跨端开发，我们必须统一和规范：

3. 开发工具

使用官方编辑器

可视化方法比较简单。内置相关环境，无需配置node即可开箱使用。

4.使用Vue.js

几乎完全支持Vue官方文档：模板语法

当然，我说差不多，肯定有不支持的情况。以下是不支持的情况列表：

5.小程序（微信、支付宝、百度、今日头条）

当然，如果我们想要开发小程序，就不可避免地要了解不同平台下小程序的规范。当然，了解了这些规范之后，我们开发起来就会相对简单一些。 uni-app为我们封装了几乎所有不同平台的小程序API。只需要将前缀替换为uni即可，举个例子：

我们请求调用微信小程序

多端开发框架uni-app入门指南，一套适合微信、今日头条等小程序的代码

多端开发框架uni-app入门指南，一套适合微信、今日头条等小程序的代码

我们使用uni-app的请求

你注意到什么不同了吗？对了，除了前缀wx换成uni之外，其他地方都一模一样。这样发展不是很混乱吗？

6. 应用程序（ios、安卓）

uni-app不仅可以使用大部分小程序相关的API，还可以使用5+个API，可以完美补充一些小程序尚未实现的功能。是不是很美妙？而且开发方式还是和上面一样，没有任何变化，不是更好吗？

7.H5

h5我就不多说了。基本上和常规的vue开发没有什么区别。唯一需要注意的是，有些API不能在h5中使用。主要需要阅读文档。

8.如何实现跨终端

当然，虽然是跨终端，但肯定存在不支持的情况。例如，如果遇到一些特定于平台的API我该怎么办？

别担心，uni-app已经为你想到了这一切，那就是使用条件编译。

9. 条件编译

（具体参见文档）在C语言中，通过#和#为Mac、Mac等不同操作系统编译出不同的代码。参考这个思想，uni-app为uni-app提供了条件编译手段，在项目中显得很优雅。完成平台个性化实施。

条件编译是通过注释来实现的。不同语法中的注释写法不同。 js使用//注释，css使用/注释/，vue/nvue模板使用****。

例如：

多端开发框架uni-app入门指南，一套适合微信、今日头条等小程序的代码

多端开发框架uni-app入门指南，一套适合微信、今日头条等小程序的代码

多端开发框架uni-app入门指南，一套适合微信、今日头条等小程序的代码

多端开发框架uni-app入门指南，一套适合微信、今日头条等小程序的代码

是不是感觉非常方便呢？这样就可以非常巧妙的区分不同的平台。详情请阅读文档、文档、文档。

十、注意事项

以上所有内容（除了我自己的话）均来自uni-app官方文档。请注意多看文档、多看文档、多看文档。

终于

编辑是一位拥有5年工作经验的前端工程师。关于Web前端，他有完整的学习Web前端的路线、学习资料和工具。有需要的伙伴可以私信我，发“前端”获取领取地址，免费送给大家。如果你有任何学习Web前端的问题（学习方法、学习效率、如何就业）都可以问我。希望你也能通过自己的努力成为下一个优秀的程序员！