Vue 3源码深度解析之：`Vue`的`uni-app`：它如何将`Vue`编译成多端应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好！今天咱们来聊聊一个挺有意思的话题，那就是 Vue 3 源码深度解析之：Vue的uni-app，看看这玩意儿是怎么把 Vue 代码“变”成能在各种设备上跑的多端应用的。准备好了吗？咱们这就开始！

一、开场白：Vue 和 uni-app，一对好基友

各位观众老爷们，咱们写前端，谁还没用过 Vue 啊？简洁、高效、上手快，简直就是前端界的“瑞士军刀”。但是，光有 Vue 还不够啊，你想让你的 App 在 iOS、Android、微信小程序、H5 等等平台都能跑起来，一个个平台适配，那得掉多少头发啊！

这时候，uni-app 就跳出来了，它就像个“翻译器”，能把你的 Vue 代码翻译成各个平台能理解的“方言”。

二、uni-app 的核心思想：一次编写，多端运行

uni-app 的核心思想就是“一次编写，多端运行”。这句话听起来很美好，但实现起来可不容易。它主要靠的是：

编译器： 把 Vue 代码编译成各个平台的代码。
运行时： 提供一套统一的 API，让你的代码在各个平台都能正常运行。

三、编译器：魔法的起点

uni-app 的编译器是整个流程中最关键的部分，它负责把你的 Vue 代码转换成各个平台能识别的代码。这个过程大致可以分为以下几个步骤：

AST (Abstract Syntax Tree) 解析： 首先，编译器会把你的 Vue 代码解析成一个抽象语法树 (AST)。AST 就像一棵树，它把你的代码结构化地表示出来。
平台差异处理： 接下来，编译器会根据你选择的平台，对 AST 进行修改。比如，某些组件在不同平台上的实现方式不一样，编译器就会根据平台进行相应的转换。
代码生成： 最后，编译器会根据修改后的 AST，生成各个平台的代码。

为了让大家更直观地理解这个过程，咱们来看一个简单的例子：

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="handleClick">点击</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '你点击了按钮！'
      })
    }
  }
}
</script>

这段代码很简单，就是一个显示文本和一个按钮的页面。编译器会把这段代码转换成各个平台的代码，比如：

微信小程序：

<view>
  <text>{{message}}</text>
  <button bindtap="handleClick">点击</button>
</view>

Page({
  data: {
    message: 'Hello, uni-app!'
  },
  handleClick() {
    wx.showToast({
      title: '你点击了按钮！'
    })
  }
})

H5：

<div>
  <span>{{message}}</span>
  <button @click="handleClick">点击</button>
</div>

export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    }
  },
  methods: {
    handleClick() {
      alert('你点击了按钮！')
    }
  }
}

可以看到，编译器会根据平台的不同，把 Vue 的组件和 API 转换成对应的实现方式。

四、运行时：统一战线

光有编译器还不够，你还需要一套运行时来提供统一的 API。uni-app 的运行时主要做了以下几件事：

组件库： 提供一套统一的组件库，比如 <view>、<text>、<button> 等等。这些组件会在各个平台上被转换成对应的原生组件。
API 封装： 对各个平台的 API 进行封装，提供一套统一的 API，比如 uni.showToast、uni.request 等等。这样，你就可以用同一套 API 在各个平台上进行开发。
生命周期管理： 管理各个平台的生命周期，比如 onLoad、onShow、onHide 等等。

五、深入源码：揭秘 uni-app 的内部机制

光说理论不行，咱们得深入源码看看 uni-app 到底是怎么实现的。由于 uni-app 的源码比较复杂，咱们这里只挑一些关键的部分来分析。

1. 编译器核心：@dcloudio/vue-cli-plugin-uni

uni-app 的编译器核心是 @dcloudio/vue-cli-plugin-uni 这个 Vue CLI 插件。它主要负责以下几个任务：

配置 webpack： 配置 webpack，让它可以编译 Vue 代码，并生成各个平台的代码。
处理平台差异： 根据你选择的平台，对 webpack 的配置进行修改，比如添加不同的 loader 和插件。
生成 manifest.json： 生成 manifest.json 文件，这个文件包含了你的 App 的配置信息，比如 AppId、名称、图标等等。

咱们可以看一下这个插件的部分源码，了解一下它是如何处理平台差异的：

// @dcloudio/vue-cli-plugin-uni/index.js

module.exports = (api, options) => {
  api.chainWebpack(webpackConfig => {
    const platform = process.env.UNI_PLATFORM // 获取当前平台

    // 根据平台添加不同的 loader 和插件
    if (platform === 'mp-weixin') {
      webpackConfig.module
        .rule('vue')
          .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
              // 修改 vue-loader 的配置，使其支持微信小程序
              options.compilerOptions = {
                mp: true // 标记为微信小程序
              }
              return options
            })
    } else if (platform === 'h5') {
      // ...
    }
  })
}

