页面（Pages）

Next.js 13 采用了beta版的目录结构（/app）。新结构默认支持layouts（布局）、嵌套路由、服务器端渲染组件。与此同时你可以在layout中获取整个应用的数据，包括支持更精细粒度的嵌套布局。

在Next中，page是从pages文件夹下的js、jsx、ts、tsx文件中导出的React组件。每个页面都根据其文件名与路由相关联。

例：这是一个对应/about路由的组件pages/about.js

1
2
3

export default function About() {
  return <div>About</div>
}

HbuilderX自带了jsbeautify插件以进行代码格式化。然而当我们尝试新建外部CSS文件以分割过长组件代码时会发现，以scss或less为后缀的样式表文件无法正确地被格式化。解决该问题的方法有两种：

• 一、在DCloud插件市场下载Prettier插件

• 二、手动修改HbuilderX相关配置，使用自带的jsbeautify进行格式化

在微信小程序中直接使用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>