uni-app
传统的h5只有一端，就是浏览器。但是uni-app可以横跨7端，虽然它还是前端，但与传统的h5有明显的区别。
网络模型的变化
以前的大多数网络都是b / s，并且服务器代码在页面中混合使用。现在，C / S的前端和后端分离了，通过js，api（uni。与ajax类似）获取json数据，并将数据绑定到呈现接口。
文件类型更改
之前是.html文件，现在是.vue文件。
文件中代码结构的更改
它曾经是一个很大的html节点，其中包含and节点。
现在是一个第一级节点，用于编写标签组件。总和是一个并排的一级节点，即有三个一级节点。
<template> <view> 注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。 </view> </template> <script> export default { } </script> <style> </style>
引用外部文件的方法已更改
过去，外部js和CSS是通过src，link，href引入的。
type="text/javascript"> "css/bootstrap.css" rel="stylesheet" type="text/css"/>
现在它是用es6编写的，引入外部js模块（请注意它不是文件）或CSS
js将会进入并成为对象。
uni-app目录中有一个工具类util.js，您可以在uni-app中搜索此示例以进行查看。
<script> var util = require('../../../common/util.js'); //require这个js模块 var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法 </script>
在此util.js中，先前的方法必须封装为一个对象。
function formatTime(time) { return time;//这里没写逻辑 } module.exports = { formatTime: formatTime }
还有一些更高级的用法
var dateUtils = require('../../../common/util.js').dateUtils; //直接使用js模块的属性。在hello uni-app有示例 import * as echarts from '/components/echarts/echarts.simple.min.js'; //将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
css外部文件导入
<style> @import "./common/uni.css"; .uni-hello-text{ color:#7A7E83; } </style>
全局样式写在根目录下的app.vue中，并且每个页面都会将样式加载到app.vue中。
此外，Vue支持组件导入，这使得封装包括接口，js和样式的库变得更加容易。
以下内容是导入带有角标记的组件库，页面上显示abc，并且在右上角有一个数字角标记1。
<template> <view> <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件--> </view> </template> <script> import uniBadge from "../../../components/uni-badge.vue";//1.导入组件 export default { data() { return { } }, components: { uniBadge //2.注册组件 } } </script>
如果您需要全局引入vue组件，也就是说，每个页面都可以直接使用而无需引用或注册，则可以在项目根目录下的main.js中对其进行处理。以下是uni-app中的示例。
//main.js
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用 组件。
组件/标签更改
它曾经是一个html标签，现在它是一个小程序组件。
特别是：
除了所做的更改外，还添加了许多手机上常用的新组件
除了内置组件之外，还有许多开源扩展组件，它们封装了常见的操作，并建立了一个包含这些扩展组件的插件市场。
JS中的更改
js的变化分为三个部分：操作环境的变化，数据绑定模式的变化和api的变化。
操作环境从浏览器更改为v8引擎
支持标准的js语法和api，例如if等。
但是，仅包含在浏览器中的对象等对象的特定于浏览器的存储，而应用程序和小应用程序均不支持。
有些人可能认为js等于浏览器中的js。实际上，js是组织和管理的，浏览器中的js是w3c组织根据js规范补充的特殊对象。
在uni-app的每一端（h5端除外），另一端的js在独立的v8引擎下运行，而不是在浏览器中运行，因此无法使用浏览器的对象。如果您已经完成了小程序开发，则应该对此有所了解。
这意味着例如不能使用许多依赖于HTML的库。
当然，应用程序和小应用程序都支持可加载标准html的网络视图组件。这种页面仍支持特定于浏览器的对象。
之前的dom操作已更改为vue的MVVM模式
当前的前端趋势是去代理化，切换到mvvm模式，编写更加简洁，并大大减少了代码行数。同时，差分渲染性能更好。
uni-app使用vue的数据绑定方法来解决js与dom接口之间的交互问题。
如果要更改某个dom元素的显示内容，例如视图的显示文本。
过去，将id设置为视图，然后通过js中的选择器获得dom元素，然后通过js执行分配操作以修改dom元素的属性或值。
下面的代码演示了一段代码。页面上显示一个文本区域和一个按钮。单击按钮后，将修改文本区域的值。
<html> <head> <script type="text/javascript"> document.addEventListener("DOMContentLoaded",function () { document.getElementById("spana").innerText="456" }) function changetextvalue () { document.getElementById("spana").innerText="789" } </script> </head> <body> <span id="spana">123</span> <button type="button" onclick="changetextvalue()">修改为789</button> </body> </html>
当前做法是vue的绑定模式，将js变量保存到此dom元素，在其中修改js变量的值，dom会自动更改，页面将自动更新渲染
<template> <view> <text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 --> <button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 --> </view> </template> <script> export default { data() { return { textvalue:"123", buttontype:"primary" }; }, onLoad() { this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456 }, methods: { changetextvalue() { this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789 } } } </script>
如果您已经了解了小程序的数据绑定，但是不了解vue，则应注意：
由于uni-app的api引用了，因此它与浏览器的js api完全不同。
1、，更改为uni。
2、 ajax更改为uni。
3、，仅此而已。更改为uni。
uni-app的js API有很多，但是小应用程序的api基本上可以从wx.xxx更改为uni.xxx。
Uni-app支持在不同终端上进行条件编译，并且无限制地使用每个终端的唯一api。
css中的更改
基本支持标准CSS。
浏览器有两个更改*选择器不支持；选择器不支持。元素选择器中没有任何正文，并且将其更改为页面。微信小程序也是如此。
page{ }
就单位而言，px无法动态适应不同宽度的屏幕，并且rem不能在nvue / weex中使用。如果要使用适合屏幕宽度的单位，建议使用完全支持的rpx。
Uni-app建议使用弹性版式，默认值为弹性版式。这种布局思想与传统的流程布局有些不同。但是关于flex的有趣的事情是，无论它是什么技术，它都支持这种类型的布局，web， / 应用程序，weex / rn，本机iOS，开发，均支持flex。这是一个涵盖所有方面的新一代布局计划。请自己了解有关百度的相关教程。
uni-app的vue文件支持所有Web排版方法，无论是流式还是Flex。但是在nvue中，仅支持flex，因为它是由应用程序方面的本机排版引擎呈现的。
请注意，背景图像和字体文件不应大于40k。会影响性能。如果必须大于40k，则需要对其进行远程引用或稍后将其导入服务器端，并且不能作为独立文件在本地进行引用。在小型程序中，小于40k的文件无法在CSS中引用。 uni-app编译器在编译时会自动处理文件，并将小于40k的文件编译为方法。
项目结构和页面管理
uni-app的工程结构有不同的要求
每个可显示页面必须在.json中注册。如果您开发了一个小程序，则.json与app.json相似。如果您熟悉vue，则此处没有vue路由，所有路由都在.json中进行管理。
原始项目的主页通常是.html或.html小程序开发h5好还是vue好，它们是在Web上配置的。 uni-app的主页是在.json中配置的，页面节点下的第一页是主页。通常在// xx目录中。
在应用程序和小程序中，为了改善体验，该页面提供了本机导航栏和底部。请注意，这些配置是在.json中完成的，而不是在vue页面中创建的，但是事件监视位于页面中显示的vue Do中。
在Vue中，以前的js事件监视概念已更改为生命周期概念。有关详细信息，请参见单应用程序生命周期
如果您熟悉小型程序开发，则比较更改如下：