什么是基于vue.js开发所有前端应用的框架？

菏泽炫佑科技

什么是基于vue.js开发所有前端应用的框架？

它是一个用于开发所有基于vue.js的前端应用程序的框架。 通过编写一组代码，我们可以将其同时发布到多个平台。

功能框架：

多平台效果展示：

为什么需要它？

因为目前跨平台开发存在以下三个问题：

多终端泛滥：跨平台开发中间终端过多。 用户被更多的平台分散。 为了覆盖用户，企业会消耗大量的运营成本。 同时，开发者的学习成本也会变得非常高。 体验不好：跨平台框架的体验不好。 生态不够丰富：开发者很难获得更多更好的SDK。 优点？ 更跨平台：可以实现“一套代码，多终端分发”。 它还支持条件编译，您可以在代码中对不同平台的代码进行定制开发操作。 更好的运行体验：组件和API与微信小程序一致，兼容Weex原生渲染。 通用技术栈，学习成本低：采用Vue语法、微信小程序API、内嵌mpvue框架。 开放生态，组件更丰富：支持npm安装第三方包，支持微信小程序自定义组件和sdk，兼容mpvue组件和项目，App端支持原生混合编码，拥有自己的插件市场。基础开发软件

开发软件需要工具：，开发所需的环境已内置，无需配置node.js

单击工具栏中的文件->新建->项目：

选择uni-app类型，输入项目名称，选择模板，点击创建即可创建成功。

项目运行详情可参见官方文档：运行

项目结构

项目结构与普通Vue项目结构不同。 具体结构如下：

├─uniCloud            云空间目录，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb
├─components          uni-app的公用组件，遵从vue组件规范
│ └─comp-a.vue        可复用组件a
├─hybrid              App端存放本地html文件的目录
├─platforms           存放各平台专用页面的目录
├─pages               业务页面文件存放的目录
│ ├─index
│ │ └─index.vue       index页面
│ └─list
│ └─list.vue          list页面
├─static              静态资源文件夹，用于存放图片，视频（规定静态资源只能放在static下面）
├─uni_modules         存放[uni_module](/uni_modules)规范的插件
├─wxcomponents        存放小程序组件的目录
├─main.js             Vue初始化入口文件
├─App.vue             应用配置，用来配置App全局样式以及监听
├─manifest.json       配置应用名称、appid、logo、版本等打包信息
└─pages.json          配置页面路由、导航条、选项卡等页面类信息

注意事项：

技术栈储备的运行原理是逻辑层和视图层分离，非H5端通信被折衷。

uni-app运行在非H5端时，在架构上分为两部分：逻辑层和视图层。 逻辑层负责执行业务逻辑，即运行js代码，视图层负责页面渲染。 当在同一个vue页面中编写js和css时，它们在编译时就已经被拆分了。

逻辑层原理

逻辑层运行在独立的服务器中，不依赖于本地计算机，因此一方面没有浏览器兼容性问题，可以在.4上运行es6代码。 另一方面，它无法运行浏览器、、等服务器特定的js API。

它是一个标准的js引擎。 标准的js都可以正常运行，比如if、for、各种字符串、日期处理等，js和浏览器的区别要分清楚。

视图层详解

h5和小程序平台，还有app-vue，视图层就是。 app-nvue的视图层是基于weex修改的原生渲染视图。

关于，在iOS上，你只能使用iOS提供的（默认是）。 它存在一定的浏览器兼容性问题，并且根据 iOS 版本其性能略有不同。

网上的小程序大多都自带几十MB的包，但App端无法带这么大的第三方包，所以App端默认使用它。 不同手机此系统有所不同。 当然App端也支持使用腾讯X5引擎，视图层可以统一在端。

因此，uni-app的js对于不同的手机基本上没有兼容性问题（因为js引擎自带），而view层的css在app-vue上使用系统时会出现与手机浏览器的兼容性问题。 这时候要么不使用新的CSS语法，要么集成腾讯x5引擎。

逻辑层和视图层分离的优缺点

逻辑层和视图层分离的好处是js操作在渲染时不会卡顿。 *简单、*直接的感受就是：形态动画稳定。

