在 uni-app 项目中，很多时候我们都需要一些全局统一样式的交互效果，比如 loading 及各种弹窗交互提示等。当然，大部分的项目我们都会使用 uni 自带 API 如：

uni.showLoading({title: '加载中',mask: true
});

这些 API 我们稍加封装就可以用的很 happy 了，如：

this.$loading('加载中', true)

但是实际上，有时候这个 loading 效果并不是我们想要的。除了 loading ，还有 toast 、model 。这些自带的交互效果编译到各端后的效果并不一样，显然这并不是我们想要的。而且即使是开发某一端，比如小程序。有时候我们也需要自定义这些交互效果。

比如 UI 设计的 loading 是一张 Gif 动图。产品希望 loading 开始结束时有淡入淡出效果。而且整个 App 所有的 loading 是统一的。当然更有时候除了loading，甚至toast 、model 等交互效果都是如此。

以 loading 举例。我们通常的做法是，在 components 文件夹中定义一个组件，在需要的地方调用。比如这里叫：custom-loading，同时在里面定义了 show/hide 方法：

<template><view v-if="isShow" class="custom-loading"><image src="../../loading.gif"></image></view>
</template><script>export default {data() {return {isShow: false};},methods: {show() {this.isShow = true},hide() {this.isShow = false}}}
</script><style lang="scss" scoped>.custom-loading {top: 0;left: 0;right: 0;bottom: 0;z-index: 2;display: flex;position: fixed;align-items: center;justify-content: center;image {width: 98px;height: 98rpx;}}
</style>

使用时只需要在 template 中声明：

<custom-loading ref="custom-loading" />

在需要的时候调用：

this.$refs['custom-loading'].show()

到这里，一切都没有问题。当然，聪明的你一定知道像这种使用频率比较高的组件。最好将其定义为全局组件，就可以省略组件内的 import 。但是在使用时，还是需要在 template 中声明：

<template><!-- ... --><custom-loading ref="custom-loading" /><!-- ... -->
</template>

那如果还有 custom-toast、custom-model 等，而且需要用到这些公共组件的页面会有很多。比如... 100多个。难道要在每个页面的 template 中都写上：

<custom-loading ref="custom-loading" />
<custom-toast ref="custom-toast" />
<custom-model ref="custom-model" />

很明显，这些代码是多次重复的。如果你不想敲，可以用 plop 帮你生成带有以上代码的 tamplate。但是在我看来，这些代码实际上并不需要出现在 template 中，但是最好还能实现其相应的功能。

简单的说，就是我没有在 template 中写：

<custom-loading ref="custom-loading" />

但是却能在 methods 中调用：

this.$refs['custom-loading'].show()

它不在那里，实际上它在那里。

amazing ？ 其实很简单。看标题你可能也猜到了：

custom-loading 组件实际是在 vue-template-compiler 的 compile 方法编译一个 template 前手动将 <custom-loading ref="custom-loading"/> 插入到 template 中。

好了，谜底已经揭晓，看看怎么使用吧，其实很简单。

如果你比较细心，在 vue-cli 文档中关于 webpakc 的配置中有这么一个例子：

// vue.config.js
module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {// 修改它的选项...return options})}
}

这里我们将 options 打印出来一睹真容：

没错，options 里面竟然有 vue-template-compiler 对象！！！

注意：这种情况只有在 uni-app 中才会发生。非 uni-app 项目的 options 没有这种情况

既然能拿到 compiler 对象。我们就可以在 vue-template-compiler 将 template 模板转换为 AST 树之前往 template 中加点料。而将 template 模板转换为 AST 树的执行者就是 compiler 对象中的 compile 方法。因此，只要重写 compile 方法。

其实这种事情，还是比较常见的。Vue 2.X 对数组类型的数据结构的监听就是用重新数组原型方法实现的。

有了思路，实现起来就很快了：

// vue.config.js
module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {const compile = options.compiler.compileoptions.compiler.compile = (template, ...args) => {if (args[0].resourcePath.match(/^pages/)) {template = template.replace(/[sS]+?<[dD]+?>/, _ => `${_}<custom-loading ref="custom-loading" />`)}return compile(template, ...args)}return options})}
}

好了。这样配置之后，所有页面的 template 中都无需写：<custom-loading ref="custom-loading"/> ，也可以通过 $ref 拿到。但是前提是要将 custom-loading 注册为全局组件或遵循 easycom 。

最后，你当然可以把调用 loading 的操作再次封装：

this.$refs['custom-loading'].show() // => this._$loading()

好了，这就是 vue-template-compiler 在 uniapp 中我个人的一次使用。个人觉得还是非常方便。当然关于 vue-loader 和 vue-template-compiler 的使用网上已经有很多文章了，这里就不展开了。最后，这里有一个我个人用 uniapp 写的小程序，里面已经用到了这种方式。源码在：https://github.com/yinchengnuo/templateWxappUniapp 欢迎 start