前言
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官方文档:模板语法
固然,说的是险些,那一定有不支持的情形下啊, 下面给人人枚举一下不支持的情形 :
不支持纯HTML
不支持部门庞大的 JavaScript 渲染表达式
不支持过滤器
五、小程序(微信、支付宝、百度、头条)
固然若是要开发小程序,不可避免的,我们一定是要知道差别平台下的小程序规范的 。固然知道了这些规范之后,我们开发起来就比较简朴了。uni-app 给我们把差别平台的小程序 API 险些都封装了 ,只需要将前缀替换为 uni 即可 举例说明:
我们挪用微信小程序的 request 请求
多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序
多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序
我们使用 uni-app 的 request 请求
有没有发现什么不一样的?对了,除了前缀 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 模板里使用 ****。
举个例子:
多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序
多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序
多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序
多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序
是不是感受很利便 ?这样就可以很巧妙的去区分差别的平台了,详细的请详细看文档,看文档,看文档 。
十、注重事项
非 H5 端,不能使用浏览器自带工具,好比 document、window、localstorage、cookie 等,更不能使用 jquery 等依赖这些浏览器工具的框架。由于各家小程序快应用都不支持这些工具。没有这些浏览器自带工具并不影响营业开发,uni 提供的 api 足够完成营业。
uni-app 的 tag 同小程序的 tag,和 HTML 的 tag 不一样,好比 div 要改成 view,span 要改成 text、a 要改成 navigator。
以上,所有内容(除了我自己说的话以外)都来自 uni-app官方文档,请注重多看文档,多看文档,多看文档。
最后
小编是一个有着5年工作经验的前端工程师,关于web前端有一个完整学习web前端的门路,学习材料和工具。需要的同伴可以私信我,发送“前端”就可以获取领取地址,免费送给人人。对于学习web前端有任何问题(学习方法,学习效率,若何就业)都可以问我。希望你也能凭自己的起劲,成为下一个优异的程序员!