微信小程序為開發(fā)者提供了豐富的組件，開發(fā)者可以通過這些組件，自由的搭配搭建屬于自己獨一無二的小程序，下面就和大家分享一下微信小程序開發(fā)組件教程？
微信小程序開發(fā)組件教程主要分三步走：創(chuàng)建組件-編寫組件代碼-調用并使用組件。
第一步：.創(chuàng)建微信小程序開發(fā)組件
創(chuàng)建一個微信小程序開發(fā)組件，通常都是在modal文件夾里面找，里面包含有json、wxml、wxss、js四個子文件，我們可以選擇json這個子文件，添加”component”:true。這樣就可以創(chuàng)建了。
第二步：編寫微信小程序開發(fā)組件代碼
在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: {
// 這里是一些組件內部數(shù)據(jù)
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綁定數(shù)據(jù)
示例代碼：
[javascript] view plain copy
Page({
data: {
is_modal_Hidden:false,
is_modal_Msg:’我是一個自定義組件’
}
})
以上就是微信小程序開發(fā)組件教程，大家可以動手去操作一下，學會了，也可以搭建一個屬于自己的小程序。
相關推薦：微信小程序組件是什么
