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

下载

根据你都平台进行下载

注册

点击 帮助 -> 注册 输入下面的信息即可

Registered Name: https://zhile.io

License Key: 48891cf209c6d32bf4

运行

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

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

2. cd BilibiliVideoDownload

3. npm i

4. node app.js

URI编码问题

在进行GET提交参数的时候，如果参数中有中文，记得要进行URI编码，encodeURI(参数) 如果不进行编码，ios设备正常。安卓设备会可能出现获取不到参数的情况。

新特性支持情况

有些新特性可能会只支持高版本，对于低版本不支持，开发的时候要看清楚官方文档。例如：icon组件的size属性从2.4.0基础库开始支持rpx属性。如果用户客户端基础库小于这个版本，就会出现无法显示的问题，从而影响业务。

封装请求

开发开始之前最好根据业务封装请求函数，这样会事半功倍。

问题探讨

chart.js到LineChart图表默认动画方向是从下到上，没有像echart那样从左到右到效果。动画方向上写死到代码里面到，不可更改。我通过翻阅GitHub issues发现了有人提出过类似到问题，作者也简答了，可惜我能力有限没有理解作者到意思，那就从另一种思路开始解决吧。

chart.js提供给开发者的配置项较少，往外暴露的自定义接口也较少。我在开发中发现图例与图表的距离是个固定值10像素不可更改，然后在研究chart.js的源代码发现了更改方法。