小程序学习-第一个项目

最近开始学习小程序

最近转行，开始学习小程序，刚入门，把自己从头开始学的东西都记录下来，方便以后自己看看自己的提升，也为需要的朋友提供一下自己的一些想法之类的。

先来看效果图

接下来看代码

js:

Page({
  data:{
    animationData: {}
  },
  doAnimation: function () {
    //this.skew();
    this.rotateAndScale();
  }, 
  rotateAndScale: function () {
    var that = this;
    this.setData({
      turning: true
    });
    setTimeout(function () {
      that.setData({
        turning: false
      })
    }, 6000)

    var PrandomNum = Math.random() * 8 >>> 0;
    console.log(PrandomNum);
    var animation = wx.createAnimation({
      duration: 6000,
      timingFunction: 'ease',
    });
    this.animation = animation;
    app.runDegs = app.runDegs || 0
    console.log('deg', app.runDegs)
    app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * 4 - PrandomNum * (360 / 8))
    console.log('deg', app.runDegs)
    this.animation.rotate(app.runDegs).step();
    
    this.setData({
      animationData: this.animation.export()
    })
    setTimeout(function(){
      if (PrandomNum == 0) {
        wx.showModal({
          title: '遗憾',
          content: '谢谢参与',
          showCancel: false
        })
      }else if(PrandomNum ==1){
        wx.showModal({
          title: '恭喜',
          content: '获得保温壶',
          showCancel: false
        })
      } else if (PrandomNum == 2) {
        wx.showModal({
          title: '恭喜',
          content: '获得月光大米',
          showCancel: false
        })
      } else if (PrandomNum == 3) {
        wx.showModal({
          title: '恭喜',
          content: '获得运动水壶',
          showCancel: false
        })
      } else if (PrandomNum == 4) {
        wx.showModal({
          title: '恭喜',
          content: '获得1000元购车代卷',
          showCancel: false
        })
      } else if (PrandomNum == 5) {
        wx.showModal({
          title: '遗憾',
          content: '谢谢参与',
          showCancel: false
        })
      } else if (PrandomNum == 6) {
        wx.showModal({
          title: '恭喜',
          content: '获得奕泽定制抱枕',
          showCancel: false
        })
      } else if (PrandomNum == 7) {
        wx.showModal({
          title: '恭喜',
          content: '获得定制长柄雨伞',
          showCancel: false
        })
      }
    },5500)
  }
})

wxml:

<view class="container">
  <view>
    <image animation="{{animationData}}" src = "../../images/backimage.png" class="center"></image>   
  </view>
  <button type="primary" bindtap="{{turning?'':'doAnimation'}}">点击抽奖</button>
   <image src = "../../images/hand.png" class="h2"></image> 
</view>

wxss:

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
.center{
  width: 700rpx;
  height: 707rpx;
}
.left{
  width:12rpx;
  height:100rpx;
}
.h2{
  position:absolute;
  padding-top:250rpx;
  width: 12rpx;
  height: 150rpx;
}

想法

我自己也是一个初学者，这是一个很简单的例子，希望对各位有帮助。
[1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/