微信小程序 摇一摇抽奖简单实例实现代码


Posted in Javascript onJanuary 09, 2017

微信小程序 摇一摇抽奖

微信小程序目录

为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录。

首先看下根目录下的app.json的文件,可以看到在”pages”的数组里,里面配置了每个界面,且包含了每个界面文件的目录

微信小程序 摇一摇抽奖简单实例实现代码 

我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件。

微信小程序 摇一摇抽奖简单实例实现代码 

接下来看一下logs文件夹,在logs文件夹中比index文件夹中多出了一个logs.json的文件,logs.json这个文件配置了一个界面的title的信息。

为了更好的理解项目的结构,我们来一张gif图。
微信小程序 摇一摇抽奖简单实例实现代码

摇一摇项目实例

我们首先看一下测试效果
微信小程序 摇一摇抽奖简单实例实现代码

添加图片资源

微信小程序 摇一摇抽奖简单实例实现代码

index.js

之前说过这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API,相当于我们写移动端时候的逻辑代码。

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  circleList: [],//圆点数组
  awardList: [],//奖品数组
  colorCircleFirst: '#FFDF2F',//圆点颜色1
  colorCircleSecond: '#FE4D32',//圆点颜色2
  colorAwardDefault: '#F5F0FC',//奖品默认颜色
  colorAwardSelect: '#ffe400',//奖品选中颜色
  indexSelect: 0,//被选中的奖品index
  isRunning: false,//是否正在抽奖
  imageAward: [
   '../../images/1.jpg',
   '../../images/2.jpg',
   '../../images/3.jpg',
   '../../images/4.jpg',
   '../../images/5.jpg',
   '../../images/6.jpg',
   '../../images/7.jpg',
   '../../images/8.jpg',
  ],//奖品图片数组
 },

 onLoad: function () {
  var _this = this;
  //圆点设置
  var leftCircle = 7.5;
  var topCircle = 7.5;
  var circleList = [];
  for (var i = 0; i < 24; i++) {
   if (i == 0) {
    topCircle = 15;
    leftCircle = 15;
   } else if (i < 6) {
    topCircle = 7.5;
    leftCircle = leftCircle + 102.5;
   } else if (i == 6) {
    topCircle = 15
    leftCircle = 620;
   } else if (i < 12) {
    topCircle = topCircle + 94;
    leftCircle = 620;
   } else if (i == 12) {
    topCircle = 565;
    leftCircle = 620;
   } else if (i < 18) {
    topCircle = 570;
    leftCircle = leftCircle - 102.5;
   } else if (i == 18) {
    topCircle = 565;
    leftCircle = 15;
   } else if (i < 24) {
    topCircle = topCircle - 94;
    leftCircle = 7.5;
   } else {
    return
   }
   circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
  }
  this.setData({
   circleList: circleList
  })
  //圆点闪烁
  setInterval(function () {
   if (_this.data.colorCircleFirst == '#FFDF2F') {
    _this.setData({
     colorCircleFirst: '#FE4D32',
     colorCircleSecond: '#FFDF2F',
    })
   } else {
    _this.setData({
     colorCircleFirst: '#FFDF2F',
     colorCircleSecond: '#FE4D32',
    })
   }
  }, 500)
  //奖品item设置
  var awardList = [];
  //间距,怎么顺眼怎么设置吧.
  var topAward = 25;
  var leftAward = 25;
  for (var j = 0; j < 8; j++) {
   if (j == 0) {
    topAward = 25;
    leftAward = 25;
   } else if (j < 3) {
    topAward = topAward;
    //166.6666是宽.15是间距.下同
    leftAward = leftAward + 166.6666 + 15;
   } else if (j < 5) {
    leftAward = leftAward;
    //150是高,15是间距,下同
    topAward = topAward + 150 + 15;
   } else if (j < 7) {
    leftAward = leftAward - 166.6666 - 15;
    topAward = topAward;
   } else if (j < 8) {
    leftAward = leftAward;
    topAward = topAward - 150 - 15;
   }
   var imageAward = this.data.imageAward[j];
   awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
  }
  this.setData({
   awardList: awardList
  })
 },
 //开始游戏
 startGame: function () {
  if (this.data.isRunning) return
  this.setData({
   isRunning: true
  })
  var _this = this;
  var indexSelect = 0
  var i = 0;
  var timer = setInterval(function () {
   indexSelect++;
   //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
   i += 30;
   if (i > 1000) {
    //去除循环
    clearInterval(timer)
    //获奖提示

    wx.showModal({
     title: '恭喜您',
     content: '获得了第' + (_this.data.indexSelect + 1) + "个优惠券",
     showCancel: false,//去掉取消按钮
     success: function (res) {
      if (res.confirm) {
       _this.setData({
        isRunning: false
       })
      }
     }
    })
   }
   indexSelect = indexSelect % 8;
   _this.setData({
    indexSelect: indexSelect
   })
  }, (200 + i))
 }
})

index.json

这个文件是配置文件。这里我们不需要配置。

index.wxss

index.wxss 是整个小程序的样式表,如这个摇奖对应得摇一摇样式。对css熟悉的肯定不会陌生。

/**index.wxss**/

.container-out {
 height: 600rpx;
 width: 650rpx;
 background-color: #b136b9;
 margin: 100rpx auto;
 border-radius: 40rpx;
 box-shadow: 0 10px 0 #871a8e;
 position: relative;
}

.container-in {
 width: 580rpx;
 height: 530rpx;
 background-color: #871a8e;
 border-radius: 40rpx;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}

/**小圆球
box-shadow: inset 3px 3px 3px #fff2af;*/

.circle {
 position: absolute;
 display: block;
 border-radius: 50%;
 height: 20rpx;
 width: 20rpx;
}

.content-out {
 position: absolute;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #f5f0fc;
 border-radius: 15rpx;
 box-shadow: 0 5px 0 #d87fde;
}

/**居中 加粗*/

.start-btn {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 border-radius: 15rpx;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #ffe400;
 box-shadow: 0 5px 0 #e7930a;
 color: #f6251e;
 text-align: center;
 font-size: 55rpx;
 font-weight: bolder;
 line-height: 150rpx;
}

.award-image {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 height: 140rpx;
 width: 130rpx;
}

index.wxml

index.wxml 是页面的结构文件,如果有需要就需要配置。这里大家可以参照项目的文档说明

<!--index.wxml-->
<view class="container-out">
 <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>
 <view class="container-in">
  <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
   <image class="award-image" src="{{item.imageAward}}"></image>
  </view>
  <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view>
 </view>
</view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 #Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 #Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 #Javascript
jquery实现多次上传同一张图片
Jan 09 #Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 #Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 #Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
打造计数器DIY三步曲(中)
2006/10/09 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python 产生token及token验证的方法
2018/12/26 Python
Python的高阶函数用法实例分析
2019/04/11 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python配置文件写入过程详解
2019/10/19 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Pycharm Git 设置方法
2020/09/15 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
个人简历自我评价
2014/01/06 职场文书
大学军训感言400字
2014/03/11 职场文书
我的长征观后感
2015/06/09 职场文书
2016公司年会主持词
2015/07/01 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python