评论

分享一个新的小程序开发框架:wxmp

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

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 定义了两个全局方法 definePagedefineComponent 用于取代小程序标准的 PageComponent 构造器。

新的构造器在原生的基础上增加了对 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

definePagedefineComponent 中可以使用 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

License

Released under the MIT license

最后一次编辑于  07-19  (未经腾讯允许,不得转载)
点赞 0
收藏
评论

9 个评论

  • 红萝卜炒鸡蛋
    红萝卜炒鸡蛋
    07-19

    我觉的放在一起更烦人,还是分开的好。。。各司其职,条理更清晰!

    大杂烩一锅炖真的好吗?见仁见智吧。

    07-19
    赞同 2
    回复
  • 9140
    9140
    07-24

    pug和Stylus是可选的么?如果要换成html  scss或者less能支持么?

    07-24
    赞同
    回复
  • H-
    H-
    07-23

    乱死了 看着都恶心 为什么要放在一个页面呢?

    07-23
    赞同
    回复
  • 蓝域
    蓝域
    07-22

    从原生Android转过来,发现这结构还可以,挺简单的

    07-22
    赞同
    回复
  • 尤金
    尤金
    07-19

    头大

    07-19
    赞同
    回复
  • waterfall
    waterfall
    07-19

    全整一起看代码头都给你看大了

    07-19
    赞同
    回复
  • 问之
    问之
    07-19

    全都放在一起只有我一个人觉得乱吗

    07-19
    赞同
    回复
  • 日积YLML
    日积YLML
    07-19

    超长页面上下拖动和左右标签页切换哪个更方便?大家应该都懂

    07-19
    赞同
    回复
  • \
    \
    07-19

    “告别烦人的 .wxml.wxcss.js.css”,就这句话最亮眼

    07-19
    赞同
    回复