uni-app 从零开始

白话uni-app

https://uniapp.dcloud.net.cn/vernacular.html#

主要内容提炼 :

uni-app 是把 html 一些标签转换成了符合移动命名的一些标签,增加了一些移动特性的标签

div 改成 view
span、font 改成 text
a 改成 navigator
img 改成 image
...
scroll-view 可区域滚动视图容器

swiper 可滑动区域视图容器

icon 图标

rich-text 富文本

uni-app的各个端中,除了h5端,其他端的js都运行在一个独立的v8引擎下,不是在浏览器中,所以浏览器的对象无法使用

自动更新渲染

再传统的网页document.getElementById和传统的Android开发中findviewbyid ,都是拿到元素,操作元素属性来更新界面显示,而现在分离这种操作,
现在的做法,是vue的绑定模式,给这个dom元素绑定一个js变量,在script中修改js变量的值,dom会自动变化,页面会自动更新渲染。也是数据变化驱动页面展示渲染。flutter也是这种分离思想。

vue是自动双向数据绑定的。直接通过赋值方式修改数据,如果数据绑定到界面上,界面会自动更新渲染。

单位方面

px无法动态适应不同宽度的屏幕,rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位,推荐使用rpx,全端支持。

工程结构

每个可显示的页面,都必须在 pages.json 中注册。如果你开发过小程序,那么pages.json类似app.json。如果你熟悉vue,这里没有vue的路由,都是在pages.json里管理。

原来工程的首页一般是index.html或default.html,是在web server里配的。而uni-app的首页,是在pages.json里配的,page节点下第一个页面就是首页。一般在/pages/xx的目录下。

app和小程序中,为了提升体验,页面提供了原生的导航栏和底部tabbar,注意这些配置是在pages.json中做,而不是在vue页面里创建,但点击事件的监听在显示的vue页面中做。

如果你熟悉小程序开发的话,对比变化如下:

  • 原来app.json被一拆为二。页面管理,被挪入了uni-app的pages.json;非页面管理,挪入了manifest.json
  • 原来的app.js和app.wxss被合并到了app.vue中
多端比较

flutter、rn、uni-app比较

扫描二维码关注公众号,回复: 14900182 查看本文章

观点总结: 纯排版flutter, 原生多用原生,擅长react 用rn,其他用uni-app

猜你喜欢

转载自blog.csdn.net/aikongmeng/article/details/129008765
今日推荐