专栏首页极乐技术社区『组件』大转盘、刮刮乐、老虎机……

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

组件

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

什么是组件:

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格的样式。
  • 一个组件通常包括开始标签和结束标签,属性来修饰这个组件,内容在两个标签之内。
<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),作者:pfan123

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 五个套路看懂微信小程序开发(上)

    你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

    极乐君
  • 微信小程序之生物识别

    1、如有遇到新问题,可以在下方留言或者加QQ群437729329 进行咨询。 2、版权说明:该文章为小程序社区(www.wxapp-union.com/)版主T...

    极乐君
  • 微信小游戏初体验

    前言 上周【跳一跳】小游戏刷遍了朋友圈,也代表了微信小程序拥有了搭载游戏的功能(早该往这方面发展了,这才是应该有的形态嘛)。作为一个前端er,我的大刀早已经饥渴...

    极乐君
  • 详解Java动态代理机制(二)----cglib实现动态代理

         上篇文章的结尾我们介绍了普通的jdk实现动态代理的主要不足在于:它只能代理实现了接口的类,如果一个类没有继承于任何的接口,那么就不能代理该类,原因是我...

    Single
  • RabbitMQ如何保证消息99.99%被发送成功?

    要想保证消息不丢失,首先我们得保证生产者能成功的将消息发送到RabbitMQ服务器。

    Java_老男孩
  • 玩Android客户端(1)——搭建主页面

    最近在学Flutter,想着画点时间做个app,就做玩Android,可以利用现有的APi进行操作。 第一步:搭建主页面,如下:

    用户1108631
  • Java线程池---getTask方法解析

    /** * Performs blocking or timed wait for a task, depending on * current confi...

    None_Ling
  • Vue 绑定简单分析实现

    使用js es6 中 Object.defineProperty为我们自己定义的VM创建示例。同时这个方法通过提供了set.get方法的触发我们的监听事件。

    deep_sadness
  • 写一个简单的轮播组件

    柴小智
  • 用js模拟一下操作系统

    theanarkh

扫码关注云+社区

领取腾讯云代金券