介绍一个小程序预处理器

前言

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

单文件形式

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

<!-- config 标签下的内容会被解析到 .json 文件中 -->
<config>
  {
    usingComponents: {}
  }
</config>

<!-- template 标签下的内容会被解析到 .wxml 文件中 -->
<template>
  <navigation title="自定义导航栏"></navigation>
</template>

<!-- script 标签下的内容会被解析到 .js 文件中 -->
<script> Page({}) </script>

<!-- style 标签下的内容会被解析到 .wxss 文件中，支持 sass 语法 -->
<style lang="scss"> </style>
复制代码

通用能力

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 <project_name>

# 安装依赖
cd <project_name>
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 监听文件变化，动态解析变更文件、处理静态资源