这个方案依赖 Apple iMessage 来实现，看之前确保你的手机是 iPhone 电脑是 Mac。

背景

如今各大手机都能实现短信验证码来了，输入法自动识别，然后填充到文本框里。

在使用 Mac 进行办公的时候常常也需要收个验证码，这时候需要打开手机解锁然后背下 6 位数的验证码，在电脑上一个个输入。

以前还不觉得麻烦，还以为大家都这样，直到有一天在用 Safari 到时候发了条验证码，突发现 Safari 可以自动识别 iPhone 收到的短信验证码，然后一键填充到文本框，简直不要太方便。

然后因为这个功能我强行从 Chrome 切换到了 Safari ，但使用过程实在难受，前端调试、各大网站的适配低等等，整体性能体验不如 Chrome （也有可能是那些个网站不针对 Safari 优化），想了想还是用回 Chrome 吧，但切回去以后收短信又很难受了，那咋办呢。

还好我成年了，可以选择全都要；随即开始找方案。

其实最早的需求是自动转发短信给企业微信机器人，然后找了半天，，发现以前 AppleScript 可以自动转发消息，但是某个版本以后苹果删除掉了这个功能，只能另寻他路。

然后就开始各种 Google，直到看到这个老哥的文章，就可以开始一步步照着做了，各种细节不再赘述（懒得写了，自己看自己Google吧。

直接抄

自己也简单的写了个 Shell，懒得看的可以直接抄，分几个步骤。

1、iPhone 里找到 Settings - Messages - Text Message Forwarding 选择上你的 Mac （需要同时登录同一个 Apple ID。

2、创建脚本

• （比如路径在 /Users/${Your Name}/Shells/AutoCheckCode.sh）

  脚本执行一次为 1 分钟，step 为每次执行间隔，默认 3 秒检查一次 iMessage 有没有收到带 验证码 的信息，并且默认复制最前面的 4-6 个数字，偷懒写的比较简单，规则后续建议自己调整。

  #!/bin/bash

  step=3;

  每 step 秒执行一次

  checkCode(){

    echo "starting to check code";
    # 路径中的 Bokun 记得改成自己电脑的名字
    # 通过 Sqlite3 查 1 条 iMessage 最近 5 秒收到消息（iMessage 收到消息的时间可能有延迟，这里实际冗余多了 2 秒）
    #! 注意这个时间和 step 要匹配好，不然可能每 step 秒都会查出消息，导致重复通知。
    #! /Users/Bokun/Library/Messages/chat.db 
    #！这个 DB 文件和目录记得给开权限，默认是不给读的。
    result=$(sqlite3 /Users/Bokun/Library/Messages/chat.db 'SELECT text FROM message WHERE datetime(date/1000000000 + 978307200,"unixepoch","localtime") > datetime("now","localtime","-5 second") ORDER BY date DESC LIMIT 1;')
  
    name="验证码";
    
    # 看下最近有没有收到消息
    if [ ! $result ]; then
        echo "latest $step second is not receive code messsages";
        return 
    fi
  
    echo "result is $result";
    echo "keyword is $name";
        
    # 如果短信中包含验证码则取前 4-6 个数字
    if [[ "$result" =~ "$name" ]]; then
        code=`echo $result | grep -o "[0-9]\{4,6\}"`;
  
        # 将获取到的数字输出到剪贴板
        echo "$code\c" | pbcopy;
  
        # 发个系统通知，展示内容，同时提醒你可以 Command + v 粘贴了。 
        osascript -e "display notification \"$result\" with title \"短信验证码\"";
  
    fi
  

  }

  每分钟执行一次，一次执行 60/step 次，规避 crontab 最低只能 1 分钟执行一次的问题

  for (( i = 0; i < 60; i=(i+step) )); do

    checkCode;
    echo "i now is $i";
    sleep $step;
  

  done

3、创建自动任务（Crontab）

执行前务必手动跑跑脚本，不然出问题脚本在后台无限跑要找出来杀掉挺麻烦

• 打开 Terminal

    crontab -e
  

• 设置定时任务（每分钟跑一次）

    */1 * * * * sh /Users/Bokun/shells/autoCopyCode.sh >> /Users/Bokun/cronlog/autoCopyCode.log 2>&1
  

确认好自己文件的位置，出问题可以去看后半段的 log

大功告成，后面收到短信验证码直接 command + v 就可以粘贴了，各种参数可以自己调整。

这篇拖了很久了，想想还是趁着清明把债给补上把。

前言

之前遇到个需求， 要把前端所有图片变成CDN链接。但是还没有接触过 webpack 相关配置， 只能硬着头皮上了。

常用参数

• entry - 程序的启动入口（多页应用的话可以配置数组）
• context - 上下文路径（绝对路径）
• output - 输出消息
  • path - 输出文件存放的路径
  • filename - 输出文件名
• module - 对不同模块的处理
  • rules - 根据规则对不同的文件做处理 （ loader ）
• plugins - 插件数组
• resolve - 解析
  • alias - 别名 （在import和require中可以使用）
• devServer - webpack 提供的本地 server
  • contentBase - 启动目录
  • compress - gzip 压缩
  • port - 服务的端口号

简单的例子

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

const webpack = require('webpack')
const path = require('path')

