使用组件化开发框架wech

分享者：哲学李论来自原文地址 
小程序官方的架构为了适应各种情况总是取最中正的布局和安排SEO关键词总是取最中正的布局和安排不取巧不卖巧。第三方工具/框架每多一分功能就给开发者多带来了一分束缚。相对于大而全的框架我最喜欢的是工具式的、对原开发模式没有改变或少改变的可替换的框架。可能就像是一个utils集合随处可用随处可换。

今天介绍的这款组件化实现方案是wech：https://github.com/chenzhuo1992/wech

1查看demo

1.git clone https://github.com/chenzhuo1992/wech.git 
2.将wechat-ide-binding-directory目录绑定为小程序开发目录在开发者工具中运行项目

在wech内部有一段这样的代码：

Object.defineProperty(componentConf.data, j, {

get() {

if (typeof $props[j] === 'function') {

return $props[j].apply(_config, arguments);

} else {

return $props[j];

}

},

set(val) {}

});

Object.defineProperty() 方法会直接在一个对象上定义一个新属性或者修改一个对象的现有属性 并返回这个对象。

因为set(){}属性设置器是空的所以对props的处理是单向数据流 

那么看一下mask组件在wxml中：

<template name="wech_mask">

<view style="z-index: {{ zIndex ? zIndex : 9999 }}" class="wech_mask {{ visible ? 'wech_mask-visible' : '' }}" bindtap="{{ originClickingMask }}"></view>

</template>

很简单网站优化在wxml中：

<template name="wech_mask">

<view style="z-index: {{ zIndex ? zIndex : 9999 }}" class="wech_mask {{ visible ? 'wech_mask-visible' : '' }}" bindtap="{{ originClickingMask }}"></view>

</template>

很简单当visible为true时使用某某css样式控制显示/隐藏。那么visible是如何改变的？

visible是maskConfig的一个data属性： 

但是这个属性被Object.defineProperty重定义了。绑定是微信实现的嫁接与转移是wech做的。wxml页面中的visible指向了props中的visible()而visible()又是： return this.data.maskVisible;

在客户代码中main.js:

showMask () {

let page = this;

page.data.maskVisible = true;

page.setData(page.data);

setTimeout(function () {

page.setData({

maskVisible: false

});

}, 1000);

},

只是让maskVisible为true过1秒自动变为false这样就改变了mask template组件。是不是很神奇。