一、什么是uni-app
uni-app 是一个利用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,但是公布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快使用等大都个平台
uni-app在开发者数目、案例、跨端抹平渡过、扩大灵活性、性能体验、周边生态、学习本钱、开发本钱等8大要害指标上领有更强的优势
- 跨端数目更多
- 平台能力不受限
- 性能体验更良好
- 周边生态丰富
- 学习成本低
- 开发成本低
二、使用 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 的 request 恳求
有没有发现什么不一样的?对了,除了前缀 wx调换为uni之外,其他的地方一摸一样,是不是这样开发起来就很一贼了呢
App(ios、安卓)
uni-app 不仅可以应用绝大多数的小程序相干的 API,同时也可以利用 5+API 很好的补足了小程序上一些还没有实现的功效,是不是很美好?而且开发方法还是跟上述一样,没有变化,是不是更美好了呢
H5
h5 就不多说了,基本上跟常规 vue 开发没有什么区分, 唯一需要注意的是,有些 API 是不能在 h5 中应用,首要看文档,看文档,看文档 。