『组件』大转盘、刮刮乐、老虎机……

组件

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。

什么是组件:

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格的样式。
  • 一个组件通常包括开始标签和结束标签,属性来修饰这个组件,内容在两个标签之内。
<tagname property="value">
  Content goes here ...
</tagname>

官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/

本期给大家带来的是7个微信小程序精美组件。

大转盘组件

  • WXSS中引用样式:@import './utils/dial.wxss'
  • WXML中引用结构:<import src="./utils/dial.wxml"/>
  • JS中引用:import Dial from './utils/dial.js'

JS中实例调用:

  let dial = new Dial(this, {
     areaNumber: 8,   //抽奖间隔
     speed: 16,       //转动速度
     awardNumer: 2,    //中奖区域从1开始
     mode: 1,    //1是指针旋转,2为转盘旋转
     callback: () => {       //运动停止回调  
     }
   })

刮刮乐组件

  • WXML中引用结构:<import src="./utils/scratch.wxml"/>
  • JS中引用:import Scratch from './utils/scratch.js'

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 做擦除处理

老虎机组件

  • WXSS中引用样式:@import './utils/machine.wxss'
  • WXML中引用结构:<import src="./utils/machine.wxml"/>
  • JS中引用:import Machine from './utils/machine.js'

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: () => {         //停止时回调        
     }      
   })

跑马灯组件

  • WXSS中引用样式:@import './utils/marquee.wxss'
  • WXML中引用结构:<import src="./utils/marquee.wxml"/>
  • JS中引用:import Marquee from './utils/marquee.js'

JS中实例调用:

 this.marquee = new Marquee(this, {
    len: 9, //宫格个数
    ret: 9, //抽奖结果对应值1~9
    speed: 100,  // 速度值
    callback: () => {      //结束回调    
    }            
  })

九宫格翻纸牌组件

  • WXSS中引用样式:@import './utils/card.wxss'
  • WXML中引用结构:<import src="./utils/card.wxml"/>
  • JS中引用:import Card from './utils/card.js'

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) => {     //结束回调, 参数对应宫格索引,对应奖项    
   }
 })

摇一摇组件

  • WXSS中引用样式:@import './utils/shake.wxss'
  • WXML中引用结构:<import src="./utils/shake.wxml"/>
  • JS中引用:import Shake from './utils/shake.js'

JS中实例调用:

this.shake = new Shake(this, {
    shakeThreshold: 70, //阈值
    callback: () => {
 
    }            
  })

手势解锁组件

  • WXSS中引用样式:@import './utils/lock.wxss'
  • WXML中引用结构:<import src="./utils/lock.wxml"/>
  • JS中引用:import Lock from './utils/lock.js'

JS中实例调用:

this.lock = new Lock(this, {
   canvasWidth: 300,
   canvasHeight: 300,
   canvasId: 'canvasLock',
   drawColor: '#3985ff'        
 })

本文是github作者pfan123带来的精彩分享,项目地址:https://github.com/pfan123/wx-market

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2017-09-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Android动画深入分析

动画分类 Android动画可以分3种:View动画,帧动画和属性动画;属性动画为API11的新特性,在低版本是无法直接使用属性动画的,但可以用nineoldA...

234100
来自专栏everhad

android自定义控件一站式入门

TODO: 待整理 自定义控件 Android系统提供了一系列UI相关的类来帮助我们构造app的界面,以及完成交互的处理。 一般的,所有可以在窗口中被展示的U...

34050
来自专栏Android常用基础

自定义View(三)-动画-属性动画ValueAnimator

之前我们把视图动画(也就是View动画)分析的差不多了,当然帧动画我们没有讲解,其实帧动画比较简单,就是通过顺序播放一系列的图像从而产生动画效果,可以简单理解为...

45020
来自专栏欧阳大哥的轮子

Android中的各种Drawable类详解

图形图像的绘制需要在画布上进行操作和处理,但是绘制需要了解很多细节以及可能要进行一些复杂的处理,这样就会增加学习和使用的成本,因此系统提供了一个被称之为Draw...

17320
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

3K80
来自专栏Android知识点总结

D1-从N角星开始论述自定义控件

7620
来自专栏Nian糕的私人厨房

Canvas 让你的屏幕下一场 Hacker 流星雨吧

今天来分享一个很狂拽酷炫吊炸天的特效,其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图(手动滑稽),实现起来很简单,跟着动手一起来吧

9820
来自专栏一“技”之长

iOS开发CoreAnimation解读之四——Layer层动画内容

        通过前几篇博客的介绍,我们可以了解到layer层可以设置许多与控件UI相关的属性,并且对于iOS开发,UIView层的属性是会映射到CALaye...

10110
来自专栏老马寒门IT

01-移动端开发教程-CSS3新特性

1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红。对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端...

20370
来自专栏黒之染开发日记

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

41720

扫码关注云+社区

领取腾讯云代金券