uni-app入门基础教程（一）_来客推

一、什么是uni-app

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

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

二、使用 uni-app 的前置条件

好多小伙伴可能要问了:哇，一套代码可以编译到那么多平台，那是不是我学习起来很麻烦啊，我只会vue啊，不会小程序，也不会原生开发，能不能学会uni-app呢。

这个问题问的就很棒，那么如果要学会uni-app需要会那些技能呢？答：你如果会vue，基本上就可以解决大多数问题了。多读几遍文档，你会发现开发起来很顺畅。

但是为了更好的跨端开发，我们肯定是要统一规范的：

三、开发工具

使用官方推出的 HBuilderX 编辑器
可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置node 。

四、使用Vue.js

几乎全支持 Vue官方文档：模板语法
当然，说的是几乎，那肯定有不支持的情况下啊，下面给大家罗列一下不支持的情况：

五、小程序（微信、支付宝、百度、头条）

当然如果要开发小程序，不可避免的，我们肯定是要知道不同平台下的小程序规范的。当然知道了这些规范之后，我们开发起来就比较简单了。uni-app 给我们把不同平台的小程序 API 几乎都封装了，只需要将前缀替换为 uni 即可举例说明：

我们调用微信小程序的 request 请求

uni-app

我们使用 uni-app 的 request 请求

uni-app

有没有发现什么不一样的？对了，除了前缀 wx替换为uni之外，其他的地方一摸一样，是不是这样开发起来就很一贼了呢。

App（ios、安卓）

uni-app 不仅可以使用绝大多数的小程序相关的 API，同时也可以使用 5+API 很好的补足了小程序上一些还没有实现的功能，是不是很美好？而且开发方式还是跟上述一样，没有变化，是不是更美好了呢。

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

六、如何实现跨端

当然虽说是跨端，但是肯定是有情况是不支持的，比如遇到有些平台特有的 API 怎么办？

不用担心，这些问题 uni-app 都为你想到了那就是使用条件编译。

七、条件编译

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 / 注释 /、vue/nvue 模板里使用 **。

<来客推（www.laiketui.com）是国内知名商城系统及商城网站建设提供商，为企业级商家提供零售商城、B2B2C多用户商城系统、社区团购商城系统、微信分销系统、小程序商城、微分销系统等多端商城网站建设解决方案>

申明：本网站部分文章和图片来源网络编辑，如有侵权及时沟通删除，来客电商原创文章，转载请注明来源。

uni-app入门基础教程（一）