这段代码展示了如何根据不同的平台，修改 vue-loader 的配置。vue-loader 是一个 webpack loader，它可以把 Vue 文件转换成 JavaScript 代码。通过修改 vue-loader 的配置，我们可以让它生成不同平台的代码。

2. 运行时核心：@dcloudio/uni-app-plus

uni-app 的运行时核心是 @dcloudio/uni-app-plus 这个库。它主要负责以下几个任务：

提供统一的 API： 提供一套统一的 API，比如 uni.showToast、uni.request 等等。
管理生命周期： 管理各个平台的生命周期，比如 onLoad、onShow、onHide 等等。
实现组件： 实现一些基础的组件，比如 <view>、<text>、<button> 等等。

咱们可以看一下这个库的部分源码，了解一下它是如何实现统一的 API 的：

// @dcloudio/uni-app-plus/src/helpers/api.js

export function showToast(options) {
  if (process.env.UNI_PLATFORM === 'mp-weixin') {
    wx.showToast(options)
  } else if (process.env.UNI_PLATFORM === 'h5') {
    alert(options.title)
  } else if (process.env.UNI_PLATFORM === 'app-plus') {
    plus.nativeUI.toast(options.title)
  }
}

这段代码展示了如何根据不同的平台，调用不同的 API 来实现 uni.showToast 这个方法。可以看到，uni-app 的运行时会根据当前平台，选择合适的 API 来执行。

六、uni-app 的优缺点

说了这么多，咱们也来总结一下 uni-app 的优缺点：

优点	缺点
一次编写，多端运行：节省开发时间和成本。	性能：在某些平台上，性能可能不如原生应用。
学习成本低：如果你已经熟悉 Vue，那么学习 uni-app 会非常容易。	平台差异：虽然 uni-app 尽可能地抹平了平台差异，但仍然有一些平台特性是无法统一的，需要针对不同的平台进行特殊处理。
生态丰富： uni-app 的生态非常丰富，有很多第三方组件和插件可以使用。	调试：在某些平台上，调试可能比较麻烦。
HBuilderX：官方提供的 HBuilderX IDE 提供了很多便捷的功能，比如代码提示、自动补全、一键打包等等。	更新滞后：对于一些新的平台特性，uni-app 的支持可能会滞后。

七、实战演练：用 uni-app 开发一个简单的 App

光说不练假把式，咱们来用 uni-app 开发一个简单的 App，让大家更直观地了解 uni-app 的开发流程。

创建项目：

vue create -p dcloudio/uni-preset-vue my-uni-app

选择模板：

选择一个你喜欢的模板，比如“Hello uni-app”。

运行项目：

npm run dev:mp-weixin # 运行微信小程序
npm run dev:h5 # 运行 H5

修改代码：

打开 pages/index/index.vue 文件，修改里面的代码。

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
    <button @click="handleClick">点击</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, uni-app!'
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '你点击了按钮！'
      })
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

这段代码很简单，就是一个显示 logo、文本和一个按钮的页面。你可以修改 title 的值，或者添加其他的组件，来定制你的 App。

打包发布：

使用 HBuilderX IDE，你可以很方便地把你的 App 打包成各个平台的安装包。

八、总结：uni-app 的未来

总的来说，uni-app 是一个非常优秀的跨平台开发框架。它简化了多端开发的流程，降低了开发成本。虽然它还有一些缺点，但随着 uni-app 的不断发展，相信这些缺点会逐渐被克服。

uni-app 的未来是光明的。随着越来越多的开发者加入 uni-app 的生态，相信 uni-app 会变得越来越强大，成为跨平台开发的首选框架。

九、Q&A 环节

好了，今天的分享就到这里。大家有什么问题可以提出来，咱们一起讨论讨论。

Q：uni-app 和 React Native 有什么区别？

A：uni-app 基于 Vue，React Native 基于 React。uni-app 的编译时转换更彻底，接近原生体验，而 React Native 更多依赖 JavaScript 桥接。
Q：uni-app 适合开发什么样的 App？

A：uni-app 适合开发轻量级的 App，比如电商 App、新闻 App、工具 App 等等。对于需要高性能的应用，可能需要考虑原生开发。
Q：uni-app 的学习曲线陡峭吗？

A：如果你已经熟悉 Vue，那么学习 uni-app 会非常容易。uni-app 的 API 和 Vue 的 API 非常相似，上手很快。

感谢大家的参与！希望今天的分享对大家有所帮助！

发表回复 取消回复

发表回复取消回复