本文用来介绍关于如何在微信小程序中实现materia风格的ui化
注意:该ui使用微信小程序原生语法,动画均使用animate以及过渡效果实现,未使用微信的api创建动画
1.准备
创建一个自定义组件 sc-button
在sc-button.json中指明这是一个自定义组件
{
"component":true
}
2. 封装button
2.1 初始html格式
<button class="btn-class">
<slot></slot>
</button>
2.2 处理微信原生事件以及指令
微信小程序的button有很多内置的微信指令例如 open-type,size,plain
等以及原生的方法如getuserinfo,getphonenumber
等 所以我们封装button的时候要把这些能力进行相应的处理。
可以分为两类:一种是指令,一种是事件,
指令 可以从properties里将微信原生的button的所有指令声明,然后直接赋值到内部封装的button里。
事件 我们可以根据事件的捕获冒泡以及open-type的唯一性,让其在触发后根据open-type选择事件直接冒泡到外层即可,但是需要将获取的value也传递出去
例如:
properties: {
openType: {
type: String
},
size: {
type: String,
value: 'default'
},
plain: {
type: Boolean,
value: false
}
},
data: {
// 事件的map表
openTypeToBindEvent: {
'getUserInfo': 'getuserinfo',
'getphonenumber': 'getphonenumber',
'launchApp': 'error',
'contact': 'contact'
}
},
methods: {
// 绑定未冒泡的事件手动触发到上一层
_returnEventData(e) {
this.triggerEvent(`${
this.data.openTypeToBindEvent[this.properties.openType]}`);
}
}
然后直接赋值到button里,注意,这里需要判断一下值是否存在
<button class="btn-class"
bind:getuserinfo="{
{
openType === 'getUserInfo' ? '_returnEventData' : '' }}"
bind:getphonenumber="{
{
openType === 'getphonenumber' ? '_returnEventData' : '' }}"
bind:error="{
{
openType === 'launchApp' ? '_returnEventData' : '' }}"
bind:contact="{
{
openType === 'contact' ? '_returnEventData' : '' }}"
open-type="{
{
openType || ''}}"
size="{
{
size || ''}}"
plain="{
{
plain || ''}}"
>
<slot></slot>
</button>