组件
框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
什么是组件:
<tagname property="value">
Content goes here ...
</tagname>
官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/
本期给大家带来的是7个微信小程序精美组件。
大转盘组件
JS中实例调用:
let dial = new Dial(this, {
areaNumber: 8, //抽奖间隔
speed: 16, //转动速度
awardNumer: 2, //中奖区域从1开始
mode: 1, //1是指针旋转,2为转盘旋转
callback: () => { //运动停止回调
}
})
刮刮乐组件
JS中实例调用:
this.scratch = new Scratch(this, {
canvasWidth: 197, //画布宽带
canvasHeight: 72, //画布高度
imageResource: './images/placeholder.png', //画布背景
r: 4, //笔触半径
awardTxt: '中大奖', //底部抽奖文字
awardTxtColor: "#1AAD16", //画布颜色
awardTxtFontSize: "24px", //文字字体大小
callback: () => { //清除画布回调
}
})
注意:小程序无globalCompositeOperation = 'destination-out'属性,所以采用 clearRect 做擦除处理
老虎机组件
JS中实例调用:
this.machine = new Machine(this, {
height: 40, //单个数字高度
len: 10, //单个项目数字个数
transY1: 0,
num1: 3, //结束数字
transY2: 0,
num2: 0, //结束数字
transY3: 0,
num3: 0, //结束数字
transY4: 0,
num4: 1, //结束数字
speed: 24, //速度
callback: () => { //停止时回调
}
})
跑马灯组件
JS中实例调用:
this.marquee = new Marquee(this, {
len: 9, //宫格个数
ret: 9, //抽奖结果对应值1~9
speed: 100, // 速度值
callback: () => { //结束回调
}
})
九宫格翻纸牌组件
JS中实例调用:
this.card = new Card(this,{
data: [ //宫格信息,内联样式、是否是反面、是否运动、对应奖项
{inlineStyle: '', isBack: false, isMove: false, award: "一等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "二等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "三等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "四等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "五等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "六等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "七等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "八等奖"},
{inlineStyle: '', isBack: false, isMove: false, award: "九等奖"}
], callback: (idx, award) => { //结束回调, 参数对应宫格索引,对应奖项
}
})
摇一摇组件
JS中实例调用:
this.shake = new Shake(this, {
shakeThreshold: 70, //阈值
callback: () => {
}
})
手势解锁组件
JS中实例调用:
this.lock = new Lock(this, {
canvasWidth: 300,
canvasHeight: 300,
canvasId: 'canvasLock',
drawColor: '#3985ff'
})
本文是github作者pfan123带来的精彩分享,项目地址:https://github.com/pfan123/wx-market