准备工作

1. 安装node

2. 安装git

3. 配置git

node和git安装好以后，命令行依次输入node -v npm -v git --version如果返回版本号则安装成功，然后开始配置git的邮箱和名字，把下面命令中的名字和邮箱替换成自己的就行

1
2
3

git config --global user.name "John Doe"

git config --global user.email johndoe@example.com

设备

1. Deli DL-730c

2. 纸张是模切标签(100mm*100mm)

3. chrome浏览器打印

作用

.gitignore文件可以过滤掉不需要提交到git库的文件。例如node_modules文件夹等等。

用法

用文本编辑器打开.gitignore文件，一行写一条规则。

目前功能还不全可能会有BUG

入门

以Vue Cli2.x为例

引入

在main.js中引入并use

1
2
3

import WyValidate from 'wy-validate';

Vue.use(VeeValidate);

运行

0. 安装ffmpeg (视频合并转码会用到)

1. git clone https://github.com/blogwy/BilibiliVideoDownload.git

2. cd BilibiliVideoDownload

3. npm i

4. node app.js

postMessage

postMessage是Html5引入的新API，可以安全地实现跨源通信。(跨页面/窗口/源等)

1

otherWindow.postMessage(message, targetOrigin);

背景知识

微信小程序是可以通过点击右上角的menu来进行分享(转发)的。但是代码里面不可以写个公共函数来调用，必须每个页面写一遍，这就使得代码冗余了，业务修改的时候必须全都修改一遍，很容易忘记某一页。下面通过一种方法，先写一个公共的Page函数，在公共的Page里面写入分享代码，然后在具体的页面调用使用这个公共Page函数实现分享。

建立公共Page.js

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

export default function (options = {}) {
  return Page({
    onShareAppMessage(res) {
      if (res.from === 'menu') {
        // 来自右上角分享菜单
        return {
          title: '分享标题',
          path: '页面路径',
          imageUrl: '分享图片路径'
        }
      }
    },
    ...options
  });
}

前置知识

上一篇文章是前端调用摄像头，然后把流数据给到video标签，用canvas截取图像。前端调用库解析二维码和条形码。

这篇文章是前端获取到流数据发送给后端，后端解析成功后把结果返回前端。

getUserMedia

获取摄像头/麦克风，回调成功会返回一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。MDN

1
2
3
4
5
6
7

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

getUserMedia了解

HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、麦克风）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
点击查看getUserMedia的api

截止到今天，chart.js版本v2.8.0不支持配置Legend对齐方式，默认居中。但是我在Github Pull Request找到了解决方法。

https://github.com/chartjs/Chart.js/pull/6141