uni-app 入坑指南
hello 小伙伴们,现在我已经正式入坑
uni-app
了。uni-app
已经发布大概八个月了,期间也是踩坑无数,但是官方秉承着不抛弃不放弃的精神,积极解决开发者的各种简单的、复杂的问题,在此表示感谢。 我想还有小伙伴正在持观望状态,还没想好要不要使用uni-app
,而且近些日子以来,许多跨端框架也纷纷出现在了大家的视线当中,让迷茫的我们更加不知道如何对比选择了。所以本人不才,写了一篇uni-app
入坑指南,方便大家更好的了解uni-app
本篇只讲述uni-app
,不与其他类似框架进行对比
什么是 uni-app
uni-app
是一个使用Vue.js
开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS
、Android
、H5
、小程序等多个平台。 详情点击 uni-app 官方文档uni-app
在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。
- 跨端数量更多
- 平台能力不受限
- 性能体验更优秀
- 周边生态丰富
- 学习成本低
- 开发成本低
使用 uni-app 的前置条件
好多小伙伴可能要问了:哇,一套代码可以编译到那么多平台,那是不是我学习起来很麻烦啊,我只会vue
啊,不会小程序,也不会原生开发,能不能学会uni-app
呢。
这个问题问的就很棒,那么如果要学会uni-app
需要会那些技能呢?答:你如果会vue
,基本上就可以解决大多数问题了。 多读几遍文档,你会发现开发起来很顺畅 。
但是为了更好的跨端开发,我们肯定是要统一规范的:
- 页面组件我们要遵循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
之外,其他的地方一摸一样,是不是这样开发起来就很一贼了呢 。
App(ios、安卓)
uni-app
不仅可以使用绝大多数的小程序相关的 API
,同时也可以使用 5+API
很好的补足了小程序上一些还没有实现的功能,是不是很美好?而且开发方式还是跟上述一样,没有变化,是不是更美好了呢。
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
。
以上,所有内容(除了我自己说的话以外)都来自 [uni-app官方文档](https://uniapp.dcloud.io/README),请注意多看文档,多看文档,多看文档。
ok,到这里入坑基本完毕。下篇开始,讲述如何使用 uni-app
从零开始开发一个完整的音乐应用,敬请期待(其实我正在准备,还没开始写呢,预计一两个月写完,虽然答应一些小伙伴几个月以前就要出来的[手动捂脸])
感谢您的观看,看到这里如果您觉得没用,那么您大概浪费了2分钟的时间,对不起您,对您表示歉意。