小程序模板网

github精选:实战教程:摇出微笑,animation,摇一摇

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

 
 
 

介绍

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

主要涉及到的功能有:

  • 小程序动画接口 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
    })
  })
}

想一想,如果用户是第一次使用,那么 globalData 中肯定没有 userInfo 的值,这时候会从微信服务器中获取,而如果 globalData 中 userInfo的值,那么就不从服务器中获取,直接从globalData中取值即可。

后记

这是我第一次写教程,个人感觉写的并不是很好,一方面是因为没有写教程的经验,另一方面则是因为真的很忙,所以在这里跟大家说一说抱歉!然后附上这个小程序的源码地址

如果你看了代码后觉得有什么地方想找我探讨的,可以来问我,我非常乐意跟你交流。

如果你看了代码后愿意给我一些好的批评或者建议,我会非常开心。

源码地址:https://github.com/wardenger/shakeTips(欢迎点star)

源码下载:shakeTips-master.zip



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17951.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询