// 代码混淆插件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // 模块处理
  module: {
    // 处理规则规则
    rules: [{
      // 处理的文件夹
      include: [path.resolve(__dirname, 'src')],
      // 处理的 loader
      loader: 'babel-loader',
      // loader 的参数
      options: {
        plugins: ['syntax-dynamic-import'],

        presets: [['@babel/preset-env', {
          'modules': false
        }]]
      },
      // 匹配规则
      test: /\.js$/
    }, {
      test: /\.(scss|css)$/,
      // loader 的另一种写法
      use: [{
        loader: 'style-loader'
        // 跟上面一样， loader 的参数配置
        options: {}
      }, {
        loader: 'css-loader'
      }, {
        loader: 'sass-loader'
      }]
    }]
  },
  // 输出设置
  output: {
    path: '/dist',  // 输出路径
    filename: '[name].[chunkhash].js' // 输出文件名
  },
  // 开发模式
  mode: 'development',
  plugins: [
    // 混淆插件
    new UglifyJSPlugin()
  ]
}

话说回来

简单的介绍过后，那如何去实现一个图片CDN化的操作。简单来说就两步：

1. 找到所有图片
2. 将图片的路径替换成 CDN 链接

我这里用了file-loader去做这个处理，顺便将替换的域名提取出来，与公共的配置放到一起方便管理，代码如下。

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

...
{
  // 匹配图片
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        // context 用来规定loader执行上下文
        context: '/',
        // 将图片的输出路径做统一处理，实际上url取到的是文件存放的绝对路径
        publicPath: url => {
          // 默认有个 public 的文件夹前缀
          let tmpStr = path.resolve('../public');

          /* windows 的路径兼容 */
          // 兼容 Windows 将 Windows 下的 \\ 替换成 /
          tmpStr = tmpStr.split(path.sep).join('/');
          // 去除盘符 C: 和 最前面的 / 
          tmpStr = tmpStr.replace(/^([C-Z]:)?\//, '');
          /* 兼容结束 */

          // 清除多余路径 留下图片目录
          url = url.replace(tmpStr, '');
          // 获取 cnd 域名，这个可以根据实际环境来
          return utils.getStaticHost(debug) + url;
        },
        // 是否输出文件
        emitFile: false,
      }
    }
  ]
}
...

补充一下

想要文件被loader解析到需要以import或 require引入，然后以变量的方式引用。

vue 的 template 会转换成 js 引用，所以不需要特殊处理

1
2
3
4
5
6
7

<template>
  <img :src="img"/>
  <img :src="require('./1.jpg')"/>
<template>
<script>
  import img from './1.jpg';  
<script/>>

前言

算了，懒得写了，就这样吧。

Code

组件内写法

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

//template
<div v-tap="{methods: func, args: [1,2,3]}"></div>

// js
directives: {
  tap(el, binding) {
    const handle = binding.method;
    const args = binding.args || [];
    //do something
    handle.call(el, args);
  }
}

突然没啥心情写了，就这样看吧，有空再补充。

以下所有 Bokun 都是电脑账户名称 需要替换成自己的电脑账户名称

1. 初始化配置信息

git config --global user.name "Bokun"
设置用户名
git config --global user.email "ninebook@hotmail.com"
设置邮箱

2. 生成 SSH

ssh-keygen -t rsa -C "ninebook@hotmail.com"
会问到保存位置，账号密码类的 直接全部回车默认就可以了

如果已存在 会询问是否覆盖

• /c/Users/Bokun/.ssh/id_rsa already exists.Overwrite(yes/no)
• ~/.ssh/id_rsa already exists.Overwrite(yes/no)

• 通过以上步骤 ssh 就已经配置完成了

3. 用记事本打开 id_rsa.pub 文件， 里面就是你的 ssh 密钥了

默认位置是在

• C:\Users\Bokun\.ssh
• ~/.ssh

4. 复制到相应的代码托管平台上去

##前言
挺久之前就想弄个博客吧，由于拖延症硬是活生生拖到了毕业，趁着手头上没啥东西，抽空把博客搭出来。
原本想自己写一个，后面觉得太麻烦。还是用 Hexo 好了。
搭建的过程并没有一帆风顺，小小记录一番，也便后来人参考。

搭建过程

前提准备

使用之前需要一些前提环境 (Windows)

• NPM (一般下载 Node.js 安装，就会自动安装)

如何安装

以下命令全在命令行完成 (Win + R -> cmd)

• npm i hexo-cli -g
• hexo init <项目名称>
• cd <项目名称>
• npm i

  安装主题

在主题商店挑选一个喜欢的主题，然后进入到其仓库地址下载下来，放到项目目录的/themes下。

以我使用的 Material 为例

• 从项目地址,下载项目
• 放入/themes下，更名为 Material。
• 修改/_config.yml文件， 找到theme，修改为 Material(/themes下的文件夹名称)
• 进入/themes/material，将_config.template.yml复制一份，重命名为_config.yml。

挂载 Github

这里需要一个 Github 账号，请自行注册

• 安装git插件 npm install hexo-deployer-git --save

• 创建一个新项目，命名为<username>.github.io

• 复制项目的 ssh 地址

• 修改/_config.yml文件

    deploy:
      type: git
      repo: <git https 地址>
      branch: master
  

  进入 GitHub 项目地址， 选择 Setting 选项卡

向下滚动找到GitHub Pages，配置 GitHub Pages

命令

• 新建文章

  运行 hexo new post <博客名>, 在 /source/_posts 目录下会看到新建的我呢推荐

• 测试

  运行 hexo s --debug， 然后直接到 localhost:4000 预览项目

• 发布

  运行 hexo d -g， 将自动发布到 GitHub, 然后就可以开始访问你的博客了。地址为<username>.github.io