概述

前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件微信小程序入门

微信小程序目录

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

首先看下根目录下的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>

微信小程序实例-摇一摇抽奖的更多相关文章

  1. 微信小程序实例源码大全

    微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...

  2. 微信小程序实例源码大全下载

     小程序QQ交流群:131894955  小程序开发直播腾讯课堂:  https://edu.csdn.net/course/detail/6743 微信小程序实例源码大全下载 微信小应用示例代码(p ...

  3. 微信小程序独家秘笈之抽奖大转盘

    代码地址如下:http://www.demodashi.com/demo/14209.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. 微信小程序实例-获取当前的地理位置、速度

    微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var a ...

  5. 微信小程序实例教程(一)

    序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...

  6. 微信小程序实例--仿豆瓣电影

    最近不想写论文,就想捣鼓点新东西吧,就边看官方文档,花了3天时间写了一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程吧. 源码&效果图 源码点击这里,欢迎star 运行方法: 下载微信we ...

  7. 开发一个微信小程序实例教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  8. 微信小程序实例源码大全2

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  9. 微信小程序实例代码

    http://blog.csdn.net/zuoliangzhu/article/details/53862576#t1 项目结构 └─ empty-folder/ ················· ...

随机推荐

  1. angularjs中的几种工具方法

    1.比较两个字符串是否相等 2.对象形式转化成json和json转化成字符串形式 3.便利对象遍历数组 4.绑定数据 5.多个app功能模块的实现 <!doctype html><h ...

  2. 【转】C++ Vector(向量容器)

    转自:https://blog.csdn.net/studentyyl/article/details/21177445 vector是一个线性顺序结构.相当于数组,但其大小可以不预先指定,并且自动扩 ...

  3. 前端小白想要编写可维护的js

    我是一名前端小白,之前没写过多少代码,心里没有代码质量这个概念,人人都说代码是团队的产物,应该将代码写规范,但是我对具体什么样的代码是可维护的是茫然的. 我没写过多少代码,本来好多东西就不咋会,每次给 ...

  4. TOMCAT下的JNDI的配置

    一.第一种配置局部JNDI 1.在tomcat的conf目录下的server.xml的<host>标签内,添加: <Context path="/TestMvcMode&q ...

  5. Java必须了解的“递归”与“IO流”!!!

    >>>First: 递归! 1. 定义: 在函数自身内部,调用函数本身的方式,称为递归. 2. 注意: 递归包括递进去.归出来两步. 首先,依次执行[函数调自身语句]上半部分的代码, ...

  6. hdu 5830 FFT + cdq分治

    Shell Necklace Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  7. 2014-10-30NOIP复习题1

    Problem 1 Graph (graph.cpp/c/pas) [题目描述] 给出 N 个点,M 条边的有向图,对于每个点 v,求 A(v) 表示从点 v 出发,能到达的编号最大的点. [输入格式 ...

  8. VK Cup 2017 - Квалификация 2

    因为资格赛1已经通过了,资格赛2随便打打玩.这次题目比上次还简单,FallDream看了两眼觉得太水就不做了,我一个人闲着无聊只好默默做了 A. Новый пароль 题目大意:给出N和K,要求构 ...

  9. hdu 5120(2014北京—求圆相交)

    题意:求环的相交面积 思路: 通过画图可知,面积= 大圆相交面积 - 大小圆相交面积*2 + 小小圆相交面积  再通过圆相交模板计算即可 #include <iostream> #incl ...

  10. hihocoder 1075 : 开锁魔法III

    描述 一日,崔克茜来到小马镇表演魔法. 其中有一个节目是开锁咒:舞台上有 n 个盒子,每个盒子中有一把钥匙,对于每个盒子而言有且仅有一把钥匙能打开它.初始时,崔克茜将会随机地选择 k 个盒子用魔法将它 ...