大前端敲门砖1-Uni的main.js入口文件

上期我们说到快速搭建Uni项目，并且结尾在main.js，这期就简单了解下，main.js与本项目的main.js配置。

脚手架或IDE生成的模板main.js只有这些，引用Vue，主页面App.vue（.vue文件被省略），下面几行就是渲染生成页面（或通过virtual dom）生成其他。

所谓virtual dom，没有想的那么高端，本质就是一个对象树，每个节点对象包含了一个显示对象（如果是生成网页版）的所有元素，与DOM很像，所以叫virtual dom，白话就是虚拟文档对象模型。

比如：{"文本":"", "类":"", "样式":"", "id":"", "href":"", "子节点": [], 等等等等}，然后通过原生api生成对应的原生组件。理论上来说，可以生成任何规则的组件。包括但不限于网页标签、移动端组件、小程序组件等等等等。对应方案为：Vue（及其衍生，当然React等也是），NativeScript、Weex、Uni等。你们所听说过的mpvue，也是魔改的Vue，将其生成其他组件。

这里注意下：像ionic与uni这些，App情况下，并非生成移动端原生组件，而是生成网页，然后移动端加载webview，显示一个网页而已（虽然Uni中有部分组件是原生的，但核心还是这样）。至于网页是如何调用原生设备api的，这个就是一整套协议问题。简单来说，iOS与Android都有在webview中点击链接或打开链接时候捕获到链接，然后判断是否允许打开的功能api，那么捕获到链接字符，这个就可以玩各种规则了，具体就是看协议怎么写。Uni遵循的是HTML5+协议，说是工信部认可，是实事，因为自导资源所以也是自嗨（没有贬义）。你有兴趣也可以自己写一套，姑且不说权威性，就原生几十万的api，就够你写个好几年的了，这还不算调兼容性……所以能用轮子就轮子吧，别自命比天高了。

回到Uni，main.js这里可以做很多事情，由于是入口文件，所以可以放置很多你的初始化配置，比如我这边配置如下：

之前评论区提过，Uni有bug，比如这里看到的components就没法全局Mixin混入，日了狗。

从上往下看顶部的引用模块，分别是：

常用工具，比如一些金额计算，小数点后有效数字等；

网络请求封装；

api接口地址；

BaaS相关数据库的类名（class是关键词，所以这里多一个s）；

本地储存的静态key；

dayjs，一个日期处理器，频繁使用就挂载全局了；

maskLabel，打算全局引入的组件，无奈有bug不行，只能页面内引用；

然后看挂载全局：

挂载工具；

挂载dayjs日期处理器；

挂载网络请求；

挂载api地址；

挂载BaaS类；

挂载本地储存key；

控制台提示代码是否压缩，防止线上使用为压缩代码，这里没啥用，因为IDE发布都压缩处理了；

$isPro是用来判断当前是否为生产环境，因为很多地方会用到区分；

$globalData用来储存全局数据，简单替代Vuex的部分数据通用部分。

最后就是混合了：

目前发现，除了Components无效外，其他都没啥大问题。至于混合的意思，就是通用代码了，没别的。

这里全局处理了分享小程序分享时候如果忘记带上标题，则使用默认标题；

全局函数（就是每个页面都有的函数），调用Loading，并且1秒后自动关掉。

至此，我们把main.js给梳理一遍，如果要展开，那得慢慢来，看似简单，每个挂载对象都是相当复杂的。后面一点一点来。核心就是你知道这个是入口文件，可以配置一些全局功能，也基本就这个用处。其他时候，打不上什么关系。

本期就到这里，下期我们从首个全局vue文件即App.vue说起，到第一个页面为止。遇到什么说什么，不以进度为目标，以全部说到为目标。

感兴趣或者有帮助的，还请关注。