跨端开发的痛点？Vue最流行的跨端框架之一-uni app

前言

今天，我们来谈谈前端必备技能——小程序开发。

从第一个微信小程序，到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序，再到最近发布的360小程序，开发者应该如何开发这么多套代码？

当业务需求同时呈现在不同端时，为不同端编写多组代码的成本显然非常高。此时，特别需要编写一组代码以适应多个终端的能力。

今天我们将介绍一个使用Vue的跨端框架--

uni-app框架简介

Uni-app是一个使用Vue的前端框架。js开发跨平台App。它可以编译到iOS、Android、H5以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）和其他平台。

Uni app在六个关键指标上具有强大的竞争优势，包括开发者数量、案例、跨端流畅度、扩展灵活性、性能体验、周边生态、学习成本和开发成本：

更多开发者/案例

跨端平滑性/扩展灵活性（通过条件编译，在不影响其他平台的情况下调用专有功能）

更好的性能体验（App支持web渲染，带来更流畅的用户体验。）

丰富的周边生态（推出，能够提供更多组件和模板，真正开箱即用）

低学习成本（+）

开发成本较低（不仅开发成本，招聘、管理和测试成本也大幅下降。）

尽管不同端的框架环境千变万化，无论是各种小程序、Weex、React Native、Flutter还是快速App，但它们始终基于MVVM架构设计思想。uniapp希望它不仅可以使用一组代码来完成所有的最终需求，并将相同的业务逻辑完成聚合到同一层系统，而且不会由于项目的一致抽象而导致可维护性差。

开发工具

通过可视化界面，内置了相关的环境，可以开箱即用。无需配置Nodejs。

开发语言

使用+进行开发。

数据绑定和事件处理与Vue相同。js规范，并补充App和页面的生命周期。

uni app帮助我们封装了几乎所有不同平台的applet API。只需将前缀替换为uni，以给出一个示例：

要在微信中发送请求：

wx.请求({

网址：“https://www.example.com/request“，//只是一个示例，不是真正的接口地址

成功：res=>{

控制台日志（res.data）；

}

});

在uni app中发送请求：

单一请求({

网址：“https://www.example.com/request“，//只是一个示例，不是真正的接口地址

成功：res=>{

控制台日志（res.data）；

}

});

你认为微信小程序容易理解吗？这无非是将wx前缀更改为uni。此外，uni。request是一个通用的ajax请求API，它最大限度地降低了开发人员的学习成本。

如何解决跨端兼容性问题

每个平台都有自己的特点，因此在某些情况下跨平台是不可能的。

uniApp提供了一种条件编译方法，可以在项目中优雅地实现平台个性化。

仅编译为微信小程序</view>

仅编译到App</view>

Nvue模式

在uni-app中，根据编译配置，您可以使用Weex组件或applet组件（即uni-aapp组件）。编写页面时，页面后缀为.nvue（本机vue的缩写）

uni appApp有一个内置的Weex渲染引擎，它提供了本机渲染功能，因此uniApp可以在App上表现得更好。

Nvue相当于为Weex补充了大量的uni-app组件和api，以及丰富的本地Plus API。js和本地插件。

官方ui库，uni ui

uni-ui是DCloud提供的一个跨端ui库。它是一个基于vue组件、flex布局和无dom的跨端ui库。

在web开发中，一些开发人员习惯于使用一个UI库来完成所有开发，但在uni app系统中，建议开发人员首先使用性能更高的基本组件，然后根据需要引入必要的扩展组件。GitHub地址：

看到这里你觉得特别吗？别担心。让我们来看看uni app的开发规范。

UniApp开发规范

为了实现多终端兼容性，考虑到编译速度、运行性能等因素，uni app