uni

2024-06-10 05:37| 来源: 网络整理| 查看: 265

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.showmodelajax改成uni.requestcookie、session没有了，localstorage改成uni.storageuni-app的js api还有很多，但基本就是小程序的api,把wx.xxx改成uni.xxx即可uniapp在不同端,支持条件编译，无限制的使用各端独有的api

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

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

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

【本文地址】

uni

uni

今日新闻

推荐新闻