【小程序入门集锦】8，一个组件化开发框架we

小程序为了适应各种情况，小程序的官方结构始终采用最正确的布局和安排，而不是技巧或销售技巧。使用第三方工具/框架，每个附加功能都会给开发人员带来更多约束。与庞大而全面的框架相比，我最喜欢的是基于工具的可替换框架，该框架对原始开发模型没有任何改变。它可能像utils的集合，随处可见，并且可以随处交换。

今天介绍的组件化实施方案是wech：chenzhuo1992 / wech

这是一个只有9kb的框架，足够小，并且具有沉浸式设计，有点像几年前出现的配对框架。设计非常精致。

1，观看演示

1.git clone chenzhuo1992 / wech

2.将wechat-ide-binding-directory目录绑定到小程序开发目录，然后在开发人员工具中运行项目

2，它如何工作

在wech中有一段这样的代码：

Object.defineProperty（componentConf.data，j，{

get（）{

if（typeof $ props [j] ==='function'）{

返回$ props [j] .apply（_config，arguments）;

}其他{

返回$ props [j];

}

}，

set（val）{}

}）;

The

Object.defineProperty（）方法直接在对象上定义一个新属性，或修改该对象的现有属性，然后返回该对象。

由于set（）{}属性设置器为空，因此道具的处理是单向数据流，

然后，看看wxml中的mask组件：

这很简单。当visible为true时，请使用某些CSS样式来控制显示/隐藏。那么可见的变化如何？

visible是maskConfig的数据属性：

但是此属性由Object.defineProperty重新定义。结合是通过微信实现的，接枝和转移是通过韦奇完成的。 wxml页面中的visible指向道具中的visible（），而visible（）再次为：

返回this.data.maskVisible;

在客户代码中，main.js：

showMask（）{

让页面=这个；

page.data.maskVisible = true;

page.setData（page.data）;

setTimeout（function（）{

page.setData（{

maskVisible：错误

}）;

}，1000)；

}，

只需将maskVisible设置为true，它将在1秒后自动变为false，这将更改mask模板组件。太神奇了吗

这种注入处理技术值得学习，但是不建议使用此框架。但是，演示中附加了一个多日日历组件，其效果仍然非常好。看完这篇文章值得学习。

---

如果您在学习过程中遇到困难，则可以添加作者微信，并将“ 小程序”回复到作者微信组。

欢迎来到作者的现场课程

如何获得免费优惠券：按照微信官方帐户“ Arts and Thoughts”，回答“ gift coupons”一词即可获得免费优惠券。每个人限一人，数量有限，先到先得。