uni-app和vue的具体区别
uni-app是逻辑和渲染分离的,渲染层在app端提供了两套排版引擎。小程序方式的webview渲染,和weex方式的原生渲染,两种渲染引擎可以自己根据需要选。vue文件走的webview渲染nvue走weex方式的原生渲染组件和js写法是一样的,css不一样,原生排版的能用的css必须是flex布局uni-app`的App端内置了一个基于weex改进的原生渲染引擎,提供了原生渲染能力。在App端
uni-app是逻辑和渲染分离的,渲染层在app端提供了两套排版引擎。
小程序方式的webview渲染,和weex方式的原生渲染,两种渲染引擎可以自己根据需要选。
vue文件走的webview渲染
nvue走weex方式的原生渲染
组件和js写法是一样的,css不一样,原生排版的能用的css必须是flex布局
uni-app`的App端内置了一个基于weex改进的原生渲染引擎,提供了原生渲染能力。在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面(native
vue的缩写),则使用原生渲染。一个App中可以同时使用两种页面,比如首页使用nvue,二级页使用vue页面,hello
uni-app示例就是如此。虽然nvue也可以多端编译,输出H5和小程序,但nvue的css写法受限,所以如果你不开发App,那么不需要使用nvue。
(1)组件/标签的变化
以前是html标签,现在是小程序标签。
具体来说:
- div改成view
- span、font改成text
- a改成navigator router-link
- img改成image
- input还在,但改成了confirmtype
- form、button、checkbox、radio、label、textarea、canvas、video这些都还在
- select改成picker
- iframe改成web-view
- ul、li没有了,都用view代替
- audio不再推荐使用,改成api方式,背景音频api文档其实老的HTML标签也可以在uni-app里面使用,uniapp编译器会在编译时把老的标签转为新标签,比如把div编译 成view.但不推荐这种方法,调试H5端时容易混乱。
**除了改动外,新增了一批手机端常用新组件**
- scroll-view 可视区域滚动视图容器
- swipe可滑动区域视图容器
- icont 图标
- rich-text富文本(不可执行js,但可以渲染各种文字格式和图片)
- progress 进度条
- slider 滑块指示容器
- switch 开关选择器
- camera相机
- live-player 直播
- map 地图
- cover-view 可覆盖原生组件的视图容器
cover需要多强调几句,uniapp的非h5端的video、map、canvas、textarea是原生组件,
层级高于其他组件。如需要覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件
除了内置组件,还有许多开源扩展组件,把常用 操作都进行封装,Dcloud建立了插件市场收录这些扩展组件。
(2)js
因为uniapp的api是参考小程序的,所以和浏览器的js api有很多不同,如
- alert,confirm改成uni.showmodel
- ajax改成uni.request
- cookie、session没有了,localstorage改成uni.storage
- uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改成uni.xxx即可
- uniapp在不同端,支持条件编译,无限制的使用各端独有的api
(3) uniapp自带路由和请求方式
vue:需要vue-router来实现路由跳转 数据请求方式:需要安装axios
uniapp:自带路由不需要使用vue-router 内置了uni.request请求方式
更多推荐
所有评论(0)