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


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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
Node.js Buffer用法解读
May 18 Javascript
vue ssr 指南详读
Jun 29 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 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
discuz的php防止sql注入函数
2011/01/17 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
Express.JS使用详解
2014/07/17 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
js+html制作简单验证码
2017/02/16 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python hash每次调用结果不同的原因
2019/11/21 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
网络维护中文求职信
2014/01/03 职场文书
党员群众路线承诺书
2014/05/20 职场文书
语文课外活动总结
2014/08/27 职场文书
公司授权委托书
2014/10/17 职场文书
撤诉申请怎么写
2015/05/19 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
Java设计模式之代理模式
2022/04/22 Java/Android