如何实现一个小程序版本的老虎机

时间  2019-11-29
标签 如何 实现 一个 程序 版本 老虎机 繁體版
原文   原文链接
运营：我们最近须要拉新用户，作个简单点的活动，就老虎机形式吧。
产品：老虎机的话比较简单，网上demo那么多随便拷贝拷贝就能用啦。
开发：来来来，你来作。

进入正题：

网上老虎机的插件挺多的，实现原理也各不同， 而后这里主要提下本身当初作老虎机抽奖活动时想到的一个原理：javascript

划重点啦：
css的 background-position属性是设置背景图像的起始位置，那么咱们控制背景图在0-3秒的时间内显示不一样的位置，再加上过渡动画就能够达到老虎机旋转的效果

第一个版本的在 这里 vue的版本 看下效果视频（第二个版本） 视频转的gif有十多兆，放这里有点卡。就上传视频了。 视频效果 该版本定时4秒停再弹窗，比较突兀，未作到老虎机底部滚动中止后再显示弹窗。css

今天要说的是第三种方案（实现底部滚动中止后显示弹窗且跟后端返回的中奖码一致） 直接上代码html

WXML
<view class="box-container">
  <view class="box-tips">{{boxTips}}</view>
  <view class="wheel-boxs">
    <view class="box-list" wx:for="{{boxStatus}}" wx:key="index">
      <view class="box-text" wx:if="{{!isStart}}">{{item}}</view>
      <view class="box-image" style="background: url('https://qiniu-image.qtshe.com/20181113wheels.png'); background-position-y: {{isStart ? ((16 - item) * 100) + 1500 + 'rpx' : 0}}; background-size: 100% 100%; transition-property: {{isStart ? 'all' : 'none'}}; transition-delay: {{(index + 1) * 100 + 'ms'}}; transition-duration: 3.5s;">
     </view>
     {{item}}
    </view>
    </view>
  <view class="start-box">
   <form bindsubmit="startDraw" report-submit="true" wx:if="{{pageVo.remainCount !== 0}}">
       <button class="start-draw" formType="submit" />
   </form>
  </view>
  <view class="last-tips">当前剩余 <text>{{pageVo.remainCount || 0}}</text> 次攒码机会</view>
