uni-app 入坑指南

96
meHaoTian
1.6 2019.02.19 19:32* 字数 1325

现在使用 uni-app 来开发的人越来越多。是不是许多同学,准备入坑 uni-app,却无从下手?文档内容太多,不知道怎么看? 如果有此疑问, 那么我将带你从零开始入坑 uni-app

快速了解 uni-app

什么是 uni-app

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

使用 uni-app 的前置条件

不要认为 uni-app 可以跨多端,就感觉开发难度会直线上升。如果说,你开发过小程序,恰好又会 vue, 那么你的学习成本会非常的低。

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

开发 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-apprequest 请求

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-appApp 端不仅可以使用绝大多数的小程序相关的 API,同时也可以使用 5+API 很好的补足了小程序上一些还没有实现的功能。相关阅读

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

H5

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

如何实现跨端

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

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

条件编译

详细文档点我
C 语言中,通过 #ifdef#ifndef 的方式,为 windowsmac 等不同 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 端,不能使用浏览器自带对象,比如 documentwindowlocalstoragecookie 等,更不能使用 jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发,uni 提供的 api 足够完成业务。
  • uni-apptag 同小程序的 tag,和 HTMLtag 不一样,比如 div 要改成 viewspan 要改成 texta 要改成 navigator



感谢您的观看,看到这里如果您觉得没用,那么您大概浪费了2分钟的时间,对不起您,对您表示歉意。

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

Tips : 请理性对待,可以不喜欢,但是不要喷。问题可以讨论,但是对喷子零容忍。

uni-app