在微信小程序中直接使用uni.chooseMedia即可调用微信相机进行摄录。但为了保持体验的相似性，造一个仿微信相机的轮子是有必要的

因为小程序的胶囊很碍事，所以对UI进行了调整，功能按钮均移动到页面下方。

本相机支持照片及视频的摄录，拍摄后可进行预览、重拍。采用页面栈的形式进行传值。

• 使用例：ClockIn.vue（记得先在pages.json中注册）

本文使用的方式是直接上传，不需要向后端获取凭据。优点是上传方便，缺点是本地存储Key较为不安全。

一、目录结构

1
2
3
4
5
6
7
8
9

-- common
   -- crypto
      -- base64.js
			-- crypto.js
			-- hmac.js
			-- sha1.js
	 -- oss
			-- index.js
			-- OSSConfig.js

二、使用例

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

<template>
  <view style="display: flex;flex-direction: column;">
    <button @click="uploadImage">点我上传图片</button>
    <button @click="uploadVideo">点我上传视频</button>
    <image v-if="imageKey" :src="ossPath+imageKey" mode="aspectFit"></image>
    <video v-if="videoKey" :src="ossPath+videoKey"></video>
  </view>
</template>

<script>
  const app = getApp();
  import OSS from '@/common/oss/index.js'
  export default {
    data() {
      return {
        ossPath: app.globalData.ossPath,
        imageKey: '',
        videoKey: ''
      }
    },
    methods: {
      uploadImage() {
        const _this = this;
        OSS.ossUploadImage({
          success(res) {
            _this.imageKey = res;
          }
        })
      },
      uploadVideo() {
        const _this = this;
        OSS.ossUploadVideo({
          success(res) {
            _this.videoKey = res;
          }
        })
      }
    }
  }
</script>

零、前言

最近接到需求，领导希望使用微信开放平台上免费的We分析进行数据埋点，但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改，笔者奉命进行了技术调研，考虑通过劫持事件的方式来实现捕获特定事件并上传分析平台的功能。

需要特别注意的是，微信小程序是不能得到document对象的，$el上挂载的也是undefined，自然也就不能通过全局addEventListener的方式来监听特定事件。在调研中想到可以通过劫持小程序的自定义组件构造器Component()来实现事件的监听。

为了便于理解，部分数据结构通过TypeScript接口形式进行描述。

一、软件环境

• HbuilderX 3.4.7.20220422

前言

俗话说的好，万事开头难。这篇文章主要介绍一下Vue 3项目的初始化所需工作。

主要配置

技术选型：

• 全家桶：Vue3 + TypeScript + Vite + Pinia + Vue Router 4
• CSS相关：Sass + PostCSS + UnoCSS

前言

这是一份写给项目组内部的基础普及文档。
在下文中，Vue 2.x将会简称为v2。如无特别说明，Vue或v3特指Vue 3.x。

常用全局API

• Vue.prototype

  在v2中，我们经常使用形如Vue.prototype.$xxx = xxx的全局挂载形式以添加所有组件都能访问的 property。但在v3中，该api迁移为app.config.globalProperties.$xxx = xxx。

概述

本文档结合了AirBnb代码规范及阿里代码规范制订而成。

通用

公共部分

• 缩进：前端代码应当采用空格而非 tab 进行缩进，每次缩进为2个空格。
• 行末空格：通常应当删除行末多余空格。md 文件比较特殊，行末4 个空格可作为换行标志，因此可以保留。
• 文末空行：文件末尾应当保留一个空行，原因是某些 GNU 软件默认文件最后一行是空行，进行文件处理时会忽略最后一行。

CSS

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

//HorizontalTree.module.scss
$connect-line: 30px;
$child-padding-left: 10px;

.horizontal-tree ul {
  display: flex;
  flex-direction: column;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 2px 0 2px $connect-line;
}

.horizontal-tree ul ul::before {
  content: '';
  border-top: 2px solid cyan;
  position: absolute;
  bottom: 0;
  left: 0;
  width: $connect-line;
  height: 50%;
}

.horizontal-tree li {
  display: flex;
  padding: 2px 0 2px $connect-line+$child-padding-left;
  position: relative;
  align-items: center;
}

.horizontal-tree li::before {
  content: '';
  border-left: 2px solid cyan;
  border-bottom: 2px solid cyan;
  position: absolute;
  left: 0;
  bottom: 50%;
  width: $connect-line;
  height: 50%;
}

.horizontal-tree li::after {
  content: '';
  border-left: 2px solid cyan;
  position: absolute;
  left: 0;
  bottom: 0;
  width: $connect-line;
  height: 50%;
}

.horizontal-tree li:first-child::before,
.horizontal-tree li:last-child::after {
  border-left: none;
}

.horizontal-tree li:last-child::before {
  border-bottom-left-radius: 4px;
}

.horizontal-tree li:first-child::before {
  border-bottom: none;
}

.horizontal-tree li:not(.horizontal-tree-root):first-child::after {
  border-top: 2px solid cyan;
  border-top-left-radius: 4px;
}

模板

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

<div>
  <div class="horizontal-tree">
    <ul>
      <li class="horizontal-tree-root">
        父节点
        <ul>
          <li>
            123
          </li>
          <li>456
            <ul>
              <li>
                114
              </li>
              <li>514</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>