Eric's Home

demo源码：https://github.com/ericlee33/h5-id-card ，如果觉得有帮助的话，欢迎点个star👏

背景

由于h5通过 <input type="file /> 方式吊起拍照的为系统相机，给用户的体验并不是很好，没有裁切框，也无法在系统相机上附加 tips 蒙层进行扩展，比如在蒙层上告知用户拍照的注意事项。所以业务上需要实现一个自定义拍照身份证的页面。

前期准备工作

各端兼容性现状

结论：
安卓：chrome53版本之后支持该api。
ios：仅safari11+支持。ios微信内置浏览器、Chrome、Edge等其它浏览器均不支持。

考虑替代方案

以下情况，均需要考虑替代方案：
第一类：当满足下列条件，均需要采用系统相机拍照方案
1.用户不提供摄像头权限。
2.命中以下其中任意一条错误

• AbortError［中止错误］
• NotAllowedError［拒绝错误］
• NotFoundError［找不到错误］
• NotReadableError［无法读取错误］
• OverConstrainedError［无法满足要求错误］
• SecurityError［安全错误］
• TypeError［类型错误］

3.用户浏览器不支持该api

自建脚手架地址，觉得好用的话欢迎点个✨：
https://github.com/ericlee33/create-compositive-react-app-cli

效果图

背景

• 由于最近公司内，立项了多个不同业务，项目之间相互独立，但底层架构相似，从0搭建新项目变成了很寻常的事情，当你一个事情做多了之后，就感觉到很难受，作为一个工具人，需要想办法解决掉这个问题。

• 当通过create-react-app创建项目模板之后，还需要删除掉一堆不需要的东西，安装很多框架生态链，Linter等依赖，完成install后，还要配置项目底层各种东西，很耗费精力和时间。

FB已经提供了create-react-app，为什么还要做react脚手架？

先谈谈vue-cli的优点

• 提供了可选配置项（由于Vue周边生态较为单一，官方提供的路由/状态管理方案只有一个，不像React生态光一个状态管理方案就有MobX、Redux-Saga、Redux-Thunk等等。。）
• 令人舒适的Inquirer界面（不像create-react-app，通过执行脚手架时，传入不同configuration来创建不同需求的模板）
• 提供保存配置的功能

create-react-app的缺点

在我看来，从0快速搭建项目的角度看，主要有以下几个问题

注：本文使用的Formily为v1版本，21年4月中旬阿里团队已经推出v2版本 https://v2.formilyjs.org/ ，但是跨度非常大，为Breaking change，相当于框架底层完全重构，对于v1版本的项目来说迁移成本非常大。

背景

Formily是什么？

https://formilyjs.org/#/bdCRC5/dzUZU8il
这里引用官网的描述：
Formily 是一个由阿里巴巴集团多部共建的面向中后台复杂场景的表单解决方案，它也是一个表单框架。

Formily实现了什么？

• 在复杂联动场景下更加清晰简单的描述联动的方式
• 在超多表单项场景下可以获得更好的表单操作性能
• 在跨终端场景下实现通用表单解决方案

Formily组件说明

Formily v1提供给了我们3种React的UI框架

以下这些UI框架经过formily的二次封装，UI组件经过封装后，完美兼容了Formily

3种UI框架分别为：

h5 wxsdk分享好友、朋友圈图片不展示

这个bug很有意思，表现是有些图片会展示，有些图片不展示。

于是我想到可能是webpack打包的问题

由于项目是通过脚手架搭建的，我们找到url-loader，可以看到options中有imageInlineSizeLimit。

1
2
3
4
5
6
7
8
9

// webpack.config.js
{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
        limit: imageInlineSizeLimit,
        name: 'static/media/[name].[hash:8].[ext]',
    },
},

const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');

那么原因就很清晰了，大于10000的会打包成base64，微信读取不了base64为封面图，所以无法展示。

ios无法解析YYYY-MM-DD

事情是这样的，有人说小程序有页面白屏，我是安卓手机，简单排查了一下，没有复现出来。于是看了下日志，大部分机型为ios，于是借了一台iPhone手机，真机一看，还真是白屏。

在vConsole中查看报错，看到了Invalid Date

背景

