E企盈营销工具技术服务商 热线:4006-838-530

微信小程序组件,微信小程序自定义组件的使用

E企盈直播平台营销卖货系统

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。微信小程序项目越写越大,页面也越来越多,所以将相同作用的模块写成组件是非常必要也方便开发维护的事。比如,一个弹出框写起来很简单,但是每个页面都需要用一个弹出框,如果每个页面都写一个弹出框的话,这就很麻烦,而且没有意义,所以,就弹出框写成组件,就是一个非常好的选择。下面就以弹出框来举例,了解一下微信小程序的组件系统。创建自定义组件类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成。要编写一个自定义组件,首先需要在json文件中进行自定义组件声明(将component字段设为true可这一组文件设为自定义组件):项目目录json文件:{“component”:true}wxml文件:viewwx:if=”{{show}}”class=’iosTip-maskiosTip-animate-fade-in’viewclass=’iosTip-dialog’viewclass=’iosTip-dialog-box’viewclass=’iosTip-close’bindtap=’close’/viewviewclass=’iosTip-title’特别说明/viewviewclass=’iosTip-con’受《AppleDeveloperProgram许可协议》《AppStore审核指南》等终端设备系统、应用程序商店、市场等的协议规范的影响,自2018年8月17日起,小程序内苹果(Apple)手机用户将暂不支持直接购买。/viewbuttonopen-type=’contact’session-from=”{{3}}”viewclass=’iosTip-bottom’联系在线客服获得更多帮助/view/button/view/view/viewjs文件://component/iosTip/iosTip.jsComponent({/组件的初始数据/data:{show:true},/组件的方法列表/methods:{close:function(){varmyShow={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:fadeInease0.3sforwards;animation:fadeInease0.3sforwards;}.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:60rpx020rpx;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文件使用组件:iosTipbind:myevent=”onGetShow”wx:if=”{{IsIosShow}}”/页面index的js文件书写逻辑:onGetShow:function(e){console.log(e.detail.myShow)this.setData({IsIosShow:e.detail.myShow})},这样,一个完整的组件就写好了,每个页面都可以引用弹出框了微信小程序官方文档:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序组件,微信小程序自定义组件的使用
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