258资源分享网

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

 

 

 

介绍

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

主要涉及到的功能有：

小程序动画接口 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 ，这样也能通过点击顶部状态栏回到页面顶部

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