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 将小程序的接口全部屏蔽,这使得出错以后问题的排查变得十分困难。
我们期望有一个框架,能够
- 拥有像 Vue 一样便捷的开发体验
- 尽可能贴近小程序原生,因为如果想开发某个平台上最好的程序,唯一的方法是使用这个平台的原生开发
wxmp 并不复杂,实现也非常简单,但是它可以大幅增加我们的开发效率。
单文件组件
每个页面文件或者组件文件由四部分组成: template
, style
, config
, script
, 分别编译到小程序对应的 wxml
, wxss
, json
, js
。
注意,在页面中,使用 usingComponents
引用组件时,组件路径需要携带 /
,根目录是 Webpack 中配置的 context
。
如下是一个页面的示例:
.home .home__main _loading _reserve-area usingComponents: _loading: /components/_loading _reserve-area: /components/_reserve-area
definePage && defineComponent
wxmp 定义了两个全局方法 definePage
和 defineComponent
用于取代小程序标准的 Page
和 Component
构造器。
新的构造器在原生的基础上增加了对 computed
配置项的支持,同时,definePage
中使用 methods
属性组织用户自定义方法,Page
构造器原生是不支持的。
计算属性 & this.$set
在 definePage
和 defineComponent
中可以使用 computed
属性指定计算属性,wxmp 内部会追踪计算属性与数据属性之间的关系。
同时,wxmp 提供 this.$set
函数用于更新数据,该函数会自动计算计算属性的新值然后调用 setData
。
注意,定义计算属性时,对数据属性的访问通过参数 data
实现。
使用自定义解析引擎
可以在 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 > 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": ,"files.associations": ,"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