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

微信小程序组件,微信小程序自定义组件之《转盘》

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

微信小程序支持简洁的组件化编程开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。这篇博文主要就是分享个自己实际项目中用到的转盘自定义组件项目源码地址:关于如何开始创建自定义组件、怎么写、如何使用类的,网上有挺多教程的,可自行去学习,这里就不介绍了可以看下官方自定义组件的开发文档:先来看下实际项目中大概的效果图:该组件是可以设置转盘的大小、转动的时间、转动的声音、不重复抽取、切换转盘选项还有概率等功能,都是可配置的当然当前小程序中不涉及到概率的问题,但还是封装了一个,方便以后的使用类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成。要编写一个自定义组件,首先需要在json文件中进行自定义组件声明(将component字段设为true可这一组文件设为自定义组件)同时,还要在wxml文件中编写组件模版,在wxss文件中加入组件样式,它们的写法与页面的写法类似。好了接下来贴代码,注释都写在代码里了,相信你们应该看的懂哈!!!zhuanpan.json:{“component”:true,”usingComponents”:{}}zhuanpan.wxml:viewviewanimation=”{{animationData}}”style=’width:{{size-2}}rpx;height:{{size}}rpx;’!–扇形颜色背景当选项长度等于2或者3时做了特殊处理–viewviewwx:for=”{{awardsConfig.awards}}”wx:key=”key”style=”transform:rotate({{item.item2Deg}});background-color:{{awardsConfig.awards.length==2?item.color:”}};opacity:{{awardsConfig.awards.length==2?item.opacity:awardsConfig.awards.length==3?item.opacity:”}};width:{{size}}rpx;height:{{size/2-2}}rpx;transform-origin:{{size/2}}rpx{{size/2}}rpx”viewstyle=”transform:rotate({{item.afterDeg}});background-color:{{item.color}};opacity:{{awardsConfig.awards.length==3?”:item.opacity}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin:{{size/2}}rpx{{size/2}}rpx”/viewviewwx:if='{{awardsConfig.awards.length==3}}’style=”background-color:{{item.color}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin:{{size/2}}rpx{{size/2}}rpx”/view/view/view!–选项内容–viewviewdata-index=”{{index}}”wx:for=”{{awardsConfig.awards}}”wx:key=’key’viewstyle=”height:262rpx;overflow:hidden;font-size:{{item.name.length9?’20’:’26’}}rpx;line-height:{{item.name.length9?’20’:’26’}}rpx;width:26rpx;padding-top:5rpx;transform:rotate({{indexturnNum}}turn);transform-origin:50%{{size/2-2}}rpx”textstyle=’word-break:break-all;'{{item.name}}/text/view/view/view/viewviewstyle=’width:100%;height:{{size}}rpx;’!–转盘中间的按钮–imagebindtap=”_zhuan”src=’https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/canvas_button_go_unclick.png’style=’width:{{size/4.4}}rpx;display:{{block1}};margin-top:16rpx’mode=’widthFix’/imageimagesrc=’https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/canvas_button_go_click.png’style=’width:{{size/4.4}}rpx;display:{{block2}};margin-top:16rpx’mode=’widthFix’/imageimagebindtap=”reset”src=’https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/canvas_button_reset_unclick.png’style=’width:{{size/4.4}}rpx;display:{{block3}};margin-top:16rpx’mode=’widthFix’/imageimagesrc=’https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/canvas_button_reset_click.png’style=’width:{{size/4.4}}rpx;display:{{block4}};margin-top:16rpx’mode=’widthFix’/image/view/viewzhuanpan.css:/components/zhuanpan/zhuanpan.wxss/.canvas-container{margin:0auto;position:relative;display:flex;align-items:center;justify-content:center;}.img-container{margin:0auto;position:absolute;display:flex;align-items:center;justify-content:center;left:0;top:0;z-index:10;}.gb-wheel-run{box-shadow:005rpx0rpxrgba(0,0,0,0.98);width:700rpx;height:700rpx;border-radius:50%;border:30rpxsolid#f1ecec;box-sizing:border-box;position:absolute;left:27rpx;top:-19rpx;opacity:0.7;}.gb-wheel-content{position:relative;margin:0auto;z-index:2;width:660rpx;height:660rpx;border-radius:50%;border:20rpxsolid#f1ecec;box-shadow:005rpx0rpxrgba(0,0,0,0.98);opacity:0.7;overflow:hidden;}.canvas-list{position:absolute;left:0;top:0;width:inherit;height:inherit;z-index:8;}.canvas-item2{position:absolute;left:0px;top:0;width:660rpx;height:328rpx;color:#e4370e;font-weight:bold;transform-origin:330rpx330rpx;overflow:hidden;}.canvas-item2-after{position:absolute;top:0;left:0;width:330rpx;height:330rpx;transform-origin:330rpx330rpx;opacity:1;}.gb-wheel-list{position:absolute;left:0;top:0;width:100%;height:100%;z-index:9;}.gb-wheel-item{position:absolute;left:0;top:0;width:100%;height:100%;color:#fff;text-shadow:01px1pxrgba(255,255,255,0.6);}.gb-wheel-icontent{position:relative;display:block;padding-top:50rpx;margin:0auto;text-align:center;transform-origin:50%328rpx;}zhuanpan.js://components/zhuanpan/zhuanpan.js//创建并返回内部audio上下文innerAudioContext对象conststart=wx.createInnerAudioContext();constmid=wx.createInnerAudioContext();conststop=wx.createInnerAudioContext();Component({options:{multipleSlots:true//在组件定义时的选项中启用多slot支持},/组件的属性列表用于组件自定义设置组件的对外属性/properties:{myProperty:{//属性名myProperty2:String,简化的定义方式type:String,//类型(必填),目前接受的类型包括:String,Number,Boolean,Object,Array,null(表示任意类型)value:”,//属性默认初始值(可选),如果未指定则会根据类型选择一个observer:function(newVal,oldVal,changedPath){//属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串,如:’_propertyChange’//通常newVal就是新设置的数据,oldVal是旧数据}},probability:{type:Boolean,//概率开关,默认false随机value:false},musicflg:{type:Boolean,//转盘声音开关,默认truevalue:true},fastJuedin:{type:Boolean,//快速转动转盘的开关,默认falsevalue:false},repeat:{type:Boolean,//重复抽取开关,默认falsevalue:false},size:{type:Number,//转盘大小,传入宽度即可value:600},zhuanpanArr:{//可以切换的转盘选项,支持多个type:Array,value:[{id:0,option:’转盘的标题名称’,awards:[{id:0,name:”最多17个选项”,//选项名color:’red’,//选项的背景颜色probability:10//概率0代表永远也转不到这个选项,数字越大概率也就越大},{id:1,name:”选项最多填13字”,//超过9个字时字体会变小点color:’green’,probability:10}]}]},//限制:最多17个选项,单个选项最多填10-13个字,多余部分会隐藏awardsConfig:{//默认的当前转盘选项type:Object,value:{option:’我的小决定?’,awards:[{id:0,name:”最多17个选项”,color:’red’,probability:0},{id:1,name:”选项最多填13字”,color:’green’,probability:0}],},observer:function(newVal,oldVal,changedPath){if(newVal){this.switchZhuanpan(newVal,true);}}}},/私有数据,组件的初始数据可用于模版渲染/data:{animationData:{},//转盘动画zhuanflg:false,//转盘是否可以点击切换的标志位fastTime:7600,//转盘快速转动的时间slowTime:3900,//转盘慢速转动的时间runDegs:0,//转盘旋转了多少圈timer:null,//清除转盘的时间clearTimeout(timer)block1:’block’,//控制显示或隐藏转盘中心的图片block2:’none’,block3:’none’,block4:’none’},//组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用setDatacreated:function(){},//组件生命周期函数,在组件实例进入页面节点树时执行attached:function(){console.log(‘===============attached===============’);start.src=’https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/start.mp3′;//转盘开始转动的音乐mid.src=’https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/mid.mp3′;//快速决定时,转盘开始转动的音乐stop.src=’https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/stop.mp3′;//转盘停止转动的音乐this.setData({awardsConfig:this.data.zhuanpanArr[0]})this.initAdards();},/组件的方法列表更新属性和数据的方法与更新页面数据的方法类似/methods:{/公有方法///判断值是否为空isNull(str){if(str==null||str==undefined||str==”){returntrue;}else{returnfalse;}},//初始化数据initAdards(){varthat=this,awardsConfig=that.data.awardsConfig;vart=awardsConfig.awards.length;//选项长度vare=1/t,i=360/t,r=i-90;for(varg=0;gt;g++){awardsConfig.awards[g].item2Deg=gi+90-i/2+”deg”;//当前下标360/长度+90-360/长度/2awardsConfig.awards[g].afterDeg=r+”deg”;awardsConfig.awards[g].opacity=’1′;}that.setData({turnNum:e,//页面的单位是turnawardsConfig:awardsConfig,})that._change();//向父组件传出当前转盘的初始数据},//重置转盘reset(){varthat=this,awardsConfig=that.data.awardsConfig;varanimation=wx.createAnimation({duration:1,timingFunction:”ease”});that.animation=animation;animation.rotate(0).step(),that.data.runDegs=0;that.setData({animationData:animation.export(),block3:’none’,block4:’block’})for(letxinawardsConfig.awards){awardsConfig.awards[x].opacity=’1′;}setTimeout(function(){that.setData({block1:’block’,block4:’none’,awardsConfig:awardsConfig,})},300)},//父组件需要切换当前转盘的选项//如果有需要切换不同转盘的选项时,可以调用这方法//data:转盘的数据//flag:当转盘在转动过程中如果你想停止的话,可以传个true值,默认可不传switchZhuanpan(data,flag){this.setData({awardsConfig:data,block1:’block’,block1:’none’,block3:’none’,block4:’none’,zhuanflg:false,})this.initAdards();if(flag){this.reset();clearTimeout(this.data.timer);start.stop();mid.stop();stop.stop();wx.removeStorageSync(‘repeatArr’);}},/内部私有方法建议以下划线开头triggerEvent用于触发事件,过triggerEvent来给父组件传递信息的写法:this.triggerEvent(‘cancelEvent’,{num:1})//可以将num通过参数的形式传递给父组件///GO转盘开始转动_zhuan(){varthat=this,awardsConfig=that.data.awardsConfig,runDegs=that.data.runDegs;//是无符号移位运算符varr=Math.random()awardsConfig.awards.length0,runNum=8;/=============不重复抽取=============/if(that.data.repeat){r=that._queryRepeat(r);}else{wx.removeStorageSync(‘repeatArr’);console.log(‘是否开启了概率???’,that.data.probability);//开启概率probability这属性必须要传个tureif(that.data.probability){r=that._openProbability();}}/=============不重复抽取=============/console.log(‘当前答案选项的下标=====’,r);setTimeout(function(){//转盘开始转动音乐that.data.musicflg?that.data.fastJuedin?mid.play():start.play():”;//要转多少度degrunDegs=runDegs||0,runDegs=runDegs+(360-runDegs%360)+(2160-r(360/awardsConfig.awards.length));varanimation=wx.createAnimation({duration:that.data.fastJuedin?that.data.slowTime:that.data.fastTime,timingFunction:”ease”});that.animation=animation;//这动画执行的是差值//如果第一次写rotate(360)那么第二次再写rotate(360)将不起效果animation.rotate(runDegs).step(),0==r&&(runDegs=0);that.setData({animationData:animation.export(),block1:’none’,block2:’block’,zhuanflg:true,})that._setatZhuan(true);},100);that.setData({timer:setTimeout(function(){//转盘停止后,答案区域高亮显示,其他区域增加透明度for(letxinawardsConfig.awards){if(x!=r){awardsConfig.awards[x].opacity=’0.3′;}else{awardsConfig.awards[x].opacity=’1′;}}//转盘停止后的音乐!that.data.musicflg?”:stop.play();that.setData({animationData:{},s_awards:awardsConfig.awards[r].name,//最终选中的结果awardsConfig:awardsConfig,block2:’none’,block3:’block’,zhuanflg:false,})that._myAwards();that._setatZhuan(false);},that.data.fastJuedin?that.data.slowTime:that.data.fastTime)})},//开启概率//传的数越大概率越大//传入0的话就永远摇不到这个选项_openProbability(){varthat=this,awards=that.data.awardsConfig.awards,arr=[];//5,5,20,10,30,30,0for(letiinawards){if(awards[i].probability!=0){for(varx=0;xawards[i].probability;x++){//把当前的概率数字以当前选项下标的形式都添加都空数组中,然后随机这个数组arr.push(i);}}}vars=Math.floor(Math.random()arr.length);returnarr[s];},//不重复抽取//r:随机数当前选项进行随机_queryRepeat(r){varthat=this,flag=true,repeatArr=wx.getStorageSync(‘repeatArr’),repeatArr2=[],awardsConfig=that.data.awardsConfig;if(that.isNull(repeatArr)){repeatArr2.push(r),wx.setStorageSync(‘repeatArr’,repeatArr2);returnr;}else{varlen=awardsConfig.awards.length,r=Math.random()len0;for(letiinrepeatArr){if(r==repeatArr[i]){flag=false;if(repeatArr.length==len){wx.removeStorageSync(‘repeatArr’);repeatArr2.push(r),wx.setStorageSync(‘repeatArr’,repeatArr2);returnr;}else{returnthat._queryRepeat();//递归调用}}}if(flag){repeatArr.push(r),wx.setStorageSync(‘repeatArr’,repeatArr);returnr;}}},//初始化数据时向外传的参_change(){this.triggerEvent(‘myData’,this.data.awardsConfig);//向父组件传出当前转盘的数组数据},//当前转盘的结果_myAwards(){this.triggerEvent(‘myAwards’,this.data.s_awards)},//转盘开始转动或者结速转动后的要传的值_setatZhuan(e){this.triggerEvent(‘startZhuan’,e);},}})以上就是主要的代码了,下面教你们怎么使用:在要引用组件的页面的json文件中,写上:{“usingComponents”:{“zhuanpan”:”/components/zhuanpan/zhuanpan”}}这里的“zhuanpan”,就是你引用到页面时标签的名字,后面是组件的绝对路径然后在wxml页面,引用:viewstyle=’margin:20px0;text-align:center;width:100%;’我帅吗?/view!–引用组件↓↓↓–zhuanpanid=’zhuanpan’bind:myData=’getData’bind:myAwards=”getAwards”bind:startZhuan=”startZhuan”size='{{size}}’musicflg='{{musicflg}}’fastJuedin='{{fastJuedin}}’repeat='{{repeat}}’zhuanpanArr='{{xiaojuedingArr}}’awardsConfig='{{awardsConfig}}’/zhuanpan!–引用组件↑↑↑–viewstyle=’width:100%;margin:5px;text-align:center;’转盘声音switchtype=’switch’bindchange=”switch1Change1″/不重复抽取switchtype=’switch’bindchange=”switch1Change2″//viewviewstyle=’width:100%;margin:5px;text-align:center;’快速决定switchtype=’switch’bindchange=”switch1Change3″/概率switchtype=’switch’bindchange=”switch1Change4″//view这些自定义属性不一定要全部填写,有需要用到的时候在填,这样就能简单的使用了,因为我在转盘组件的构造器中都有赋予初始值。先来看下只有单独一个标签时候的效果:像这种不用闭合标签的写法也是可以的哈~~zhuanpan/这样就就算引用成功啦!只是有点丑,我们可以在js文件中在给这些属性赋予初始值下,在设置几个开关方法供你们参考怎么使用:Page({data:{size:600,//转盘大小,musicflg:false,//声音fastJuedin:false,//快速决定repeat:false,//不重复抽取probability:false,//概率s_awards:”,//结果option:’标题’,//转盘的总数据,想添加多个可以往这数组里添加一条格式一样的数据zhuanpanArr:[{id:0,option:’我帅吗?’,//转盘的标题名称awards:[{id:0,//id递增name:”帅”,//选项名超过9个字时字体会变小点大于13个数时会隐藏掉超出的color:’#FFA827′,//选项的背景颜色probability:0//概率0代表永远也转不到这个选项,数字越大概率也就越大,data中的probability属性设置为true时是才生效,这属性也必须填写,不填写会出错},{id:1,name:”很帅”,color:’#AA47BC’,probability:10},{id:2,name:”贼帅”,color:’#42A5F6′,probability:10},{id:3,name:”非常帅”,color:’#66BB6A’,probability:10},{id:4,name:”超级帅”,color:’#FFA500′,probability:100},{id:4,name:”宇宙无敌第一帅”,color:’#FF4500′,probability:300}]}],//更改数据可以更改这属性,格式要像下面这样写才行awardsConfig:{option:’我帅吗?’,//转盘的标题名称awards:[{id:0,//id递增name:”帅”,//选项名超过9个字时字体会变小点大于13个数时会隐藏掉超出的color:’#FFA827′,//选项的背景颜色probability:0//概率0代表永远也转不到这个选项,数字越大概率也就越大,data中的probability属性设置为true时是才生效,这属性也必须填写,不填写会出错},{id:1,name:”很帅”,color:’#AA47BC’,probability:10},{id:2,name:”贼帅”,color:’#42A5F6′,probability:10},{id:3,name:”非常帅”,color:’#66BB6A’,probability:10},{id:4,name:”超级帅”,color:’#FFA500′,probability:100},{id:4,name:”宇宙无敌第一帅”,color:’#FF4500′,probability:300}]}},//接收当前转盘初始化时传来的参数getData(e){this.setData({option:e.detail.option})},//接收当前转盘结束后的答案选项getAwards(e){wx.showToast({title:e.detail,icon:’none’})this.setData({s_awards:e.detail,})},//开始转动或者结束转动startZhuan(e){this.setData({zhuanflg:e.detail?true:false})},//切换转盘选项switchZhuanpan(e){//当转盘停止时才执行切换转盘if(!this.data.zhuanflg){varidx=e.currentTarget.dataset.idx,zhuanpanArr=this.data.zhuanpanArr,obj={};for(letiinzhuanpanArr){if(this.data.option!=zhuanpanArr[i].option&&zhuanpanArr[i].id==idx){obj.option=zhuanpanArr[i].option;obj.awards=zhuanpanArr[i].awards;this.setData({awardsConfig:obj//其实默认要更改当前转盘的数据要传个这个对象,才有效果})break;}}}},//转盘声音switch1Change1(e){varvalue=e.detail.value;if(this.data.zhuanflg){wx.showToast({title:’当转盘停止转动后才有效’,icon:’none’})return;}else{this.setData({musicflg:value})}},//不重复抽取switch1Change2(e){varvalue=e.detail.value;if(this.data.zhuanflg){wx.showToast({title:’当转盘停止转动后才有效’,icon:’none’})return;}else{this.setData({repeat:value})}},//快速决定switch1Change3(e){varvalue=e.detail.value;if(this.data.zhuanflg){wx.showToast({title:’当转盘停止转动后才有效’,icon:’none’})return;}else{this.setData({fastJuedin:value})}},//概率==如果不重复抽取开启的话概率是无效的switch1Change4(e){varvalue=e.detail.value;if(this.data.zhuanflg){wx.showToast({title:’当转盘停止转动后才有效’,icon:’none’})return;}else{this.setData({probability:value})}},onLoad:function(){//实例化组件对象,这样有需要时就能调用组件内的方法this.zhuanpan=this.selectComponent(“#zhuanpan”);//可以这样调用示例:this.zhuanpan.switchZhuanpan(data);//上面这方法可用来切换转盘选项数据,参数可以看组件构造器中的switchZhuanpan方法}})注意:初始或切换转盘数据,都要像我上面data中的awardsConfig这种格式来定义最终引用后的效果图:我帅吗?哈哈哈~~~我把‘宇宙无敌第一帅’概率设为300,其他值设的很小,所以呢很经常转到这个结果。主要注释都写在文件里了,还不是很懂的也可以下方留言哦!

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