微信小程序实例-摇一摇抽奖
概述
前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门
微信小程序目录
为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录。
首先看下根目录下的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',//圆点颜色1colorCircleSecond: '#FE4D32',//圆点颜色2colorAwardDefault: '#F5F0FC',//奖品默认颜色colorAwardSelect: '#ffe400',//奖品选中颜色indexSelect: 0,//被选中的奖品indexisRunning: 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 = 15leftCircle = 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) returnthis.setData({isRunning: true})var _this = this;var indexSelect = 0var 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>
微信小程序实例-摇一摇抽奖相关推荐
- 微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
- php 实现tab切换_微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码)...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
- 微信小程序独家秘笈之抽奖大转盘
代码地址如下: http://www.demodashi.com/demo/14209.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 微信小程序实例:image组件的binderror事件处理(2021-07-08)
微信小程序实例:image组件的binderror事件处理 全局先定义替换图片的路径 我这里是展示了好几种不同数据源的图片,所以抽取出来: 前端代码:
- php验证码zhuc_微信小程序实例:实现随机验证码(附代码)
本篇文章给大家带来的内容是关于微信小程序实例:实现随机验证码(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 小程序上经常会有一些注册 申请页面需要用到随机验证码.具体实现 ...
- php实现轮播图代码,微信小程序实例:轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
- (转)微信小程序实例源码大全
https://www.cnblogs.com/tuyile006/p/6268961.html 微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick) 源码链接:ht ...
- 在微信小程序中编写金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
- 微信小程序使用加速计实现摇一摇功能(一)
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序硬件接口提供了加速计使用. 用于计算手机的偏移距离. 注:接口提供的比较简单,更多需要自己处理. 1.开启:wx.s ...
最新文章
- Android 应用性能优化-StrictMode(严格模式)
- 机器学习实践:了解数据核心的通用方法!
- Codeforces 432E Square Tiling(结构体+贪婪)
- SpringBoot+MyBatis+Shiro 搭建杂谈
- 提示错误“'=' not supported between instances of 'range' and 'int'”
- TWAIN协议学习笔记
- var result = ![] == []; console.log(result); // 结果是?为什么?
- (Oracle)关于blob转到目标库报ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值错误解决方案...
- 《scikit-learn》朴素贝叶斯
- Python 入门到精通(—)初识Python
- 杭电OJ分类题目(3)
- 编译原理基本概念和术语
- 关于IDEA无法使用搜狗输入法输入中文问题
- Python 实现多个Excel工作表绘制曲线图
- QTableWidget获取一行数据
- 前台中文传参后台乱码解决方案
- python 魔法方法(2)
- android 滑动导航栏颜色渐变,Android App页面滑动标题栏颜色渐变
- mysql 数据库转移
- 教你如何给孩子取一个好名字!
热门文章
- rk3399 android 9.0 frameworks中添加导航栏状态栏控制
- rm命令linux00,linux下rm命令使用详解 | Soo Smart!
- NX/UG二次开发—其他—分享几个UG内部函数
- 再谈模拟器上网!!(Symbian OS S60)(转)
- android 时间 翻译 阿拉伯语,Re audit due date - 英语 - 阿拉伯语 翻译和实例
- 使用CSS把Div放在屏幕中间。
- win7系统下控制台窗口主机已停止工作解决方法
- 如何用人工智能高效选研究题目?
- 绿盟科技软件测试招聘,绿盟科技防火墙产品团队招聘——来加入我们把~
- Win7 64位安装VS2010旗舰版出现错误...Microsoft Visual Studio 2010 64bitPrerequisites (x64)