uni-app的前世今生

夜千灯
4,307 阅读7分钟

1、什么是uni-app

uni-app是DCloud公司发布的一款前端开发框架，用于解决前端开发中的一些痛点。

痛在哪？

痛在前端平台太多。单单小程序就有微信小程序就有微信、支付宝、钉钉、百度、头条、QQ...等等等等。

t0126d069131edd8940.jpg

所以，uni-app来了。

我们通过使用uni-app框架可以仅仅编写一套代码即可以兼容发布到多个平台。多个平台是几个平台？具体地说，是（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）小程序、快应用、H5、Android App、iOS App，岂不爽哉？

当然，能实现类似的功能也不仅仅只有uni-app，比如京东的taro，但我还是更推荐uni-app，后面会展开说明。

2、uni-app的由来

在说uni-app之前，得先介绍一下它的上一代产品：5+App。5+App类似于现在的uni-app，只是远没有uni-app强大罢了，可以用它开发生成Android和iOS App以及H5应用，但是因为它是一个多页应用的框架，在单页应用的浪潮下，现在也是被放弃了，但它在uni-app的发展中无疑是重要的一环。

uni-app是在2018年的1月份发布的第一版，为什么是这个时间？那就不得不说小程序的由来了。我们都知道，小程序是微信在2017年正式上线，此后一发不可收拾，各个平台的小程序如雨后春笋冒了出来，直教人眼花缭乱，直教开发人肝肠寸断。

微信虽然是第一个发布小程序的平台，但这个概念其实早已有之。2013年，百度正式在百度世界大会上首先提出“轻应用”的概念；2015年，DCloud正式商用了自己的“小程序”，名为“流应用”，360手机助手就最早接入了流应用。

在2015年9月，DCloud推进微信团队开展小程序业务，但其没有接入联盟标准，而是订制了自己的标准。后来的事情大家都知道了，各家大厂推出小程序平台，部分接入了联盟标准，但有些还是制定自己的标准，标准不统一导致了开发者们开发的困境。所以DCloud通过uni-app这个框架来统一了各个平台的标准，并在2018年上线。

3、如何使用uni-app

总体来说，uni-app对开发者是很友好的，它是基于vue的语法，但是template是基于小程序的标准，另外在项目结构上也是比较类似于小程序的，对前端开发者来说，还是很容易上手的。 另外，开发uni-app需要搭配他们的编辑器HBuilderX，通过它可以方便做很多事，能大大提高开发效率。如下是创建一个uni-app标准项目的和项目目录的截图。

1629302102.png

1629302358(1).png

3.1 条件编译

我们说过，uni-app是可以进行多个平台兼容的，这里就需要在代码中根据不同平台的场景为我们代码进行条件编译。

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。写法是以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef 即 if defined，代表仅在某平台存在；#ifndef 即 if not defined，代表除了某平台均存在；%PLATFORM% 代表平台名称。如：

// #ifdef APP-PLUS
console.log("这是一段仅在APP中生效的代码")
// #endif
// #ifndef MP-ALIPAY
console.log("这是一段仅在支付宝小程序中不生效的代码")
// #endif

1629304743(1).png 注意，条件编译不仅仅只在js中生效，在html、css、甚至json文件中都生效，只是在不同场景下需要使用相对应的注释写法。另外，Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，需要通过调用 uni.getSystemInfo 来获取平台信息。

3.2 使用 HTML5+

HTML5+ 是什么？

HTML5+ 是 HTML5 产业联盟的一个规范。我们知道，我们手机上有这大强大的功能，而 js 的传统的调用方式在调用手机原生能力方面有点捉襟见肘，如：如管理运行环境，获取当前运行环境信息、与其它程序进行通讯等。

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

注意，小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

1629339161(1).png

3.3 使用 nvue

为什么 uni-app 不同于一般的 webapp，我们知道现在一般的 webapp 很难通过手机应用市场的审核，这是因为一般的 webapp 本质上是运行在浏览器环境的，在 app 环境中使用的体验很不好。uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。让我们的应用能够实现媲美原生 APP 的使用体验。

uni-app 有两种模式的页面。在 App 端，一种是以 .vue 结尾的 vue 页面，使用 vue 页面则使用 webview 渲染；还有一种是以 .nvue 结尾的 nvue 页面，即 native vue，使用的是原生渲染。我们可以在同一 APP 中的不同页面使用不同的页面模式，甚至可以在同一页面同时使用两种模式。

虽然 nvue 页面也可以多端编译，输出到小程序和 H5 端，但是因为 nvue 的部分 css 写法受限，比如页面布局只能使用 flex 布局，且 flex 布局的主轴方向默认是 column，导致开发者们会比较麻烦，所以，如果不开发 APP 端应用，或者对 APP 端应用的性能不那么关注，就不需要使用 nvue。

相较于 vue 页面，nvue 页面有着更好的表现，主要表现在性能方面和页面的流畅度，另外，nvue 页面的内置组件相较于 vue 页面增加了更多。

HBuilder X 3.1.0起，nvue 新增 render-whole属性，类型Boolean。

  • 设置render-whole="true"时，视图层将组件以及子组件的信息结构一次性和原生层通讯，通过整个节点的重绘提升了排版渲染性能。
  • 设置render-whole="false"时，视图层将以子节点一个接着一个和原生层通讯再重绘。总体的渲染时间可能更久。
<!-- 例 -->
<swiper :render-whole="true"></swiper>

3.4 宽屏适配方案

uni-app 的理念是以移动为先，主要是一套解决手机端各应用的解决方案，但有时候我们也难免也需要为我们的应用适配更大的设配。从uni-app 2.9起，提供了PC等宽屏的适配方案。

这里所说的宽屏适配与我们传统意义上的屏幕适配略有差异。

我们先来看下面这张图： 1629351379(1).png 如图可见，我们在正常手机上看到的视图就是中间的主 window，uni-app 在主 window 基础上，在左右上三个方向分别扩展了 leftWindow、rightWindow 和 topWindow，这三个窗口正常情况下不可见，需要在 pages.json 中进行配置，在设备宽度满足一定条件后进行显示或隐藏。另外，这三个窗口各自独立，切换页面支持在各自的 window 内刷新，而不是整屏刷新。

{
    "globalStyle": { },
    "topWindow": {
        "path": "responsive/top-window.vue", // 指定 topWindow 页面文件
        "style": {
            "height": "44px"
         }
    },
    "leftWindow": {
        "path": "responsive/left-window.vue", // 指定 leftWindow 页面文件
        "style": {
            "width": 300
        }
    },
    "rightWindow": {
        "path": "responsive/right-window.vue", // 指定 rightWindow 页面文件
        "style": {
            "width": "calc(100vw - 400px)" // 页面宽度
        },
        "matchMedia": {
            "minWidth": 768 //生效条件，当窗口宽度大于768px时显示
        }
    }
}
avatar
文章
阅读
粉丝