前言

用過原生，用過 wepy，用過 mp-vue，但是都不是非常滿意，原生的痛點是文件太多，wepy 和 mp-vue 的問題見 mpvue和wepy問題總結(jié)，最后不得不和同事一起做了一個超輕量的小程序單文件解析器 mp-parser，在貼合原生語法的同時解決掉文件太多的痛點。并配套研發(fā)了腳手架 mp-parser-cli ，提供了很多通用能力比如字體壓縮、代碼壓縮、通用組件、http & cookie 封裝等。

單文件形式

mp-parser 的核心就是單文件解析以及熱更新，下面為一個語法示例（demo.vue），標(biāo)簽內(nèi)的所有語法皆為原生語法。

<!-- config 標(biāo)簽下的內(nèi)容會被解析到 .json 文件中 -->
<config>
    {
        usingComponents: {}
    }
</config>

<!-- template 標(biāo)簽下的內(nèi)容會被解析到 .wxml 文件中 -->
<template>
     <navigation title="自定義導(dǎo)航欄"></navigation>
</template>

<!-- script 標(biāo)簽下的內(nèi)容會被解析到 .js 文件中 -->
<script>
Page({})
</script>

<!-- style 標(biāo)簽下的內(nèi)容會被解析到 .wxss 文件中，支持 sass 語法 -->
<style lang="scss">
</style>

通用能力

mp-parser 腳手架提供了非常多的通用能力，詳細(xì)文檔見 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) => {});
    }
})

通用組件

我們提供了非常多的通用組件，比如常用有

• 自定義導(dǎo)航欄 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('數(shù)據(jù)加載中...');
        this.$hideLoading();
    }
})

字體壓縮

字體配置完后執(zhí)行以下命令，具體配置教程見 字體壓縮配置教程

npm run fontCompression

安裝使用

# 安裝腳手架
npm install -g mp-parser-cli

# 新建項目
mp-parser-cli-init <project_name>

# 安裝依賴
cd <project_name>
npm install

# 運行
npm run dev

# 打開開發(fā)者工具，選擇dist目錄，查看效果

補一下各庫的核心實現(xiàn)方案

小程序壓縮工具 wx-minifier

• 參考 html-minifier 的思路，做了一個適合小程序的 wxml-minifier，核心思路：解析文檔流，處理標(biāo)簽、屬性，移除注釋、多余空格、換行等。

• 基于 cssnano，替換了少部分不適用的邏輯，用來壓縮 wxss 代碼。

• 使用 uglify-es 壓縮 js 代碼

小程序腳手架 mp-parser-cli

• 通過 commander 解讀命令行
• 通過 download-git-repo 拉取 github 模板倉庫到本地

小程序模板倉庫 mp-parser-template

• 封裝通用能力、通用彈窗、工具方法、通用組件等

小程序預(yù)處理器 mp-parser

• 使用 vue-template-compiler 解析單文件
• 使用 node-sass 解析 sass 內(nèi)容
• 使用 chokidar 監(jiān)聽文件變化，動態(tài)解析變動文件、處理靜態(tài)資源