uni-app 入坑指南

如今使用 uni-app 来开发的人愈来愈多。是否是许多同窗，准备入坑 uni-app，却无从下手？文档内容太多，不知道怎么看？ 若是有此疑问， 那么我将带你从零开始入坑 uni-app。

快速了解 uni-app

什么是 uni-app

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

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

使用 uni-app 的前置条件

不要认为 uni-app 能够跨多端，就感受开发难度会直线上升。若是说，你开发太小程序，刚好又会 vue， 那么你的学习成本会很是的低。

若是你原生小程序与 vue 都没有接触过的话，我建议你花一些时间，看一看他们的官方文档。再回来学习 uni-app。

• 微信小程序
• VUE

开发 App 端的话，对于原生开发了解便可，不须要你有不少的原生开发经验。

为了更好的跨端开发， 参考 uni-app 统一规范：

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

开发工具

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

使用Vue.js

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

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

若是要开发小程序，咱们须要知道不一样平台下的小程序规范的 。规范了解以后，咱们开发起来就相对来讲比较简单一些。 uni-app 帮咱们把不一样平台的小程序 API 几乎都封装了 ，只须要将前缀替换为 uni 便可 举例说明：

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

wx.request({
    url: 'https://www.example.com/request', //仅为示例，并不是真实接口地址 
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

复制代码

咱们使用 uni-app 的 request 请求

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并不是真实接口地址 
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

复制代码

有没有发现什么不同的？因此除了前缀 wx 替换为uni以外，其余与原规范机会保持一致。uni-app 会最大程度的抹平不一样小程序平台之间的差别。

App（ios、安卓）

uni-app 在 App 端不只可使用绝大多数的小程序相关的 API，同时也可使用 5+API 很好的补足了小程序上一些尚未实现的功能。相关阅读

同时，App 端内置 weex 引擎，提供了原生渲染能力。让你 App 性能更好。相关阅读

H5

h5 基本上跟常规 vue 开发没有什么区别， 惟一须要注意的是，有些 API 是不能在 h5 中使用，注意文档中标注的平台差别说明。

如何实现跨端

虽然说是跨端，可是确定是有状况是不支持的，好比遇到有些平台特有的 API 怎么办 ？

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

条件编译

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

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

举个例子:

// #ifdef %PLATFORM%
平台特有的API实现
// #endif


// #ifndef H5
// 表示只有 h5 不使用这个 api
uni.createAnimation(OBJECT)
// #endif

复制代码

<!-- #ifdef %PLATFORM% -->
平台特有的组件
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<!-- 只在小程序中生效 -->
<view>我是微信小程序</view>
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<!-- 只在 app 中生效 -->
<view>我是 app </view>
<!-- #endif -->

复制代码

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
	color:red
}
/*  #endif  */

/*  #ifdef  APP-PLUS  */
/*  只在 app 中生效  */
.header {
	color:blue
}
<!--  #endif  */


复制代码

注意事项

• 非 H5 端，不能使用浏览器自带对象，好比 document、window、localstorage、cookie 等，更不能使用 jquery 等依赖这些浏览器对象的框架。由于各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发，uni 提供的 api 足够完成业务。
• uni-app 的 tag 同小程序的 tag，和 HTML 的 tag 不同，好比 div 要改为 view，span 要改为 text、a 要改为 navigator。

---

感谢您的观看，看到这里若是您以为没用，那么您大概浪费了2分钟的时间，对不起您，对您表示歉意。

您对于 uni-app 有任何疑问，欢迎评论回复，我看到的话，会第一时间回复你，感谢。

Tips ： 请理性对待，能够不喜欢，可是不要喷。问题能够讨论，可是对喷子零容忍。