在H5上传文件业务开发过程中，上传功能需要让用户上传 图片/pdf 文件，我们很容易想到，只需要改变input的accept属性就好了，我们使用的accept属性如下。

<input accept="image/jpeg,image/jpg,image/png,application/pdf" type="file" />

但是在安卓真机Chrome上测试时，发生了一些问题。

可以看到，我们点击Choose File之后，出现了2个不应该出现的按钮，Camcorder 和 Recorder。
通过排查，我判断是Chrome自身的问题，那么如何为Chrome提issues呢？

在哪里为Chrome提Issues？

https://bugs.chromium.org/p/chromium/issues/list

可能这里有人会说，这不是chromium的bug区吗，并不是Chrome。

这里简单科普一下：

提供给服务端自定义校验函数

由于后端要求动态提供校验规则，并且每一个表单字段都需要很多种校验方式，这里进行探索。

1
2

// /public/index.html
<script src="https://服务器地址/xRulesMethods.js"></script>

这里提供给后端模板，文件格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

(function (window) {
    window.rulesMethods = {
        customRule2: (value) => {
            return value === '123' ? '不能等于123' : value === '234' ? '不能等于234' : ''
        },
        customRule3: (value) => {
            return value === '14' ? '不能等于14' : ''
        },
        customRule4: (value) => {
            return value === '1' ? '不能等于1' : ''
        },
    };
})(window);

我们在index.js引入该自定义校验规则即可

1
2
3
4

import {
    registerValidationRules,
} from '@formily/antd'; 
registerValidationRules(window.rulesMethods)

这样服务端就可以进行完整的自定义校验操纵了

JSON schema使用自定义函数方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
    "name": {
        "key": "name",
        "type": "string",
        "title": "姓名",
        "name": "name",
        "required": true,
        "x-props": {
            "itemClassName": "form-item"
        },
        "x-component-props": {
            "bordered": false
        },
        "x-rules": {
            "customRule2": true
        },
        "x-component": "input"
    },
}

前述

本文仅介绍非抓包之外的其它调试技巧
我们已经习惯了模拟器进行调试，那为什么还需要进行本地真机调试？
举个例子：

• ios真机环境，我们收到短信验证码后，点击复制，ios系统层面会存在bug，剪切下来的验证码会被重复两遍，例如收到的验证码为123456，但是实际复制后到剪切板的就变成了123456123456。

如果你对「各端h5的坑」了解不深。没有使用真机调试的方式，就无法在本地调试的阶段就发现潜在的问题。

利用Chrome进行真机调试

为什么真机测试是必要的？

首先分享一个坑

一开始，为了实现一屏完全填充，考虑到移动端对vw，vh完美支持的情况下，我使用如下代码对宽高进行控制

1
2
3
4
5

html, body {
  height: 100vh;
  width: 100vw;
  background-color: blue;
}

好的，让我们看看效果，在模拟器上，表现很完美，整整一屏的blue，这样看起来是没有问题的。

Summary For 2020

2021.1.17

我一般很少写日记，不过回忆过去大学几年间的发生事情，的确很值得去记录一下。就像阮一峰的博客一样，Frank他会把一些都记录进去，分享给大家。即便博客没有人看，那也能证明这段记忆曾经存在过，能被互联网记录下去，git pages就是一个很好的平台，能够帮我们保存这些Best Moments。

让思绪回到大一 2016年

还记得，大一的时候
那时候有一门课叫做大学生职业规划，当时，老师给大家丢出了一个问题，大家有没有思考过自己未来想要做什么专业？

回想自己当时的当时自己也没有想过未来自己要做什么事情，只是听学长和老师们说，自动化专业的学生们，就业不需要发愁，这可是个万金油的专业，我内心暗喜，这就算是坐上了顺风车吧。

Back to 2019

不平凡的2019年
19年一整年，老爸都病得很重，这是我第一次感觉到了生活上的压力

进入2019年之后，大三下半学期开学后，真切感到身边的一切都发生了些许改变。

2019.3

• 下课间隙，听到大家讨论证书，有些人说不需要考什么，如果要考的话，就考个电工证吧。有了电工证，就可以考国家电网，不过进去之后，前2年还要爬电线杆。