BPM计数器小程序开发日志

用微信开发者工具制作一个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

接下来就是核心部分了,我打算用两个函数来实现:

  1. counter函数:用来计算bpm的函数,每次计算完成返回一个变更后的data;分三种情况:
    a. 第一次点击:获取此时时间戳,更新到data.lastTs
    b. 第二次点击:获取此时时间戳,并求与data.lastTs的时间差,更新到data.tsDiffdata.text作为此时的bpm,然后将此时获取到的时间戳更新到data.lastTs
    c. 之后的点击:获取此时时间戳,并求与data.lastTs的时间差,更新到data.tsDiff,同时求此时的时间差和data.tsDiff的平均值作为bpm,更新到data.text中;

  2. 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
//index.js
//获取应用实例
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)
},
})

今天结束。