项目需求，最近看了一段时间，再次整理了一些与vue的异同，做了差异比较。

1. 成分/标签的变更

以前是html标签，现在是小程序标签。

p 改为查看

将跨度和字体更改为文本

改为

img 改为

它仍然存在，但 type 属性已更改为

形式，，，，，，，

这些仍然存在。

更改为

更改为网络视图

ul 和 li 消失了，取而代之的是 view。

不再建议使用，改为API方法，后台音频API文档

事实上，旧的HTML标签也可以在uni-app中使用。 uni-app编译器在编译时会将旧标签转换为新标签，例如p转换为view。但不推荐这种用法，因为在调试H5端时很容易造成混乱。

除了这些变化之外，还添加了一些手机上常用的新组件。

-view 区域滚动视图容器

滑动区域视图容器

图标 图标

rich-text 富文本（不能执行js，但可以渲染各种文本格式和图像）

进度条

滑块指示器

开关选择器

相机

现场直播

地图 地图

-view 可以覆盖原生组件的视图容器

-观点需要强调几句话。非h5端、map、uni-app都是原生组件，其级别比其他组件要高。如果需要覆盖原生组件，比如给地图添加遮罩，则需要使用-view组件。

除了内置组件之外，还有很多开源的扩展组件，封装了常用的操作。插件市场已经建立以包含这些扩展组件。详情请参见插件市场。

2.js的变化

js的变化分为三部分：运行环境的变化、数据绑定方式的变化、api的变化。

运行环境从浏览器变为v8引擎

支持标准js语法和API，如if、for等。

但是，特定于浏览器的对象（包括存储）仅在浏览器中可用，并且不受应用程序和小程序支持。

可能有人认为js就等于浏览器中的js。其实js是由组织管理的。浏览器中的js是w3c组织在js规范的基础上添加了 、 、 等特殊对象。

uni-app各端中，除了h5端外，其他端的js运行在独立的v8引擎下，而不是在浏览器中，因此无法使用浏览器对象。如果你曾经做过小程序开发，你应该对此非常了解。

这意味着它所依赖的很多HTML库都无法使用。

当然，应用程序和小程序都支持Web视图组件，可以加载标准HTML。此类页面仍然支持浏览器特定的对象、、、。

之前的DOM操作改为Vue的MVVM模式。

目前前端的趋势是去dom化，改用mvvm模式，这是一种更简洁的编写方式，大大减少代码行数，同时差分渲染性能更好。

uni-app使用vue的数据绑定方式来解决js与dom界面的交互问题。

如果你想改变某个DOM元素的显示内容，比如视图的显示文本：

以前都是给视图设置ID，然后在JS中通过选择器获取DOM元素，再通过JS进一步进行赋值操作，修改DOM元素的属性或者值。

如果你学过小程序的数据绑定但不懂Vue，请注意：

小程序的数据绑定参考了vue，不过我修改了一些。 uni-app中仅支持标准vue，不支持小程序的数据绑定语法。

小程序中的在uni-app中是不存在的，因为vue自动绑定了双向数据。直接通过赋值修改数据。如果数据绑定到界面，界面会自动更新渲染。

3.js api的变化

因为uni-app的API指的是小程序，所以和浏览器的JS API有很大不同，比如

，改为大学。

将 ajax 更改为 uni。

， 不再，。改为大学。

uni-app的js API很多，但基本上都是小程序的API。只需将 wx.xxx 更改为 uni.xxx 即可。

uni-app支持不同终端上的条件编译，可以不受限制地使用每个终端特有的API。

CSS 更改

基本支持标准css。

选择器有两处变化：不支持*选择器；元素选择器中没有body，改为page。微信小程序就是这样。

page{ }

单位方面，px不能动态适应不同宽度的屏幕，rem不能用于nvue/weex。如果要使用根据屏幕宽度自适应的单位，建议使用rpx，所有终端都支持。尺寸单位文档

uni-app推荐使用flex布局，默认为flex布局。这种布局思路与传统的流体布局略有不同。但flex的有趣之处在于，无论是什么技术，它都支持这种布局。 Web、小程序/快应用、weex/rn、原生iOS、开发都支持flex。它是满足所有需求的新一代布局解决方案。请自行百度学习相关教程。

uni-app的vue文件支持所有的web布局方式，无论是flow还是flex。但在nvue中，只支持flex，因为它是使用app端的原生布局引擎渲染的。

注意css中的背景图片和字体文件，尽量不要大于40k，因为会影响性能。小程序端，如果大于40k，需要在服务器端远程引用或者后期导入，不能作为独立文件在本地引用。

项目结构和页面管理

uni-app的工程结构有单独的要求

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

原来，项目的主页一般是.html或者.html，是在web中配置的。 uni-app的首页是在.json中配置的，page节点下的第一个页面就是首页。通常在目录//xx中。

在App和小程序中，为了提高体验，页面提供了原生的导航栏和底部。注意，这些配置是在.json中完成的，并不是在vue页面中创建的，但是对点击事件的监听是在显示的vue页面中完成的。 。

在Vue中，之前的js事件监听的概念已经改为生命周期的概念。

uni-app初始化完成时触发（全局仅触发一次）

uni-app启动时，或者从后台进入前台时，显示

当uni-app从前台进入后台时

uni-app报错时触发

–

–

监控nvue页面发送的数据

如果熟悉小程序开发的话，对比变化如下：

事实证明，app.json 被分成了两部分。页面管理已移至uni-app的.json中；非页面管理已移至 .json

原来的app.js和app.wxss被合并到app.vue中