前言
用过原生,用过 wepy
,用过 mp-vue
,但是都不是非常满意,原生的痛点是文件太多,wepy
和 mp-vue
的问题见 mpvue和wepy问题总结,最后不得不和同事一起做了一个超轻量的小程序单文件解析器 mp-parser
,在贴合原生语法的同时解决掉文件太多的痛点。并配套研发了脚手架 mp-parser-cli
,提供了很多通用能力比如字体压缩、代码压缩、通用组件、http & cookie
封装等。
单文件形式
mp-parser
的核心就是单文件解析以及热更新,下面为一个语法示例(demo.vue
),标签内的所有语法皆为原生语法。
<config>
{
usingComponents: {}
}
</config>
<template>
<navigation title="自定义导航栏"></navigation>
</template>
<script>
Page({})
</script>
<style lang="scss">
</style>
复制代码
通用能力
mp-parser
脚手架提供了非常多的通用能力,详细文档见 github地址。
http
请求
将 http
请求 promise
化,简化了请求语法,且会自动携带 cookie
Page({
onLoad() {
this.$http.get('url',{params: ''}).then((res) => {}).catch((err) => {});
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() {
this.$showSuccess('操作成功',false);
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