新形式是在渲染自身的同时做入口动画，所以很容易卡在动画中。 但uni-app不需要编写预加载代码，新表单渲染速度快，动画稳定。

然而，两层的分离也带来了缺点。 两层之间的通信实际上是有损的。

iOS还可以，但在低端机器上，每次通信需要几十毫秒。 效果通常不明显，但在某些场景中效果很明显。

当连续高帧率绘制动画时，你会发现不如内部绘制那么流畅，视图层滚动，跟随手部操作，不断反馈给逻辑层。 然后JS处理逻辑，通知视图层进行相应的更新。这时候你会发现交互不跟手或者卡住了。

无论是小程序还是app，无论是app-vue还是app-nvue，总是存在两层通信丢失的问题。

案例选择评估对比数据研究问题uni-app现有成功案例

uni-app是当今的主流开发框架app开发什么是基于vue.js开发所有前端应用的框架？，拥有900万开发者。 据Uni统计，每月有10亿手机活跃用户。 华为、阿里巴巴、腾讯、字节跳动、美团、京东、快手、vivo都在使用。

跨终端功能会受到限制吗？

uni-app在跨平台的过程中，不牺牲平台特性，不限制平台能力的使用。

在应用开发中，90%的常规开发，如接口组件、网络等API，都被uni-app封装成可以跨多个终端的API。

针对各个终端的特殊功能，uni-app引入了条件编译。 不同平台的特性可以在一个项目中优雅地使用。 例如，微信小程序中不支持推送，但在App中可以使用。 App中也不可避免地涉及到很多原生SDK。 这些在uni-app框架下都可以正常使用。

移动用户体验

使用uni-app开发的微信小程序，因为对数据diff的智能处理，比大多数人写的原生小程序有更好的性能。 uni-app 打包成应用后，支持渲染和 weex 原生渲染两种引擎。

由于丰富的插件市场以及支持App端所有小程序SDK的使用，uni-app拥有了更大的应用生态系统。

使用uni-app开发小程序的优势

相比其他小程序框架或者原生小程序开发有更多优势：

uni-app不需要跟随微信升级，可以无限制地在条件编译中使用wx。 所有当前或未来的应用程序的性能都高于普通人手写的微信原生代码。 就像vue操作比普通人写js操作dom有更高的性能一样。 底层自动diff更新数据，比手动diff性能更高。 uni-app 是纯 Vue 语法，无需学习其他 DSL。 当开发不同的项目时，你不必转换你的想法。 Uni-app拥有非常丰富的组件和模板，插件市场上有数千种插件。 如富文本解析、图表、自定义下拉刷新等组件，uni-app版插件的性能超过了wx-等微信小程序组件。 比微信工具更强大，开发效率更高。 即使使用其他工具，因为这些工具对vue的支持比wxml更好，所以开发效果也会更高。 微信原生开发不支持很多功能、预编译语言、工程流程管理。 大公司很少用微信。 原生开发使用框架来提高开发效率。 uni-app支持双向数据绑定和vuex状态管理。 比原生开发小程序方便很多。 迟早会有多种需求。 使用uni-app，无后续之忧。 uni-app 不仅仅用于跨端应用。 也可用于小程序、H5应用、App。 uni-app项目升级与维护

uni-app是在基础项目下多端编写的，使用条件编译来管理差异。 升级时可以在多个终端上同时更新一组工程代码。 如果不同端的项目是分开的，那么维护和升级会很麻烦，而且同时升级也不方便。

uni-app学习成本和技术栈

简单来说，uni-app就是Vue的语法+小程序的API。 它遵循Vue.js语法规范，组件和API遵循微信小程序命名。 这些都属于通用技术栈，uni-app不需要太多额外的学习成本。 有一定Vue.js和微信小程序开发经验的开发者可以快速上手uni-app。 你不需要掌握Vue的全部，你只需要了解Vue的基本语法、 dom、数据绑定、组件和vuex。 不需要学习路由等其他东西，也不需要学习cli、node.js。

uni-app开发经验 uni-app支持*低手机版本

.4. iOS9官方保证兼容。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等