介绍一个小程序预处理器

前言

用过原生，用过 wepy，用过 mp-vue，但是都不是非常满意，原生的痛点是文件太多，wepy 和 mp-vue 的问题见 mpvue和wepy问题总结，最后不得不和同事一起做了一个超轻量的小程序单文件解析器 mp-parser，在贴合原生语法的同时解决掉文件太多的痛点。并配套研发了脚手架 mp-parser-cli ，提供了很多通用能力比如字体压缩、代码压缩、通用组件、http & cookie 封装等。

单文件形式

mp-parser 的核心就是单文件解析以及热更新，下面为一个语法示例（demo.vue），标签内的所有语法皆为原生语法。

    {
        usingComponents: {}
    }

通用能力

mp-parser 脚手架提供了非常多的通用能力，详细文档见 github地址。

http 请求

将 http 请求 promise 化，简化了请求语法，且会自动携带 cookie

Page({
    onLoad() {
        // get
        this.$http.get('url', {params: ''}).then((res) => {}).catch((err) => {});

        // post
        this.$http.post('url', {params: ''}).then((res) => {}).catch((err) => {});
    }
})

通用组件

我们提供了非常多的通用组件，比如常用有

• 自定义导航栏 navigation
• 拖拽卡片 drag-card
• 倒计时 count-down
• 省略文本 ellipsis-text
• 吸底输入框 fixed-inputter
• 图片裁剪器 image-cropper
• 范围选择器 range-slider
• 全屏录像 video-recorder
• 左滑删除 sideslipping

通用弹窗

Page({
    onLoad() {
        // { title, needHideLoading }
        this.$showSuccess('操作成功', false);

        // { title, content, needHideLoading}
        this.$showError('操作失败', '操作失败，请稍后重试', false);

        this.$showLoading('数据加载中...');
        this.$hideLoading();
    }
})

字体压缩

字体配置完后执行以下命令，具体配置教程见 字体压缩配置教程

npm run fontCompression

安装使用

# 安装脚手架
npm install -g mp-parser-cli

# 新建项目
mp-parser-cli-init 

# 安装依赖
cd 
npm install

# 运行
npm run dev

# 打开开发者工具，选择dist目录，查看效果

补一下各库的核心实现方案

小程序压缩工具 wx-minifier

• 参考 html-minifier 的思路，做了一个适合小程序的 wxml-minifier，核心思路：解析文档流，处理标签、属性，移除注释、多余空格、换行等。

• 基于 cssnano，替换了少部分不适用的逻辑，用来压缩 wxss 代码。

• 使用 uglify-es 压缩 js 代码

小程序脚手架 mp-parser-cli

• 通过 commander 解读命令行
• 通过 download-git-repo 拉取 github 模板仓库到本地

小程序模板仓库 mp-parser-template

• 封装通用能力、通用弹窗、工具方法、通用组件等

小程序预处理器 mp-parser

• 使用 vue-template-compiler 解析单文件
• 使用 node-sass 解析 sass 内容
• 使用 chokidar 监听文件变化，动态解析变动文件、处理静态资源