</view>
复制代码
WXSS
.box-container {
  width: 680rpx;
  height: 380rpx;
  background: url(https://qiniu-image.qtshe.com/20190227goddess_02.png) no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  z-index: 10;
  margin: auto;
  overflow: hidden;
}    
.wheel-boxs {
  width: 680rpx;
  padding: 0 80rpx;
  margin-top: 16rpx;
}    
.box-list {
  width: 90rpx;
  height: 100rpx;
  background: url(https://qiniu-image.qtshe.com/20190227goddess_11.png) no-repeat center center;
  background-size: 100% 100%;
  display: inline-block;
  margin-right: 16rpx;
  overflow: hidden;
}    
.box-list:last-child {
  margin-right: 0;
}    
.box-tips {
  width: 500rpx;
  height: 54rpx;
  background: url(https://qiniu-image.qtshe.com/20190227goddess_10.png) no-repeat center center;
  overflow: hidden;
  background-size: 100% 100%;
  margin: 20rpx auto;
  color: #000;
  font-size: 24rpx;
  text-align: center;
  line-height: 54rpx;
  margin-top: 36rpx;
}    
.box-text {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 44rpx;
  color: #f8294a;
  font-weight: 600;
}    
.box-image {
  height: 1500%;
}    
.start-box {
  width: 100%;
  text-align: center;
  margin: 16rpx 0 8rpx;
}    
.start-box button {
  width: 290rpx;
  height: 76rpx;
  background: url(https://qiniu-image.qtshe.com/20190227startDraw.png) no-repeat center center;
  background-size: 290rpx 76rpx;
  margin: 0 auto;
}
.start-box .start-draw {
  width: 290rpx;
  height: 76rpx;
  background: url(https://qiniu-image.qtshe.com/20190227startDraw.png) no-repeat center center;
  background-size: 290rpx 76rpx;
  margin: 0 auto;
}
复制代码
JS
const app = getApp()
Page({
  data: {
    isStart: false, //是否开始抽奖
    isDialog: false, //是否显示中奖弹窗
    dialogId: 1, //显示第几个中奖弹窗
    boxTips: '本场女神码将在3月8日 19:00截止领取', //页面中部文案显示
    typeTips: '3月8日20点开奖哦！',
    boxStatus: ['码', '上', '有', '红', '包'], //五个抽奖默认文案
    results: [], //抽中的码
  },
  onLoad() {
      this.initData()
  },
  //显隐藏中奖弹窗或规则弹窗等
  handleModel() {
    this.setData({
      isDialog: !this.data.isDialog
    })
  },
  onShow() {},
  //初始化页面数据
  initData() {
    let postData = {
      url: 'xxx'
    }
    app.ajax(postData).then((res) => {
      if (res.success) {
        this.setData({
          pageVo: res.data  //页面全部数据
        })
      } else {
        util.toast( res.msg || '团团开小差啦，请稍后再试')
      }
    }, () => {
      wx.hideLoading()
      util.toast( '团团开小差啦，请稍后再试')
    })
  },
  //收集FormId 发模版消息用
  addFormId(e) {
    if (e.detail.formId !== 'the formId is a mock one') { //开发者工具上显示这段文案，过滤掉
      let formData = {
        url: 'xxx',
        data: {
          formId: e.detail.formId,
          openId: wx.getStorageSync('openId') || ''
        }
      }
      app.ajax(formData)
    }
  },
  //开始抽奖
  startDraw(e) {
  //这里能够作下节流
    this.addFormId(e)  //收集formId
    let postData = {
      url: 'xxx'
    }
    app.ajax(postData).then((res) => {
      if (res.success) {
        this.setData({
          isStart: true,
          results: res.data.result.split(','), //假如后端返回[1,2,3,4,5]
          dialogId: res.data.special ? 3 : 2  //3为彩蛋状态，2为普通状态
        })
      } else {
        util.toast(res.msg || '团团开小差啦，请稍后再试')
      }
    }, () => {
      wx.hideLoading()
      util.toast( '团团开小差啦，请稍后再试')
    })
  },   
  onShareAppMessage() {
    return {
      title: '码上有红包！点我瓜分10万女神节礼金！',
      path: '/activity/xxx/xxx',
      imageUrl: 'https://qiniu-image.qtshe.com/20190227goddess-share.png'
    }
  }
})
复制代码

最后完整的实现效果在这里： 点我查看完整的视频效果前端

注意两个点：vue

  • 旋转的背景图是雪碧图。我这里用到的是这张图可供参考html5

  • 控制好图的位移单位，须要计算下，这样才可让后端返回的值与你的图相匹配。我这里是15个icon因此计算方式以下java

    <view class="box-image" style=" background: url('https://qiniu-image.qtshe.com/20181113wheels.png'); background-position-y: {{isStart ? ((16 - item) * 100) + 1500 + 'rpx' : 0}}; background-size: 100% 100%; transition-property: {{isStart ? 'all' : 'none'}}; transition-delay: {{(index + 1) * 100 + 'ms'}}; transition-duration: 3.5s;">
</view>
复制代码

这里能够封装成自定义组件，传入图片以及数量便可。后面若是有再用到 我会封装下再发出来。node

最后说下弹窗显示的图的匹配方法,根据图片大小计算，比较麻烦：react

WXML
<view class="ci-wrapper">
    <view wx:if="{{icontype ==='nomal'}}" class="icon-default icon-nomal" style=" background-position-y: {{(-24 - 117.86 * (typeId - 1)) + 'rpx'}};">
    </view>
    <view wx:else class="icon-default icon-fade" style=" background-position-y: {{(-20 - 110.73 * (typeId - 1)) + 'rpx'}}; ">
    </view>
 </view>
复制代码
WXSS
.icon-default {
   width: 70rpx;
   height: 70rpx;
   background-repeat: no-repeat;  
 }
 .icon-nomal {
   background-image: url(https://qiniu-image.qtshe.com/20181113wheels.png);
   background-position-x: -17rpx;
    background-size: 100rpx 1768rpx
 }
 .icon-fade {
   background-image: url(https://qiniu-image.qtshe.com/20181113wheels_fade.png);
   background-size: 110rpx 1661rpx;
   background-position-x: -18rpx;
 }
复制代码
JS
Component({
    properties: {
      icontype: {
        type: String,
        value: "nomal"
      },
      iconid: {
        type: Number,
        value: 1,
        observer(newVal, oldVal) {
          this.setData({ typeId: newVal });
        }
      }
    },
    data: {
      nomalOrigin: {
         x: -17,
         y: -24
      },
      fadeOrigin: {
        x: -17,
        y: -24
      },
      typeId: 1
    }
  })
复制代码

至于引用的的地方嘛，就这样操做(resultList为中奖数字的数组)：webpack

<code-icon wx:for="{{resultList}}" icontype="nomal" iconid="{{item}}" wx:key="{{index}}"></code-icon>
复制代码

以上就是一个完整小程序的老虎机实现方案，有什么优化点你们能够指出来。

最后写了个代码片断：developers.weixin.qq.com/s/1k5eSnmh7…

最后

招聘走一波：

招聘岗位：前端架构师/技术leader 职位描述：

一、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提高研发效率，保障线上产品质量 二、构建H5/PC应用、小程序等基础设施，主导构建效率工具平台，指导落实解决方案 三、持续优化前端页面性能，维护前端代码规范，钻研各类前沿技术和创新交互，加强用户体验、开拓前端能力边界 四、对所负责的技术项目有至少1年的清晰规划，并设定关键目标节点

职位要求： 一、至少3年的一线互联网前端开发经验 二、在前端性能优化方面有深刻研究 三、对前端组件化、模块化、工程化有深刻的看法和实践 四、有node.js产品研发经验，熟悉服务器端开发技术 五、沟通能力强，责任心强，思惟逻辑性强 六、有github项目经验者优先，请附上github或我的博客地址

招聘岗位： 资深前端开发工程师 职位描述：

一、负责前端模块（PC、移动、小程序）的重要方案设计与研发 二、研究和探索创新的开发思路和前端技术，优化前端框架、设计方案，提升前端的开发交付效率。 三、理解产品业务的基础上，提高产品用户体验，技术驱动业务发展。 四、按期组织主题分享，活跃技术氛围，带动组员提高技术能力

任职资格与条件要求描述 一、对 MVC/MVMM 有必定的理解，至少熟练掌握一个或多个前端框架（React、Vue等） 二、代码结构清晰，javascript基础扎实，精通任意一门前端MV*框架，如Vue、React等 三、熟悉 HTTP 协议，熟悉 Web 应用的性能优化，监控，分析方法 四、沟通能力强，责任心强，思惟逻辑性强

招聘岗位： 高级前端开发工程师 职位描述：

一、根据产品需求和设计完成前端页面代码，实现交互效果 二、与后台工程师协做，完成数据交互、动态信息展示 三、维护及优化网站前端页面执行性能和加载性能，优化前端代码规范 四、可以有效地解决实际开发问题，与后台技术开发保持良好沟通，快速理解、消化各方需求，并落实为具体的开发工做

职位要求：

一、熟练运用html5/css3布局，具有必定的审美能力和观察能力，能快速精确的还原设计稿(PS/Sketch)，有移动端项目开发经验 二、代码结构清晰，javascript基础扎实，熟悉掌握任意一门前端MV*框架，如vueJS、reactJS等 三、对前端组件化、模块化、工程化有深刻的看法和实践 四、熟悉前端构建工具基本用法（webpack、gulp、grunt） 五、熟悉CSS预处理LESS/SASS等 六、有github项目经验者优先，请附上github或我的博客地址

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程