微信小程序开发（4）：创建自己的UI库

作者：叶小柴

https://www.cnblogs.com/yexiaochai/p/9393212.html

前言

Github地址：https://github.com/yexiaochai/wxdemo

从上面继续，我们了解了小程序的生命周期、标签和样式。后来，我们编写了一个简单的加载组件，它显然是一个半成品。当我们制作加载组件时，我们意识到了一个问题：

小程序的组件实际上是标签

我们无法获取标签的实例，至少我暂时无法获取

所以这些前提使我们对标签有了非常不同的理解。要完成小程序特定的UI库，我们需要从标签开始

这里的焦点已经从js中的实例变为wxml中的属性

今天，我们尝试制作几个组件。首先，我们完成未完成的加载，然后完成消息类弹出组件，然后完成日历组件。我希望在这个过程中，我们能够形成一套可用的系统。这里涉及到组件系统，我们可能需要对下面的流程进行梳理：

① 首先，我们在这里制作的组件实际上是“标签”。此时，我们应该考虑在介绍他们时如何处理他们

② 因为编写业务页面的同事（编写页面的同事）需要介绍json配置中需要使用的标签：

“使用组件”：{

“ui加载”：“/components/ui加载“

}

因为标签不能动态插入，所以需要在开始时将标签放入页面wxml中：

<；/ui加载>

③ json中的配置只能临时复制，但我们可以提供一个ui集。wxml动态引入一些组件，例如全局加载弹出提示

④ 对于很少使用的日历组件或弹出组件，您需要在页面中介绍它们。看来工作量不大。让我们看看以后如何优化它们

⑤ 这里我们为每个组件设置一个行为。行为原则只设置一层（这里有一点继承关系）。层越多，越复杂。弹出层类为一个，常规类为一（用于日历类组件）

使用以上标准，我们首先转换加载组件

⑥ 默认情况下，所有组件的WXSS在初始阶段直接设置为隐藏

修改加载

这里我们首先转换弹出层继承的行为行为层：

const util=require（'../utils/util.js'）

单元exports=行为({

属性：{

//每个组件所需的重要属性定义是否显示该组件

isShow（显示）：{

类型：字符串

}

},

//这里设置了弹出层必须有遮罩层，因此每个弹出层必须具有z索引属性

数据：{

maskzIndex:util.getBiggerzIndex（），

uiIndex:util.getBiggerzIndex（）

},

附加：函数（）{

console.log（“层”）

},

方法：{

}

})

其次，我们转换了我们的遮罩组件：

let LayerView=require（“行为层”）

组件({

行为：[LayerView]，

属性：{

//只需动态设置遮罩的z索引属性，即可调用弹出层

z索引：{

类型：字符串

}

},

数据：{

},

附加：函数（）{

console.log（“任务”）

},

方法：{

onTap:函数（）{

这triggerEvent（“自定义事件”，｛｝，｛}）

}

}

})

WXML在不做任何更改的情况下完成了我们的代码，结构关系似乎更清晰，但作为加载组件，存在一个问题。例如，是否通过单击遮罩层来关闭整个组件，或者是否通过单击这样的遮罩层关闭整个组件是一个公共属性，因此我们继续改革我们的层和遮罩（有关详细信息，请参见此处的github代码）：

const util=require（'../utils/util.js'）

单元exports=行为({

属性：{

//每个组件所需的重要属性定义是否显示该组件

isShow（显示）：{

类型：字符串

}

},

//这里设置了弹出层必须有遮罩层，因此每个弹出层必须具有z索引属性

数据：{

maskzIndex:util.getBiggerzIndex（），

uiIndex:util.getBiggerzIndex（），

//默认情况下，单击遮罩不关闭组件

单击隐藏：false

},

附加：函数（）{

console.log（“层”）

},

方法：{

}

})

方法：{

onMaskEvent:函数（e）{

控制台日志（e）；

//如果设置了单击遮罩以关闭组件，请将其关闭

如果（this.data.clickToHide）

this.set数据({

isShow:“无”

});

}

}

此时，单击是否关闭，基本可以在组件中设置属性。然而，这是一个内部属性，尚未发布。此时，我们可能会发现另一个幽默的场景：

由于我们无法获取标签的实例，因此我们需要动态调用：

onShow:函数（）{

让scope＝this；

this.set数据({

isLoadingShow:“”

});

//3秒内关闭加载

setTimeout（函数（）{

范围设置数据({

isLoadingShow:“无”

});

}, 3000);

},

可以看出，在标签之后