wxmp

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

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

功能

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

使用

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

完整示例

wxmp-todo-mvc 使用 wxmp 开发的 TodoMVC 小程序。

为什么会有这个项目

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

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

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

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

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

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

单文件组件

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

注意，在页面中，使用 usingComponents 引用组件时，组件路径需要携带 /，根目录是 Webpack 中配置的 context。

如下是一个页面的示例：

<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