开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。
微信小程序项目越写越大,页面也越来越多,所以将相同作用的模块写成组件是非常必要也方便开发维护的事。
比如,一个弹出框写起来很简单,但是每个页面都需要用一个弹出框,如果每个页面都写一个弹出框的话,这就很麻烦,而且没有意义,所以,就弹出框写成组件,就是一个非常好的选择。下面就以弹出框来举例,了解一下微信小程序的组件系统。
创建自定义组件
类似于页面,一个自定义组件由
json
wxml
wxss
js
4个文件组成。要编写一个自定义组件,首先需要在json
文件中进行自定义组件声明(将component
字段设为true
可这一组文件设为自定义组件):
项目目录
json文件:
{
"component": true
}
wxml文件:
<view wx:if="{{show}}" class='iosTip-mask iosTip-animate-fade-in'>
<view class='iosTip-dialog'>
<view class='iosTip-dialog-box'>
<view class='iosTip-close' bindtap='close'></view>
<view class='iosTip-title'>特别说明</view>
<view class='iosTip-con'>受《Apple Developer Program 许可协议》《App Store 审核指南》 等终端设备系统、应用程序商店、市场等的协议规范的影响,自2018年8月17日起,小程序内苹果(Apple)手机用户将暂不支持直接购买。</view>
<button open-type='contact' class="service-button" session-from="{{3}}">
<view class='iosTip-bottom'>联系在线客服获得更多帮助</view>
</button>
</view>
</view>
</view>
js文件:
// component/iosTip/iosTip.js
Component({
/**
* 组件的初始数据
*/
data: {
show: true
},
/**
* 组件的方法列表
*/
methods: {
close: function() {
var myShow = {
myShow: false
}
this.triggerEvent('myevent', myShow) //myevent自定义名称事件,父组件中使用
}
}
})
wxss文件:
.iosTip-mask {
width: 100%;
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
}
.iosTip-animate-fade-in {
-webkit-animation: fadeIn ease 0.3s forwards;
animation: fadeIn ease 0.3s forwards;
}
.iosTip-dialog {
position: absolute;
width: 80%;
max-width: 300px;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
border-radius: 8px;
overflow: hidden;
padding: 12rpx;
}
.iosTip-dialog-box {
background-color: #fff;
width: 100%;
height: auto;
border-radius: 8px;
position: relative;
}
.iosTip-close {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDQzMzYzKSAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxOC45NDRweCIgaGVpZ2h0PSIxOC45ODZweCIgdmlld0JveD0iMCAwIDE4Ljk0NCAxOC45ODYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4Ljk0NCAxOC45ODYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNDQ0NDQ0MiIGQ9Ik0xOC4wNTUsMTguMDk2Yy0xLjE4OCwxLjE4OC0zLjExMSwxLjE4OC00LjI5OCwwbC00LjI5OC00LjMwMg0KCWwtNC4yOTYsNC4zMDJjLTEuMTg4LDEuMTg4LTMuMTExLDEuMTg4LTQuMjk4LDBjLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDJsNC4yOTgtNC4zMDFMMC44NjUsNS4xOTINCgljLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDFjMS4xODctMS4xODgsMy4xMS0xLjE4OCw0LjI5OCwwbDQuMjk2LDQuMzAxbDQuMjk4LTQuMzAxYzEuMTg3LTEuMTg4LDMuMTEtMS4xODgsNC4yOTgsMA0KCWMxLjE4NiwxLjE4OCwxLjE4NiwzLjExMywwLDQuMzAxbC00LjI5OCw0LjMwMWw0LjI5OCw0LjMwMUMxOS4yNCwxNC45ODIsMTkuMjQsMTYuOTA4LDE4LjA1NSwxOC4wOTZ6Ii8+DQo8L3N2Zz4NCg==");
width: 60rpx;
height: 60rpx;
position: absolute;
right: 12rpx;
top: 12rpx;
background-size: 20rpx;
background-repeat: no-repeat;
background-position: center;
}
.iosTip-title{
font-weight: bold;
padding: 60rpx 0 20rpx;
font-size: 40rpx;
}
.iosTip-con{
font-size: 26rpx;
color: #888888;
line-height: 48rpx;
padding: 40rpx;
text-align: left;
}
.iosTip-bottom{
color: #62759c;
font-size: 24rpx;
margin-top: 80rpx;
padding-bottom: 70rpx;
}
.service-button{
background: white;
margin: 0;
padding: 0;
}
以上代码就定义了一个完整的组件,下面需要在页面中去使用它
页面index的json文件需要引用组件:
{
"usingComponents": {
"iosTip": "/components/iosTip/iosTip"
}
}
页面index的wxml文件使用组件:
<iosTip bind:myevent="onGetShow" wx:if="{{IsIosShow}}" />
页面index的js文件书写逻辑:
onGetShow: function (e) {
console.log(e.detail.myShow)
this.setData({
IsIosShow: e.detail.myShow
})
},
这样,一个完整的组件就写好了,每个页面都可以引用弹出框了
微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/