用微信开发者工具制作一个bpm计数器的小程序日志。
20/06/01
之前听说小程序可以用react开发(刚好当作学习react),后来发现好像不能原生支持,需要在微信开发者工具上使用他们的语法(框架?)开发小程序,看了几篇文章,好像有点像vue+react的融合体。那就试试看吧。
在官网 下载微信开发者工具,打开之后有个示例,看了下代码还算比较好理解。
A SIMILAR STRUCTURE
这个项目目录格式真的十分熟悉了,可能大部分框架的格式都是这样吧,
很明显就是一个app.js
是一个入口,app.wxss
是项目的样式文件,虽然看起来是一个微信自己定义的样式格式.wxss
,但是看了下就是css好像,pages
目录下即使子页面的页面定义,那我直接去修改index
目录下面的文件吧。
FRONT FIRST
先改一下门脸吧,毕竟我是视觉动物。
看了下html代码,有点像是xml,十分奇怪,但是好在容易理解,我希望整个页面只有一个文字区域用于显示欢迎消息和当前bpm,那就很简单了,稍加改造即可使用。
再来改一下CSS,搜索了下得知page
即是定义页面样式的,有点像CSS中的html, body {}
,那就先弄个黑色背景吧,然后用一个view
框一个text
,完事儿。
ANOTHER STATE?
打开index.js
核心代码区域,data
就像是react里面的state
,同时使用setData
函数来变更data
的值。那么稍加改造即可使用:
其中:
1 2 3 lastTs: 上次点击的时间戳; tsDiff: 这次点击之后和上次点击的时间戳的时间差; text: 显示文字
这样就大概实现了想要的样子了:
VUE STYLE EVENT BINDING?
接下来需要在整个页面绑定触摸事件,这样的话只要点击页面任意一处即可开始计数,并显示BPM。
搜索了下得知触摸事件是bindtap
,那就加上,绑定触摸事件到一个函数tapHandler
上,console.log看下是否能用:
妥了。
MAKE IT WORK
接下来就是核心部分了,我打算用两个函数来实现:
counter
函数:用来计算bpm的函数,每次计算完成返回一个变更后的data
;分三种情况:
a. 第一次点击:获取此时时间戳,更新到data.lastTs
;
b. 第二次点击:获取此时时间戳,并求与data.lastTs
的时间差,更新到data.tsDiff
和data.text
作为此时的bpm,然后将此时获取到的时间戳更新到data.lastTs
;
c. 之后的点击:获取此时时间戳,并求与data.lastTs
的时间差,更新到data.tsDiff
,同时求此时的时间差和data.tsDiff
的平均值作为bpm,更新到data.text
中;
tapHandler
函数:点击之后调用的函数,不做bpm的计算,仅用来接受counter
返回的结果并更新到data
中。
先把所有的功能塞到tapHandler
里面试试看效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 tapHandler: function ( ) { let currTs = Date .now() let prevTs = this .data.lastTs let prevGap = this .data.tsDiff if (prevTs !== 0 && prevGap !== 0 ){ console .log(this .data) let currGap = currTs - prevTs let thisbpm = 60000 / currGap let avgbpm = (thisbpm + (60000 /prevGap)) / 2 this .setData({ lastTs: currTs, tsDiff: currGap, text: avgbpm }) }else if (prevTs == 0 && prevGap == 0 ){ console .log("第一次点击" ) console .log(this .data) this .setData({ lastTs: currTs, text: 'Again' }) }else if (prevTs !== 0 && prevGap == 0 ){ console .log("第二次点击" ) console .log(this .data) this .setData({ lastTs: currTs, tsDiff: currTs - prevTs, text: 60000 / (currTs - prevTs) }) } }
试了下可以用,接下来把代码完善下,完成他们各自的使命:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 const app = getApp()Page({ data: { text: 'Tap anywhere to start counting' , lastTs:0 , tsDiff:0 }, counter: function ( ) { let newData = {} let currTs = Date .now() let prevTs = this .data.lastTs let prevGap = this .data.tsDiff if (prevTs !== 0 && prevGap !== 0 ){ console .log(this .data) let currGap = currTs - prevTs let thisbpm = 60000 / currGap let avgbpm = (thisbpm + (60000 /prevGap)) / 2 let newData = { lastTs: currTs, tsDiff: currGap, text: avgbpm } return newData }else if (prevTs == 0 && prevGap == 0 ){ console .log("第一次点击" ) console .log(this .data) let newData = { lastTs: currTs, text: 'Again' } return newData }else if (prevTs !== 0 && prevGap == 0 ){ console .log("第二次点击" ) console .log(this .data) let newData = { lastTs: currTs, tsDiff: currTs - prevTs, text: 60000 / (currTs - prevTs) } return newData } }, tapHandler: function ( ) { const newData = this .counter() this .setData(newData) }, })
今天结束。