wxmp

一个 简单，轻量，贴近原生 的微信小程序开发框架，让小程序的开发变得更加便捷。

兼容小程序基础库 v2.0.1+。

功能

• 单文件组件，告别烦人的 .wxml, .wxss, .js, .json
• 计算属性

使用

推荐使用标准模板 standard-wxmp，其中 script 使用 ES6，style 使用 Stylus，config 使用 YAML，template 使用 Pug。

为什么会有这个项目

在这个项目之前，我们使用 mpvue 作为开发框架。长期使用以后，发现 mpvue 存在一些问题，其中最严重的问题是不够贴近原生。

小程序有自己的运行模型，这套模型和 Vue 并不相同，使用 Vue 的观念来开发小程序长期来看只会带来困扰。

mpvue 将小程序的接口全部屏蔽，这使得出错以后问题的排查变得十分困难。

我们期望有一个框架，能够

1. 拥有像 Vue 一样便捷的开发体验
2. 尽可能贴近小程序原生，因为如果想开发某个平台上最好的程序，唯一的方法是使用这个平台的原生开发

wxmp 并不复杂，实现也非常简单，但是它可以大幅增加我们的开发效率。

单文件组件

每个页面文件或者组件文件由四部分组成: template, style, config, script, 分别编译到小程序对应的 wxml, wxss, json, js。

如下是一个页面的示例：

<template>
.home
  .home__main
    _loading

  _reserve-area
</template>

<script>
definePage({
  onLoad() {
    _showToast("Hello, World")
  },
})
</script>

<config>
usingComponents:
  _loading: components/_loading
  _reserve-area: components/_reserve-area
</config>

<style>
.home
  height: 100vh
  display: flex
  flex-direction: column

.home__main
  flex: 1
</style>

definePage && defineComponent

wxmp 定义了两个全局方法 definePage 和 defineComponent 用于取代小程序标准的 Page 和 Component 构造器。

新的构造器在原生的基础上增加了对 computed 配置项的支持，同时，definePage 中使用 methods 属性组织用户自定义方法，Page 构造器原生是不支持的。

definePage({
  onLoad() ...
  ...

  data: {
    name: "wxmp",
    age: 1,
  },

  computed: {
    info(data) {
      return `${ data.name } ${ data.age }`
    },
  },

  methods: {
    ...
  },
})

defineComponent({
  attached() ...
  ...

  properties: {
    num1: {
      type: Number,
      value: 1,
    },

    num2: {
      type: Number,
      value: 1,
    },
  },

  computed: {
    total(data) {
      return data.num1 + data.num2
    },
  },

  // Component 构造器原生支持 methods 属性
  methods: {
    ...
  },
}) 

计算属性 & this.$set

在 definePage 和 defineComponent 中可以使用 computed 属性指定计算属性，wxmp 内部会追踪计算属性与数据属性之间的关系。

同时，wxmp 提供 this.$set 函数用于更新数据，该函数会自动计算计算属性的新值然后调用 setData。

注意，定义计算属性时，对数据属性的访问通过参数 data 实现。

definePage({
  data: {
    a: 1,
    b: 1,
  },

  computed: {
    c(data) {
      return data.a + data.b
    },
  },

  methods: {
    dataChange() {
      this.$set({ a: 2 }) // a 和 c 都会更新
    },
  },
})

使用自定义解析引擎

可以在 Webpack 中配置不同的部分由什么 Loader 进行处理。

{
  loader: "wxmp",
  options: {
    script: [{ loader: "babel-loader" }],
    template: [
      {
        loader: "pug-plain-loader",
        options: {
          doctype: null, // 解决小程序中闭合标签不兼容的问题
        },
      },
    ],
    style: [{ loader: "stylus-loader" }],
    config: [{ loader: "yaml-loader" }],
  },
},

注意:

• script 必须提供
• config 必须使用 yaml-loader
• 由于 pug 会将 div(wx:if="{{ 2 > 1 }}") 转成 {{ 2 &gt 1 }}, 无法被小程序识别，因此 wxmp 内部使用正则 /="{{/g 将 ="{{ 替换成 !=\"{{ , 以关闭 pug 转义

语法高亮

Sublime

下载 wxmp.sublime-syntax 文件，放入 Sublime 的 Packages/User 目录中。

打开 Command Palette，输入 Set Syntax: wxmp 即可。

VS Code

首先安装 Vue 的插件 vetur。

编辑 setting.json

"vetur.grammar.customBlocks": {
  "config": "yaml",
  "template": "pug",
  "style": "stylus"
},
"files.associations": {
  "*.wxmp": "vue"
},
"vetur.validation.template": false,
"vetur.validation.style": false,
"vetur.validation.script": false

运行 Vetur: Generate grammar from vetur.grammar.customBlocks，然后重启 VS Code。

Authors

• @cj1128
• @clmystes

License

Released under the MIT license