uni-app 从零开始
Posted aikongmeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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, 原生多用原生，擅长react 用rn,其他用uni-app
以上是关于uni-app 从零开始的主要内容，如果未能解决你的问题，请参考以下文章