微信小程序开发组件教程

微信小程序为开发者提供了丰富的组件，开发者可以通过这些组件，自由的搭配搭建属于自己独一无二的小程序，下面就和大家分享一下微信小程序开发组件教程？

微信小程序开发组件教程主要分三步走：创建组件-编写组件代码-调用并使用组件。

第一步：.创建微信小程序开发组件

创建一个微信小程序开发组件，通常都是在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:’我是一个自定义组件’

}

})

以上就是微信小程序开发组件教程，大家可以动手去操作一下，学会了，也可以搭建一个属于自己的小程序。

相关推荐：微信小程序组件是什么