微信小程序开发之——摇一摇Demo

写过公司的微信小程序后,还是很有感觉的。有了第一次学习开发的经历,逐渐接受并喜欢那种快速的开发feel。

写了一个摇一摇demo,看看有多简单吧

微信小程序开发之——摇一摇Demo_第1张图片

开发的快自然就有成就感哈哈,看下代码吧

1.js部分

// pages/testting/shaky/shaky.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    hasResutl:-1,
    bar_state:0,
    winWidth:0,
    winHeight:0,
    img_url:"https://www.demomaster.cn/eatbar/public/static/img/yaoyiyao/img_yaoyiyao.png",
    loading:"https://www.demomaster.cn/eatbar/public/static/img/yaoyiyao/small_loading.gif"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var context = wx.createContext()
    context.rect(5, 5, 25, 15)
    context.stroke()
    context.drawImage()
    wx.drawCanvas({
      canvasId: 'myCanvas',
      actions: context.getActions()
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    that.initAnimation();
    //重力加速度
    wx.onAccelerometerChange(function (res) {
      //console.log(res.x)
      //console.log(res.y)
     // console.log(res.z)
      if (res.x > .7 && res.y > .7) {
        // wx.showToast({
        //   title: '摇一摇成功',
        //   icon: 'success',
        //   duration: 2000
        // })
        that.startAnimation();
        that.vibrateShort();
      }
    })
    var that = this;
    //获取系统信息 
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
    wx.downloadFile({
      url: that.data.img_url,
      success: function (sres) {
        console.log(sres);
      }, fail: function (fres) {

      }
    })
  },
  initAnimation: function () {
    var that = this;
    //实例化一个动画
    this.animation1 = wx.createAnimation({
      // 动画持续时间,单位ms,默认值 400
      duration: 400,
      /**
      * http://cubic-bezier.com/#0,0,.58,1 
      * linear 动画一直较为均匀
      * ease 从匀速到加速在到匀速
      * ease-in 缓慢到匀速
      * ease-in-out 从缓慢到匀速再到缓慢
      * 
      * http://www.tuicool.com/articles/neqMVr
      * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
      * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
      */
      timingFunction: 'ease',
      // 延迟多长时间开始
     // delay: 100,
      /**
      * 以什么为基点做动画 效果自己演示
      * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
      * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
      */
      transformOrigin: 'left top 0',
      success: function (res) {
        console.log(res)
       
      }
    })
    //实例化一个动画
    this.animation2 = wx.createAnimation({
      // 动画持续时间,单位ms,默认值 400
      duration: 400,
      /**
      * http://cubic-bezier.com/#0,0,.58,1 
      * linear 动画一直较为均匀
      * ease 从匀速到加速在到匀速
      * ease-in 缓慢到匀速
      * ease-in-out 从缓慢到匀速再到缓慢
      * 
      * http://www.tuicool.com/articles/neqMVr
      * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
      * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
      */
      timingFunction: 'ease',
      // 延迟多长时间开始
      // delay: 100,
      /**
      * 以什么为基点做动画 效果自己演示
      * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
      * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
      */
      transformOrigin: 'left top 0',
      success: function (res) {
        console.log(res)
      }
    })
  },
  /**
  *位移
  */
  startAnimation: function () {
    var that = this
    //x轴位移100px
    var h1 = "35%";
    var h2 = "65%";
    if (this.data.bar_state == 1) {
      h1 = "40%";
      h2 = "40%";
      setTimeout(function () {
        that.setData({
          //输出动画
          bar_state: 0,
          hasResutl:0
        })
        setTimeout(function () {
          that.setData({
            hasResutl: 1
          })
        }, 4000)
      }, 400)
    } else {
      h1 = "25%";
      h2 = "55%";
      this.setData({
        bar_state: 1
      })
      setTimeout(function () {
        that.startAnimation();
      }, 600)
    }
    this.animation1.height(h1).step()
    this.animation2.top(h2).step()
    this.setData({
      //输出动画
      animation1: that.animation1.export(),
      animation2: that.animation2.export()
    })
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

(有些冗余的测试代码,请忽略)

2.wxml部分




  
  
  
  
  
  
  
  
  
    
    正在搜索同意时刻摇晃手机的人
    
    
    哈哈
    
  
  
  

  


3.wxss部分

/* pages/testting/shaky/shaky.wxss */
page{
  background-color: greenyellow;
  height: 100%;
}
.panel_root{
  background-color: red;
  height: 100%;
}
.view_top{
  position: absolute;
  display: block;
  height: 40%;
  width: 100%;
  background-color: #2d3132;
  text-align: center;
}
.view_bottom{
  position: absolute;
  top:40%;
  display: block;
  height: 60%;
  width: 100%;
  background-color: #2d3132;
  text-align: center;
}
.img_top{
  position: absolute;
  bottom: 0;
  width: 8rem;
  height: 7rem;
  margin-bottom: -3.5rem;
  margin-left: -4rem;
  clip:rect(0px,8rem,3.5rem,0px);
}
.img_bottom{
  position: absolute;
  top:0;
  width: 8rem;
  height: 7rem;
  margin-top: -3.5rem;
  margin-left: -4rem;
  clip:rect(3.5rem,8rem,200px,0px);
}
.panel_result{
  margin: 2rem;
  padding: 1rem;
  background-color: white;
}
.btn_test{
  position: absolute;
  bottom: 0;
  margin: 2rem;
  
}
.win_line_top{
  position: absolute;
  bottom: 0;
  height: .3rem;
  width: 100%;
  display: block;
  background-color: gray;
  border-bottom: 1px solid black;
}
.win_line_bottom{
  position: absolute;
  top:0;
  height: .3rem;
  width: 100%;
  display: block;
  background-color: gray;
  border-bottom: 1px top black;
}
.panel_bottom{
  width: 100%;
  position: absolute;
  top: 5rem;
  color: white;
}
.panel_content{
  width: 100%;
  position: relative;
  font-size: .8rem;
  text-align: center;
}
.img_loading{
  width: 1rem;
  height: 1rem;
}
.text_lable{
  font-size: .8rem;
  line-height: 2rem;
  height: 2rem;
}
.panel_result{
  margin: 1rem 2rem;
  background: white;
  border-radius: .3rem;
  padding: 1rem;
  color: black;
}

json部分没什么可说的(html和css水平太差,怎个乱子了得)

得了,简单的效果实现了。

 

你可能感兴趣的:(个人原创,微信小程序,摇一摇)