做人咧，最紧要系开心🥳
之前需求发布的时候，把代码发布到了预发布分支上，但是产品突然发现一个体验问题阻塞了发布，需要先revert掉，等改动完成后再继续发布。
改动完成后，需要同步一下主分支上的代码，在本地解决冲突后再合入主分支。此时会发现Merged后将会把本地代码给删掉。
如图所示，其实问题的根源就是：主分支上的revert没有被撤销，导致合入开发分支的时候本地代码都被revert掉了。
简而言之就是，撤销之前的主分支上的revert就可以让主分支上的代码合入到开发分支上又不会把本地代码删掉。相当于告诉git，主分支上这批代码不用被删掉了。具体步骤如下：
由于业务的原因，我们的H5页面必须兼容一些比较老的webview版本，因此在开发中难免会遇到不支持的JS语法，因此在这里总结了一个切实可行的方法来提高自己确认接口兼容性的效率。
通过caniuse.com查询方法兼容性
假如需要使用Proxy方法来统一代理所有的接口，但是我不确定系统兼容性，怎么办？
1.访问caniuse.com
2.查询对应的方法名
3.查询iOS的兼容性
4.查询Android的兼容性
5.如果查询到的最低支持版本在需要的版本内则可以使用，另外在使用前最好在方法外套一层try...catch避免出现不支持的意外情况
去年11月的时候，买了人生第一支Apple Watch，因为内心涌动的软工魂，我又开始琢磨开发一个属于自己的iOS App。之后顺理成章的推出了自己首个WatchApp，《wTodo》一个用于在Apple Watch上管理微软待办事项的工具应用。
由于App需要经常性联网，因此不免需要引入Loading态来告知用户当前的运行状态。不巧的是watchOS中提供的组件是阉割后的版本(主要是为用户的续航考虑，如果直接套用手机端那一套组件，watch的续航会受不了的)，导致watch端并没有原生的组件能够实现Loading动画，这也让我苦恼了很久。后面下班摸鱼的时候，偶然在stackoverflow上看到了解决办法。
如标题所述，在watchOS上只能通过“帧动画”来曲线救国，实现Loading动画。在这里给大家推荐一个来自Stackoverflow高赞中推荐的动画库。
https://github.com/mikeswanson/JBWatchActivityIndicator
该动画库提供了两种帧动画样式，第一种是类原生的Loading帧动画，如果个人比较偏爱原生动画的话，可以使用这个，直接点开“common image”就可以找到不同尺寸，不同帧率的帧动画了；第二种则是通过作者提供的工具，自定义动画的样式，如果想要自定义则需要clone项目到本地，然后通过Xcode打开项目运行到Simulator中即可，调整完参数后，点击生成即可获得符合自己要求的帧动画素材。
这里用类原生动画举例子：
1.从Common Image中选择自己需要的尺寸和帧率
2. 将帧序列图片拖到WatchKit App的Assets.xcassets文件夹中
3.在StoryBoard中引入Image组件
4.绑定Image组件到Controller上
5.设置Image组件参数
使用startAnimationWithImages后就会开始播放帧序列动画了，因此可以用来看作是动画开始函数。
6.停止播放帧序列动画
至此只要在需要使用Loading动画的地方配置对应的Image组件即可给页面加上Loading态了。实现方法非常简单易用，就是国内文档太少了，只能去社区里找略麻烦了一点。如果希望自己去寻找更多内容的话，可以使用“loading indicator”去搜索，感觉会比Loading Animation说的更准确一些。
PS：
不知不觉就到8月底了，8月的碎碎念我还没来得及写，上周优化了wTodo加入了LoadingIndicator，这周就把加载动画的技术文章尝试沉淀下来了。如果下周有时间的话，我再花时间把碎碎念给肝出来吧。工作日加班真的消耗完我写代码的精力了，到了周末感觉都不想再碰电脑了，只想出门逛一下散散心。（真的不是我咕咕咕啦！）
利用左连接来实现逐小时查询(终于把数据库原理学到的知识用上了😂)
select a.click_date,ifnull(b.total,0) as total from (
SELECT date_format(date_sub(curdate(), interval 1 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 2 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 3 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 4 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 5 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 7 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 8 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 9 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 10 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 11 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 12 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 13 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 14 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 15 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 16 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 17 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 18 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 19 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 20 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 21 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 22 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 23 HOUR),'%Y-%m-%d-%H') as click_date
union all
SELECT date_format(date_sub(curdate(), interval 24 HOUR),'%Y-%m-%d-%H') as click_date
) a
left join (
select date_format(createTime,'%Y-%m-%d-%H') as datetime, count(*) as total from `order` where `status` = 2 group by date_format(createTime,'%Y-%m-%d-%H')
) b
on a.click_date = b.datetimeinfull用于字段的补0，在无数据的时候可以补上0。
dateSub用于减去时间戳的时间
a主要是用来生成逐小时的时间字段
b主要是查询数据
on是用来执行left join的条件
本文章主要记录个人的开发经验，产生自最近进行的后端开发。
1.切换到”结构”Tab
2.添加新的字段
3.UpdateTime字段设置为”TimeStamp”, 设置Extra为”on update CURRENT_TIMESTAMP”
4.CreateTime字段设置为”TimeStamp”, Default设置为CURRENT_TIMESTAMP
CURRENT_TIMESTAMP是MySQL自带的一个时间函数，用于生成当前的时间戳”2022-01-05T08:37:17.000Z”。
on update CURRENT_TIMESTAMP表示字段在更新时更新为当前的时间戳。
通过这样子的设定，可以将创建时间和更新时间的操作交由数据库处理，免去了开发者在后端进行额外的处理。
new Date("2022-01-05T08:37:17.000Z").getTime())
通过该方法可以快速的转换成距1970 年1 月1 日之间的毫秒数。
现在我正在开发一个独立的 Watch App 应用，但是我发现在模拟器上调试时是可以正常连接网络的。但是当我上传到真机时，就会出现无网络连接的问题。具体的报错如下:
2021-11-20 21:42:27.156338+0800 wTodo WatchKit Extension[1068:2225475] PDTask <29C198EA-480A-459F-B5B9-421D9C26C7D8>.<3> finished with error [-1009] Error Domain=NSURLErrorDomain Code=-1009 "The Internet connection appears to be offline." UserInfo={_NSURLErrorFailingURLSessionTaskErrorKey=LocalDataPDTask <29C198EA-480A-459F-B5B9-421D9C26C7D8>.<3>, NSLocalizedDescription=The Internet connection appears to be offline., _kCFStreamErrorCodeKey=50, _NSURLErrorRelatedURLSessionTaskErrorKey=(
"LocalDataPDTask <29C198EA-480A-459F-B5B9-421D9C26C7D8>.<3>",
"LocalDataTask <29C198EA-480A-459F-B5B9-421D9C26C7D8>.<3>"
), NSErrorFailingURLStringKey=https://baidu.com, _kCFStreamErrorDomainKey=1, NSErrorFailingURLKey=https://baidu.com}
Apple Watch S7
系统版本: 8.1
网络环境: WIFI
在watchOS 8中，GPS版的Apple Watch是不能单独设置APP的网络的，他会镜像iOS侧的App网络设置，比如设置支付宝可以用Wi-Fi，则Watch侧的支付宝App也可以用Wi-Fi。现在陷入的一个僵局仅仅是存在于新推出的独立App，独立App顾名思义就是只存在于Watch侧，iOS侧是没有App的。因此也不存在镜像iOS侧App网络设置的可能。这导致了如果App默认被设置成了不能联网，就会导致用户没法更改App联网状态（因为iOS侧和Watch侧都不能更改App的网络设置）。
PS：这个 Bug 的出现真的是很无语，花了我一整天的时间才解决，心累啊😣。
最近开始实习，部门主要使用的是一个内部的跨端框架，这东西本质上还是React Native，只不过是做了一层套娃重命名了标签名称(像极了ReactRouter和ReactRouter-Dom的关系)，并且封装📦了自己的一堆私有的API。由于导师就是负责开发这个框架，因此很无奈只能转React，做React开发了(印证了之前的猜想)。
今天这篇文章主要就分享一下我在使用Redux过程中的一些笔记📒或者使用经验。
(本文章不会详细阐述其具体的使用方法，只是会记录一些实际应用的效果)
| 函数名称 | 官方描述 | 个人理解 |
|---|---|---|
| mapStateToProps | 建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系 | 将Store上的State挂载到props上 (实现了单向数据流) |
| mapDispatchToProps | 建立 UI 组件的参数到store.dispatch方法的映射 | 将Store上的Dispatch函数挂载到(调用的时候，相当于是在触发Store上的函数) |
(此处引用阮一峰老师提供的“计数器”代码，作为本文章的例子，感谢阮老师的分享🙏)
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
计数器组件 class Counter extends Component {
// 创建渲染器
render() {
// 从入口参数上获取mapState和mapDispatch挂载的属性和方法
const { value, onIncreaseClick } = this.props
// 返回JSX
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
Action说明了Redux中可以做什么动作。
const increaseAction = { type: 'increase' }
有点类似于Java中的抽象类的概念
Reducer说明了Action做什么动作。
function counter(state = { count: 0 }, action) {
// 读取Redux中管理的count变量
const count = state.count
// 检测dispatch触发了哪一个动作
switch (action.type) {
// 触发"增加"动作
case 'increase':
// 将值+1并返回一个state到Redux的Store中
return { count: count + 1 }
default:
return state
}
}
有点类似于Java中的实现类
Action和Reducer的关系，在我看来有点类似于抽象实现的关系，不知道🤷♂️对不对，以后再继续深入探究一下。
const store = createStore(counter)
// Redux的角度: 将Redux管理的全局State(Store)上的值挂载到了组件上
// 组件的角度: 获取(订阅)了Redux管理的全局State(Store)上的值
function mapStateToProps(state) {
return {
value: state.count
}
}
// Redux的角度: 将操作全局State(Store)上的方法挂载到了组件上
// 组件的角度: 获取了管理的全局State(Store)的方法
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
// Connected Component
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
mapStateToProps将全局State挂载到了组件的Props上，组件因此可以直接读取到Store中管理的state值。mapDispatchToProps将管理全局State的方法挂载到了组件的Props上，组件就可以从入参中获取操作方法，进而在组件中dispatch(触发)State中的Reducer进而修改State中的值。这篇文章主要是梳理了一下本周解决的一个知识点，加深自私点在脑海中的印象。文章中阐述不清楚的点，欢迎透过邮箱📮与发起讨论，希望透过讨论也能让你明白这个过程发生了什么。
最近开始捯饬React，想着学会了React就能把React Native给学习了，然后就能写App。为了能够在React Native上少踩坑，我搭建这个脚手架之后，准备开发一个博文发布系统，作为DEMO练练手。
我们可以直接使用Vite自带的模板，初始化React，在本教程中我使用的是template指令来初始化项目。
运行以下指令初始化项目
# npm 6.0
npm init @vitejs/app gublog(项目名称) --template react(模板名称)
# npm 7.0+ (需要额外的双横线)
npm init @vitejs/app gublog(项目名称) --(额外的双横线) --template react(模板名称)
运行指令后，npm将创建一个以项目名称命名的文件夹📁，来初始化项目。
初始化完成后的文件树结构为：
root
└── gublog(项目名称)
├── dist
├── node_modules
├── src
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js
出现上图的网页时，我们就已经搭建出Vite + React的开发环境
为了能够实现无刷新切换页面，此处我的脚手架也会引入官方提供的Router来做前端路由管理。
运行指令安装路由组件
npm install react-router-dom --save-dev
React-Router-Dom就是React Router V4的浏览器版本，原来文档的Router要被替换成BrowserRouter才能使用。为了不使用方面，我们可以使用as关键字来修改别名。
import 'BrowserRouter' as 'Router' from 'react-router-dom'
这里我真的很想吐槽，搞一个React-Router就好了嘛🤷♂️，干嘛还搞一个React-Router-Dom。这东西本质上就是套娃再封装📦。而且最近的V4版本还舍弃了旧的Router标签，改成了BrowserRouter。真的是NT。
解决方法来源：
安装Redux主要是为了使得组件的耦合降低，使得更容易的管理状态，因此被打包到脚手架当中。
npm install redux --save-dev
npm install eslint --save-dev
npm install axios --save-dev
AntdUI是阿里针对React设计的一个UI库，开箱即用，有丰富的文档。(而且还能改颜色)
npm install redux --save-dev
main.css中添加import 'antd/dist/antd.css'导入CSS库Main.jsx的代码头部添加import {组件名称} from antd导入组件这篇文章就此告一段落。Axios和ESlint的使用我还在摸索中，后面还会继续更新，敬请期待。目前在使用这个脚手架重写GuBlog日志程序当中，后面时机成熟后也会同新版本的脚手架文章一同推出。
npm install xxx 利用 npm 安装xxx依赖到当前命令行所在目录npm install xxx -g 利用npm安装全局依赖xxxnpm install xxx –save 安装并写入package.json的”dependencies”中npm install xxx –save-dev 安装并写入package.json的”devDependencies”中npm uninstall xxx 删除xxx依赖npm uninstall xxx -g 删除全局依赖xxx去年6月份的时候，参加了微信小程序官方举办的《高校微信小程序开发大赛》，做出了《活力健身房》这个小程序。按照初版设计，除了可以检测用户的跑步数据外，还可以测量用户的静止心率。但由于个人除了要准备比赛，还要准备痛苦的概率论补考，所以导致日程太过于紧凑，因此在该情况下，我就只完成了第一个目标而忽略了第二个心率测量的目标没有实现。
在暑假期间，处于追求完美的想法，我花了一部分的时间继续学习并完成了心率检测算法的V1.0版本。而后再在这周，时隔一年的时间，重写了检测算法，推出了V1.1的版本。(至于为什么算是1.1版，在文中会说明的😂)。
今天我写这篇文章的主要目的是跟大家分享以下的三点内容：
光体积变化描记图法 (Photoplethysmography，简称PPG) 是借光电手段在活体组织中检测血液容积变化的一种无创检测方法。当一定波长的光束照射到指端皮肤表面，每次心跳时，血管的收缩和扩张都会影响光的透射 (例如在透射PPG中，通过指尖的光线) 或是光的反射 (例如在反射PPG中，来自手腕表面附近的光线)。当光线透过皮肤组织然后再反射到光敏传感器时，光照会有一定的衰减。像肌肉、骨骼、静脉和其他连接组织对光的吸收是基本不变的 (前提是测量部位没有大幅度的运动)，但是动脉会不同，由于动脉里有血液的脉动，那么对光的吸收自然也会有所变化。[1]
PPG检测的核心是通过心脏跳动影响血管中血液光线的吸收率变化，进而影响血液对光的反射率，估算受测者的心率数据。用人话说，心脏的跳动，会影响血液反射光的强度。反映到图表上，就如下图所示，心脏的舒张和收缩，会影响光强变化，形成下图的波动曲线。而心率的估算，则是通过计算60s内，有多少个波峰或者波谷。比如60s内，图表上产生了60个个波峰，则意味着1s中，心脏收缩和扩张了一次，即跳动了一次，进而可以得出60BPM的心率数据。
根据技术原理可以知道，PPG检测中我们需要做的事情是，计算一段时间内出现了多少个波峰，即可估算出受测者的心率。由此我们需要考虑实现以下的几个功能：
在当今社会中，人人都会有一台的智能手机。而手机上最好的颜色传感器就是摄像头了，因此在小程序端的实现中，对于数据的来源主要是摄像头。
为了实现方便，这次我依旧是使用小程序作为我的开发平台。之所以使用小程序的核心原因是官方提供了摄像头的API，使得我可以通过简单的$API$就可以获取到来自用户摄像头的视频流数据，并且不用考虑兼容性的问题。
在小程序中，我是用的是wx.createCameraContext()API来获取到视频流，同时借助onCameraFrame()来直接获取到每一帧的视频信息，极大的降低了开发的难度。通过前述的API，我们可以直接获取到当前帧Uint8数组，也就是每个像素的RGBA值。
为了避免外部光照影响血管对光线的反射，因此需要受测者的手指完全覆盖摄像头。为了检测摄像头是否覆盖，我们可以通过经验主义设定一个阈值，当每个像素的实际光强小于阈值，则代表传感器完全被覆盖，此时就可以开始测试。
通过API，我们可以获得视频流中特定的一帧的Uint8数据。之所以使用Uint8是因为在该RGBA中，每一个通道的颜色只有256种，而我们仅仅是需要获取该帧中的光强。因此选用Uint8可以大幅度减少运算量，提高运行效率。
通过经验主义的测量以及结合论文[2] [3]的理论支持，我们可知血液在红光和绿光的照射下的吸收率是最大的，也就意味着强度值是最大的。因此可以更好的检测到强度变化，所以在后续的开发当中，我们都将使用单个像素中的红绿通道的强度值，来作为数据的来源。由于只使用了其中两个通道的强度值，我们的运算量就可以几何级数减少。
从原来的 2^{32} 个数据转变为了 2^{16} 个数据获取光强的方法是：
该帧的光强值 = \frac{单个通道的强度值}{像素的个数}在1.0版本中我的实现方法是通过经验值测算出一条固定的基线，来判断历史采集的光强值，有多少个跃出基线的数据，就计作多少个波峰。
但这种设计是有问题的，比如最右侧的波峰，因为各种外部原因强度没有达到基线，导致丢失。当通过人眼的辨识，这个波峰不属于噪声，应该是要被记录的。
另外通过测试我们可以很容易的发现下图的假波峰和假波谷的噪声信号，这种变化幅度过大的数据也应该是被丢弃的。
因此在1.1版本中，基线的计算方法做了改进。通过动态基线可以适应复杂环境光线的变化，提高测量的效率和准确性。
通过动态基线，判断有多少多少次实际的跃出，进而换算出有多少个波峰。
仅仅记录波峰个数是远远不够的，我们还要计算一次跃出所消耗的时间(从波谷到跃出基线到波峰所消耗的时间)。因为受测者的光线环境如果不稳定，含有频繁的光线变化，则可能导致光强变化幅度过大，造成数据的计算误差。因此我们还需要将跃出时间作为计算的一个因素，计算平均的跃出时间。最后计算出每分钟的心率次数：
BPM = \frac{测量最大时间}{平均跃出时间}到目前为止，小程序端最大的难点不在于测量算法的开发上。反而是在优雅的展示上画了大量的时间。
1.FrameData大小。通过Camera组件，我们可以直接获取到手机的视频流。由于我们这个算法中仅仅需要计算帧的光强，所以仅仅需要最低质量的FrameData即可。即降低了资源的消耗也提升了算法运行的效率。通过frame-data属性，修改为small即可启用最低质量的FrameData。
2.Canvas绘图效率低。在去年小程序退出了Canvas 2D的绘图API，可以实现同层渲染。为了更高的渲染效率，我自然就是选择并使用了最新的API进行曲线的绘制。在电脑模拟器上的表现确实印证了效率更好的这一说法。但诡异的是在Android端上，Canvas2D的运行效率非常低，导致经常性假死，不知道怎么修复。因此只能暂时被搁置，待到日后有能力后再做修复。
这次的开发通过学习更多前人的研究结论来帮助我将算法优化出来，收获满满。感觉到非常的振奋人心。期待后面能继续搞点好玩的DEMO。
最近看到Tensorflow的BlazeFace。可以用很小的体积的模型来识别人脸，感觉可以借此，结合PPG算法，实现rPPG式的检测算法，日后有时间可以继续搞一下，感觉会非常的好玩。同时Canvas的问题也需要被修复，或许能够通过WebGL来修复?但是我还不肯定，需要后续的实验才能证明，待到后面再修吧。
由于本人不是电子工程专业，所以上文中可能会涉及到部分不规范的说明和解释。如果您能够在评论中帮助我指出来并帮助我改正，我将十分感激您，谢谢。
[1] ECG/PPG量测解决方案
[3] 血液成分对光吸收规律的实验研究