微信小程序开发组件教程
微信小程序为开发者提供了丰富的组件，开发者可以通过这些组件，自由的搭配搭建属于自己独一无二的小程序，下面就和大家分享一下微信小程序开发组件教程？
微信小程序开发组件教程主要分三步走：创建组件-编写组件代码-调用并使用组件。
第一步：.创建微信小程序开发组件
创建一个微信小程序开发组件，通常都是在modal文件夹里面找，里面包含有json、wxml、wxss、js四个子文件，我们可以选择json这个子文件，添加”component”:true。这样就可以创建了。
第二步：编写微信小程序开发组件代码
在modal.wxml :
[html] view plain copy
在modal.wxss:
[css] view plain copy
.mask_layer {
width: 100%;
height: 100%;
position: fixed;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
.modal_box {
width: 76%;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 1001;
background: #fafafa;
margin: -150px 12% 0 12%;
border-radius: 3px;
}
.title {
padding: 15px;
text-align: center;
background-color: gazure;
}
.content {
overflow-y: scroll; /*超出父盒子高度可滚动*/
}
.btn {
width: 100%;
margin-top: 65rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
background-color: white;
}
.cancel {
width: 100%;
padding: 10px;
text-align: center;
color: red;
}
.Sure {
width: 100%;
padding: 10px;
background-color: gainsboro;
text-align: center;
}
.modalMsg {
text-align: center;
margin-top: 45rpx;
display: block;
}
在modal.js
[javascript] view plain copy
Component({
properties: {
modalHidden: {
type: Boolean,
value: true
}, //这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden
modalMsg: {
type: String,
value: ‘ ‘,
}
},
data: {
// 这里是一些组件内部数据
text: “text”,
},
methods: {
// 这里放置自定义方法
modal_click_Hidden: function () {
this.setData({
modalHidden: true,
})
},
// 确定
Sure: function () {
console.log(this.data.text)
}
}
})
第三步：调用并使用组件
1.首先这里的调用组件一般都是从index页面中调用到modal组件里，调用的方式可以通过index.json中引用说明，设置组件引用路径和标签名称。如图所示：
示例代码：
[JavaScript] view plain copy
{
“usingComponents”: {
“modal”: “../modal/modal”
}
}
2. 然后在index.wxml调用组件
示例代码：
[html] view plain copy
3. 在从index.js绑定数据
示例代码：
[javascript] view plain copy
Page({
data: {
is_modal_Hidden:false,
is_modal_Msg:’我是一个自定义组件’
}
})
以上就是微信小程序开发组件教程，大家可以动手去操作一下，学会了，也可以搭建一个属于自己的小程序。
相关推荐：微信小程序组件是什么
您可以选择一种方式赞助本站
