基于加速度和重力感应判断设备横屏

发表于

前言

项目里需要根据设备拍摄横竖方向，切换屏幕上显示的内容，查阅小程序文档以及相关资料，找到两种解决方法并记录下来。

加速计

小程序的设备API中提供了加速度计的监听方法，使用方法如下：

1
2
3
4
5
wx.onAccelerometerChange(function(res) {
  console.log(res.x)
  console.log(res.y)
  console.log(res.z)
})

以手机竖直面向用户为例，加速计的三轴坐标系统的X、Y、Z轴定义如下：

  • 沿着手机屏幕顶部向上是Y轴正方向，向下是Y轴负方向
  • 当手机顶部朝上时，沿着手机屏幕向右是X轴正方向，向左是X轴负方向
  • 正对手机时，垂直屏幕向外是Z轴正方向，垂直屏幕向里是Z轴负方向
阅读全文 »

小程序裁剪图片

发表于

核心步骤

使用drawImage方法将图片绘制到canvas上，并放在视图外，用户实际看到的是img标签所展示的图片，获取裁剪区域的四个点坐标，使用canvasToTempFilePathAPI根据坐标导出相应的图片。

注意事项

将图片绘制到canvas上时为了避免原图大于实际显示的canvas大小，从而导致导出的图片模糊，要根据原图实际宽高按情况绘制canvas大小，并保持原图的宽高比。

展示效果

阅读全文 »

前端代码规范化实践

发表于

代码风格检查

强规范团队主要用了eslint + husky + 自定义检验代码 方式

eslint

团队使用了eslint的两个插件,分别是plugin:vue/recommended, eslint:recommended, 具体的eslint规则借鉴了eslint-config-vue这个仓库的配置规则

阅读全文 »