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
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » github精选:实战教程:摇出微笑,animation,摇一摇