微信小程序开发（4）：创建自己的UI库
小程序开发
浏览：1148 次
作者：叶小柴
https://www.cnblogs.com/yexiaochai/p/9393212.html
前言
Github地址：https://github.com/yexiaochai/wxdemo
从上面继续，我们了解了小程序的生命周期、标签和样式。后来，我们编写了一个简单的加载组件，它显然是一个半成品。当我们制作加载组件时，我们意识到了一个问题：
小程序的组件实际上是标签
我们无法获取标签的实例，至少我暂时无法获取
所以这些前提使我们对标签有了非常不同的理解。要完成小程序特定的UI库，我们需要从标签开始
这里的焦点已经从js中的实例变为wxml中的属性
今天，我们尝试制作几个组件。首先，我们完成未完成的加载，然后完成消息类弹出组件，然后完成日历组件。我希望在这个过程中，我们能够形成一套可用的系统。这里涉及到组件系统，我们可能需要对下面的流程进行梳理：
① 首先，我们在这里制作的组件实际上是“标签”。此时，我们应该考虑在介绍他们时如何处理他们
② 因为编写业务页面的同事（编写页面的同事）需要介绍json配置中需要使用的标签：
“使用组件”：{
“ui加载”：“/components/ui加载“
}
因为标签不能动态插入，所以需要在开始时将标签放入页面wxml中：
③ 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);
},
可以看出，在标签之后
