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有很多不同,如

  1. ​ alert,confirm改成uni.showmodel
  2. ajax改成uni.request
  3. cookie、session没有了,localstorage改成uni.storage
  4. uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改成uni.xxx即可
  5. uniapp在不同端,支持条件编译,无限制的使用各端独有的api

(3) uniapp自带路由和请求方式

vue:需要vue-router来实现路由跳转 数据请求方式:需要安装axios

uniapp:自带路由不需要使用vue-router 内置了uni.request请求方式

Logo

前往低代码交流专区

更多推荐