preface

I have used native, WEpy and MP-vue, but I am not very satisfied with them. The pain point of native is too many files, and the problems of WEpy and MP-Vue are summarized in the problems of MPvue and WEPY. Finally, I had to make an ultra-lightweight single file parser mp-Parser with my colleagues. Eliminating too many file pain points while sticking to native syntax. Mp-parser-cli, which provides a lot of general capabilities such as font compression, code compression, general components, HTTP & cookie encapsulation, etc.

Single file form

The core of MP-Parser is single file parsing and hot update. Here is an example syntax (demo.vue). All syntax tags are native.

<! The contents of the config tag will be parsed into the.json file.
<config>
  {
    usingComponents: {}
  }
</config>

<! The contents of the template tag will be parsed into the.wxml file.
<template>
  <navigation title="Custom navigation bar"></navigation>
</template>

<! The contents of the script tag will be parsed into.js files.
<script>
Page({})
</script>

<! -- style tags are parsed to.wxss files. Sass syntax is supported -->
<style lang="scss">
</style>
Copy the code

General ability

The MP-Parser scaffold provides a number of generic capabilities, as documented at Github address.

httprequest

Promises HTTP requests, simplifying request syntax, and automatically carrying cookies

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

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

Common component

We provide a lot of common components, such as common components

  • Custom navigation barnavigation
  • Drag and drop the carddrag-card
  • The countdowncount-down
  • Omit textellipsis-text
  • Suction input boxfixed-inputter
  • Picture clipperimage-cropper
  • Range selectorrange-slider
  • Full screen videovideo-recorder
  • The left slide to deletesideslipping

General pop-up

Page({
  onLoad() {
    // { title, needHideLoading }
    this.$showSuccess('Operation successful'.false);

    // { title, content, needHideLoading}
    this.$showError('Operation failed'.'Operation failed, please try again later'.false);

    this.$showLoading('Data loading... ');
    this.$hideLoading(); }})Copy the code

Font compression

After the font configuration is complete, run the following command. For details, see Font Compression Configuration Tutorial

npm run fontCompression
Copy the code

Install and use

# Install scaffolding
npm install -g mp-parser-cli

# New project
mp-parser-cli-init <project_name>

# install dependencies
cd <project_name>
npm install

# run
npm run dev

# Open the developer tools, select the dist directory, and view the results
Copy the code

Patch up the core implementation of each library

Small program compression toolwx-minifier

  • A wXML-minifier is created for small programs by referring to htML-minifier. The main idea is to parse document flows, process tags and attributes, and remove comments, extra Spaces, and line breaks.

  • Based on CSSNano, it replaces a small part of invalid logic to compress WXSS code.

  • Compress JS code using Uglip-ES

Small program scaffoldmp-parser-cli
  • throughcommanderInterpreting the command line
  • throughdownload-git-repopullgithubTemplate repository to local

Applets template repositorymp-parser-template

  • Encapsulates common capabilities, common pop-ups, tool methods, common components, and so on

Small program preprocessormp-parser

  • usevue-template-compilerParsing single file
  • usenode-sassparsingsasscontent
  • usechokidarMonitor file changes, dynamically parse changing files, and deal with static resources