wxmp

功能

• 单文件组件, 且可以自动解析 config 中的依赖
• 页面和组件选项中增加了 Computed 计算属性

完整例子

• 见 example

单文件组件

• 每个单文件组件由四部分组成: template, style, config, script, 分别会编译到小程序对应文件: wxml, wxss, json, js
• definePage 中增加了 methods 配置项，提供与组件一致的代码组织形式

div(bindtap="onTap")

definePage({
  methods: {
    onTap() {
      // ...
    },
  },
})

使用自定义解析引擎

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

注意:

• 其中 script 必须提供，因为小程序必须执行 App, Page, Component
• 由于 wxmp 需要分析 config 中配置的依赖关系，所以规定 config 必须使用 yaml 语法
• 在 pug 中 div(wx:if="{{ 2 > 1 }}") 会被转成 {{ 2 &gt 1 }}, 无法被小程序识别。 所以符合正则 /="{{/g 的部分会被自动替换成 !=\"{{ , 以关闭 pug 转义

计算属性

• 定义页面及组件时，使用框架提供的 definePage, defineComponent, 更新数据时使用 this.$set({})
• 修改 data，自动修改依赖的 computed
• 传入的 properties 变化，依赖的 computed 自动更新
• 计算属性内部的 this 并不会指向当前页面或组件实例, data 将作为函数参数传入

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

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

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

VS Code 中 wxmp 文件高亮配置

• edit 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

• run the command Vetur: Generate grammar from vetur.grammar.customBlocks

• restart VS Code to get syntax highlighting for custom blocks