微信小程序自定义组件组件（代码详解)

在写小程序代码的时候，我们发现经常有一段代码我们经常敲，经常使用某一自定义组件，例如商城首页的轮播图和商品详情页的商品展示栏是近乎相同的代码；微信小程序里的弹窗提示可以使用在多个地方…

小程序自定义组件

找到成分目录，没有就新建

在成分目录里新建一个用于存放代码的目录（下面用g-swiper表示)

在g-swiper目录里新建成分（名字自取),新建后会和新建页时一样自动生成四个页面文件(g-swiper。wxml g-swiper。wxss g-swiper。js g-swiper。JSON)

轮播图实例

g-swiper list=' { { imageList } } ' g-class=' swiper '/在index.wxml里只需要这简短一行代码就能实现一个轮播图组件

数据声明

要想使用组件必先声明，在index.json里声明组件名称和地址

{ ' USing ComPonents ' : { ' g-swiper ' : '/ComPonents/g-swiper/g-swiper ' } }在组件的数据也必须的声明，g-swiper.json(下面代码直接复制报错请将注释删掉)

{ 'component': true，//自定义组件声明使用组件' : {} //可选项，用于引用别的组件}wxml和页面样式表

页面结构和页面样式表里的代码跟普通页面里的代码没什么区别

g-swiper.wxml代码

捣蛋鬼类='g级'循环自动播放间隔='3000 '持续时间='300 '指示器-点指示器-活动-颜色=' # ffffff ' block wx : for=' { { list } } ' wx : key=' { { index } } ' swiper-item类=' swiper-item ' image src=' http : { { item } } '//swiper-item/block/swiper

g-swiper.wxss代码。swiper-项目图像{宽度：100%；高度：100%}

射流研究…

射流研究…代码和普通页面射流研究…代码有所不同，这里是用成分包起来的而不是被页包起来的

射流研究…代码

组件({外部类：[' g-class ']，属性： {列表： {类型：数组，值：[] }，})

注意：这里的g级样式和目录数据我将它的定义权利交给引入它的一方，这里是指数页面引入它

组件绑定外部方法

组件绑定外部方法的方式，以一自定义按钮为例

g-btn.wxml代码

按钮绑定点击=' btnTest ' g-BTN/按钮

g-btn.js代码

组件({ methods: { /* *)公有方法*/btntest : FuncTion(){ this。triggerevent(' action ')} })在指数里引入并且展示出来

index.wxml代码

g-BTN绑定：操作=' btnTest '/g-BTN

在index.js里加入方法btnTest()

btntest : FuncTion(){控制台。日志(' g-BTN现在被点击了!')}

可以看到安慰栏里出现了"现在点击g-btn！”字样

弹窗组件实例

指数页面引入，直接上代码

index.wxml代码

view class=' container ' dialog id=' dialog ' title='这是标题内容='这是对话框的内容' cancelText='取消' confirmText='确定绑定：取消事件=' _取消事件'绑定：确认事件=' _确认事件'/对话框按钮类型=' primary '绑定点击=' showDialog '点击我！/button/viewindex.js代码

page({ onready : function(){//获得对话组件这个。对话框=这个。select component(' # dialog ')；}，showDialog(){ this。对话。showDialog()；}, //取消事件_cancelEvent() { console.log('你点击了取消');这个。对话。HideDialog()；}, //确认事件_confirmEvent() { console.log('你点击了确定');这个。对话。HideDialog()；}})组件对话目录里

dialog.wxml代码

view class=' wx _ dialog _ container ' hidden=' { {！isShow } } ' view class=' wx-mask '/view view class=' wx-dialog ' view class=' wx-dialog-title ' { title } }/view view view view class=' wx-dialog-content ' { content } }/view view view class=' wx-dialog-footer ' view class=' wx-dialog-BTN ' catch tap=' _ cancel vent ' { cancel text } }/view view view view view view view view view view class=' wx-dialog-BTN ' catch tap=' _ confirm event ' { confirm text } }/view代码。wx-mask {位置：固定；z指数： 1000；top : 0；右： 0；左： 0；底部： 0；background: rgba(0，0，0，0.3)；}.wx-对话框{位置：固定；z指数： 5000；宽度： 80%;最大宽度： 600 rpx前：名50%；左侧： 50%;-web kit-transform : translate(-50%，-50%)；transform: translate(-50%，-50%)；背景-color : # FFFFFF；文本对齐：中心；边界半径： 3px飞越：隐藏；}.wx-dialog-title { font-size : 18px；padding: 15px 15px 5px }。wx-dialog-content { padd : 15px 15px 5px；最小高度： 40pxfont-size : 16px线高： 1.3;单词包装：断字；断字：断字；color: # 999999}。wx-dialog-footer { display : flex；align-items:居中；相对位置：线高： 45pxfont-size : 17px}.{内容： }之前的wx-对话框-页脚3360:绝对位置：左： 0；top : 0；右： 0；高度： 1px边框-top: 1px实心# d5d5d5d 6；color : # D5 D5 d 6；-web工具包-transform-origin : 0 0；变换原点： 0 0；-web套件-transform : Scaley(0.5)；变换： Scaley(0.5)；}.wx-dialog-BTN {显示器： }块；-web套件-flex : 1；flex : 1；-web kit-tap-高光-color : rgba(0，0，0，0)；相对位置：}.wx-对话框-页脚wx-dialog-BTN :第(1)类{ color : # 353535}.wx-对话框-页脚wx-dialog-BTN :型(2){ color : # 3cc 51f；}.wx-对话框-页脚{内容： }之后的wx-dialog-BTN : th类型(2):绝对位置：左： 0；top : 0；宽度： 1px底部： 0；边框-左侧： 1px实心# d5d5d5d 6；color : # D5 D5 d 6；-web工具包-transform-origin : 0 0；变换原点： 0 0；-web套件-transform : Scalex(0.5)；变换： Scalex(0.5)；}dialog.js代码

组件({ /** *组件的属性列表* 用于组件自定义设置*/properties: { //弹窗标题title: { //属性名键入：字符串，//类型（必填),目前接受的类型包括：字符串、数字、布尔值、对象、数组、空（表示任意类型)值： '标题' //属性初始值（可选),如果未指定则会根据类型选择一个}, //弹窗内容内容： {类型：字符串，值： '弹窗内容' }, //弹窗取消按钮文字取消文本： {类型：字符串，值： '取消' }, //弹窗确认按钮文字确认文本： {类型：字符串，值： '确定' } }, /** * 私有数据，组件的初始数据* 可用于模版渲染*/data: { //弹窗显示控制isShow: false }，/** *组件的方法列表* 更新属性和数据的方法与更新页面数据的方法类似*/methods: { /* *公有方法*///隐藏弹框隐藏对话框(){ this。setdata({ isshow :this.data.isShow }) }，//展示弹框showDialog(){ this。setdata({ isshow :this.data.isShow }) }，/* *内部私有方法建议以下划线开头*触发事件用于触发事件*/_cancelEvent() { //触发取消回调这个。triggerevent(' cancelEvent ')}，_confirmEvent() { //触发成功回调这个。triggerevent('确认事件')；} }})总结

以上所述是小编给大家介绍的微信小程序自定义组件组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！