介绍一个小程序预处理器

前言

用过原生，用过 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目录，查看效果