首页 › 教程频道› 小程序开发 › 查看内容

github精选：实战教程：摇出微笑，animation，摇一摇

作者：模板之家 2017-11-27 17:29 11077人关注

摇出微笑是一款功能非常简洁的小程序，非常适合用来作为新手入门的第一个实战项目。主要涉及到的功能有：小程序动画接口 ... 介绍摇出微笑是一款功能非常简洁的小程序，非常适

摇出微笑是一款功能非常简洁的小程序，非常适合用来作为新手入门的第一个实战项目。主要涉及到的功能有：小程序动画接口 ...

介绍

摇出微笑是一款功能非常简洁的小程序，非常适合用来作为新手入门的第一个实战项目。

主要涉及到的功能有：

小程序动画接口 wx.createAnimation，
摇一摇，基于重力感应接口（ wx.onAccelerometerChange ）实现
列表渲染
其他

结构

首页
列表
个人

首页

首页涉及两部分主要功能，一个是动画，一个是用摇一摇的功能。
在这里就说一说实现思路，有兴趣的同学可以去看源代码，这样比较直观。

动画

动画是使用微信提供的 wx.createAnimation 接口来实现的，也是想了解一下这个动画接口的完善度。

通过观察渲染出来的Wxml文件，可以发现 wx.craeteAnimation 设置的一些动画方法会在 view 标签中多处来的 style 中体现出来。

大概说一下实现首页动画的思路吧

由于三个框的旋转角度不一样，所以我创建了三个动画实例

var createAnimation = function() {
  return wx.createAnimation({
    duration: 400,
    timingFunction: 'ease-out',
    transformOrigin: "0% 0%",
  })
}

var animationItem0 = createAnimation()
var animationItem1 = createAnimation()
var animationItem2 = createAnimation()

然后用 AnimationData0 ，AnimationData1，AnimationData2 来分别存储动画数据，用 arrAnimation 来存储这是三个动画数据。

Page({
	data: {
	  AnimationData0: {},
	  AnimationData1: {},
	  AnimationData2: {},
	  arrAnimation: [],
	  ...
	},
	...
})

setAnimationData: function() {

  this.setData({
    AnimationData0: animationItem0.export(),
    AnimationData1: animationItem1.export(),
    AnimationData2: animationItem2.export()
  })

  var data1 = this.data.AnimationData0 
  var data2 = this.data.AnimationData1
  var data3 = this.data.AnimationData2
  
  var arr = [data1, data2, data3]

  this.setData({arrAnimation: arr})
}

考虑到 Wxml 我是用 for循环渲染出来的（其实也许直接用三个 view 实现逻辑会更简单），所以就需要动态绑定每一个元素的ID，这样才能知道哪个框是哪个动画，点击的又是哪个框。

<view  catchtouchend = "touchEnd">
  <block wx:for="{{filterTips}}" wx:key="{{index}}">
    <view id="item_{{index}}" 
        animation="{{arrAnimation[index]}}"
        data-index="{{index}}"
        class="item  {{activeIndex == index ? 'touched' : 'untouched'  }} " >
      {{item.text}}
    </view>
  </block>
</view>

摇一摇

至于摇一摇功能，因为微信没有提供具体的摇一摇接口，但是提供了重力感应接口 wx.onAccelerometerChange，我们如果想要使用摇一摇功能，就得基于此来实现。

关于重力感应有个问题就是，官方没有提供停止监听重力感觉的接口，所以会导致一个情况就是：用户在其他页面时，重力感应依然在监听。一个不怎么好的解决方案时利用页面生命周期的 onHide ()函数。

通过这种方式，起码用户不会在其他页面触发摇一摇功能。

onHide: function() {
  //当前页面处于onHide状态
  this.setData({onHide: true})
},

wx.onAccelerometerChange((res) => {
  if(this.data.onHide === true) {
    return
  }
}

关于摇一摇的实现，其本质无非就是记录一段时间内，重力感应返回的三个方向的值变化有多大，如果超过某个阀值，则认为用户触发了摇一摇事件。

wx.onAccelerometerChange((res) => { 

  if(this.data.onHide === true) {
    return
  }
  var currentTime = new Date().getTime()
  var SHAKE_THRESHOLD = app.globalData.sensitivity;
  var lastUpdate = this.data.lastUpdate
  if ((currentTime - lastUpdate) > 100) {
    var diffTime = currentTime - lastUpdate;
    var speed = Math.abs(res.x + res.y + res.z - this.data.lastX - this.data.lastY - this.data.lastZ) / diffTime * 10000;

    if(speed > SHAKE_THRESHOLD && tag) {
      tag = false
      //用户摇一摇后的代码逻辑
      //...
      setTimeout(() => {
        tag = true;
      }, 800)
    }
  }
  this.setData({
    lastX: res.x,
    lastY: res.y,
    lastZ: res.z,
    lastUpdate: currentTime   
  })
})

列表

作为列表页，主要涉及的就是列表渲染，可滚动视图区域（scroll-view），上拉加载更多。

在 scroll-view 中无法触发 onPullDownRefresh，也就是不支持下拉刷新。

若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

这里涉及到一个思想，就是一个函数尽量做一件事。

具体来说，比如获取列表的网络请求我们就封装成一个函数，然后因为请求资源列表时涉及到 per（一页多少个）和 page（第几页）参数，所以我们可以把 per 和 page 的值放在 data 中。

这样就有一个好处。比如实现加载更多这个功能的时候，只需要把 page ＋ 1，然后再去获取资源列表就可以了。

看代码

loadMore: function() {
  this.setData({page: this.data.page + 1})
  this.getList()
},

getList: function() {

  var page = this.data.page;
  var per = this.data.per;


  wx.request({
    url: 'https://xxxxx.com/',
    data: {
      page: page,
      per: per
    },
    method: 'GET',
    success: (res) => {
      this.setData({listLi: this.data.listLi.concat(res.data)})
    }
  })
},

wxml的内容就很简单了，主要用到了微信提供的列表渲染功能

<view>
  <view>
    <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:{{windowHeight}}px;" scroll-y="true" bindscroll="bindScrollHandel"   bindscrolltolower="loadMore">
      <view class="block" wx:for="{{listLi}}" wx:key="{{index}}" >
        <text>{{item.text}}</text>
      </view>    
    </scroll-view>
  </view>
  <view class="top" hidden="{{hiddenIcon}}" catchtap="goTop">?</view>
</view>

个人

个人页面在获取用户信息的时候用到了回调函数，就重点说一下这个吧。

先看 app.js 这段代码。

定义 getUserInfo 函数，该函数接受一个回调函数作为参数，逻辑是：如果 globalData 中有 userInfo 的值，就把该 userInfo 的值作为参数给这个回调函数，反之，则调用 wx.login 和 wx.getUserInfo 获取 userInfo，然后赋值给 globalData.userInfo，并同样的作为参数给这个回调函数。

getUserInfo: function(cb){
  var that = this
  if(this.globalData.userInfo){
    typeof cb == "function" && cb(this.globalData.userInfo)
  }else{
    //调用登录接口
    wx.login({
      success: function (res) {
        wx.getUserInfo({
          success: function (res) {
            that.globalData.userInfo = res.userInfo
            typeof cb == "function" && cb(that.globalData.userInfo)
          }
        })
      }
    })
  }
},

个人页面，调用 getUserInfo（）以一个函数作为参数，然后该函数的参数就有 userInfo 的值

onLoad: function () {
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
    //更新数据
    that.setData({
      userInfo:userInfo
    })
  })
}