二十几岁的你

官方源，在国内的网络环境更新升级工具都比较慢，可以考虑将源替换为国内的源，如清华大学的镜像，
以下以ubuntu为例：

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

# 内核版本
uname -a
# Linux pooja 5.4.0-33-generic #37-Ubuntu SMP Thu May 21 12:53:59 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

lsb_release -a
# No LSB modules are available.
# Distributor ID: Ubuntu
# Description:    Ubuntu 20.04 LTS
# Release:        20.04
# Codename:       focal

# 备份官方源
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak

替换为清华大学源，
将/etc/apt/sources.list的内容修改为如下

1
2
3
4
5
6
7
8

deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse

修改以后重新update一下

1
2

sudo apt-get update
sudo apt-get upgrade

在编写代码时能获得智能提示是一件极其舒适以及富有安全感的事情，javascript的代码，在很多情况下都不能获得很友好的提示，故有了typescript，但是从javascript迁移代码到typescript中的代价比较大，所以js项目的开发过程中，总结了几种在vscode中获得代码智能提示的方法，以供大家参考。

模块使用

使用npm模块时，一般的模块都会带有d.ts的类型文件描述，所以当模块引入进来以后，使用模块的时候都会带有相关接口或者属性的只能提示。
某些库如果没有d.ts文件的时候，可能需要安装类型文件 @types/some-module。

类型注释

某些变量在开发过程中是可以确定变量类型的，所以可以在定义变量或者方法的时候添加js注释，以获得相关的代码提示，如

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

/** @type { HTMLCanvasElement } */
const canvas = document.getElementById('tutorial');

/** @type { import("vuex/types").Module } */
const mod = {
  namespaced: true,
  state: {}
}

/**
 * @param {String} url 
 * @param {Object} data 
 * @returns {Promise<{ code: Number, message: String, data: Object }>} 
 */
async function baseRequest(url, data) {
  return axios({ method: 'post', url, data });
}

当然也可以提前定义类型：

1
2
3
4
5
6
7
8
9
10
11

/**
 * @typedef { import("vuex/types").Module } Module
 */
 
// some code 

/** @type { Module } */
const mod = {
  namespaced: true,
  state: {}
}

jsconfig的typeAcquisition

有些库可能是通过html的script标签直接引进进来的，然后会在代码里使用某个全局变量，这种情况下，想要或者这个全局变量的相关智能提示，可以使用jsconfig.json的typeAcquisition提供的功能，简单用法如下：
以createjs为例：
首先在html中引入了createjs的库

1
2
3

<!-- some code -->
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<!-- some code -->

然后安装createjs的类型

1

npm install -D @types/createjs

之后在项目的根目录下新建一个jsconfig.json文件，内容如下，当然还可以添加一下其他配置，这个配置文件很有用的

1
2
3
4
5

{
  "typeAcquisition": {
    "include": ["createjs"]
  }
}

具体代码使用：

1
2
3
4
5
6
7
8

const stage = new createjs.Stage('tutorial')

const circle = new createjs.Graphics();
circle.beginFill('red');
circle.drawCircle(100, 100, 50);

const shape = new createjs.Shape(circle);
stage.update();

当然这种方法的前提是有对应的类型文件，并且你知道类型文件中声明的namespace叫什么。

margin负值平常用的比较少，最近写一个盒子上流式布局，加上一些边距，使用一般的css比较难实现，后来用来margin负值，轻松解决，这里把一些margin负值的实际应用做一个总结，包括居中问题，等宽布局，等高布局，圣杯布局，双飞燕布局等。

在微信的ios版本里，iphone x/iphone xs 等机型在键盘顶起页面后，收起键盘页面不会回弹，但是轻轻摸一下页面，又会正常的。在safari里是没有问题的，微信的webview里有这个bug，一开始还以为是自己的布局有问题，一顿操作，发现最简单的html流式布局就会出现这个bug，猜测这个应该是微信的bug，操作了一下，有两种方法可以解决

1
2
3
4
5
6
7
8
9

<input type="text" onblur="handleInputOnBlur(event)" placeholder="说点什么吧">
<script>
function handleInputOnBlur (event) {
  setTimeout(() => {
    window.scrollTo(0, document.body.scrollTop + 1);
    document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);
  }, 10)
}
</script>

或者，

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

<input type="text" onblur="handleInputOnBlur(event)" placeholder="说点什么吧">
<script>
function handleInputOnBlur (event) {
  var count = 0;
  var screenHeight = window.screen.height;
  var blurInterval = setInterval(function() {
    document.body.style.minHeight = (screenHeight -= 10) + "px"
    if (count >= 10) {
      clearInterval(blurInterval);
      document.body.style.minHeight = ''
    }
    count++;
  }, 10);
}
</script>

具体用那种要看具体的页面布局，请自行尝试。

写代码时优秀的字体和高亮会让人很舒服，使用vscode的时候非常喜欢一款主题One Dark Pro，高亮，颜色以及背景色都很舒服。
还有一个代码格式化插件也非常棒Prettier，一键格式化，并且支持众多文件类型，最重要的是有对应的es-lint插件，简直完美。
还有推荐三款编程字体

• Operator Mono：非常好看的编程字体
• Source Code Pro：adobe公司出品的等宽编程字体（在没使用Operator Mono之前，一直使用这个）
• Microsoft YaHei UI：这个不多说，经典，windows自带

字体使用的时候需要把字体文件都放到C:\Windows\Fonts\文件夹下，系统会默认归档同一个字体的字体文件。
editor.fontFamily的值设置为Operator Mono, Source Code Pro, Menlo, Consolas, 'Courier New', monospace, Microsoft YaHei UI，找到C:\Users\用户名\.vscode\extensions\zhuangtongfa.material-theme-2.17.7\themes\OneDark-Pro.json，
在最后加上一段，配置斜体（Operator Mono的斜体真好看）

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

{
  "name": "Italics",
  "scope": [
    "emphasis", 
    "storage", 
    "comment", 
    "entity.other.attribute-name", 
    "entity.other.attribute-name.html", 
    "entity.other.attribute-name.tag.jade", 
    "entity.other.attribute-name.tag.pug", 
    "markup.italic", 
    "keyword.control", 
    "variable.language"
  ],
  "settings": {
    "fontStyle": "italic"
  }
}

这样你就拥有了One Dark Pro舒服的配色，Operator Mono好看的字体，省心的代码格式化Prettier

字体下载

基本设置

1
2
3

git config --global user.email=russellmars@sina.com
git config --global user.email russellmars@sina.com
git config --global core.editor vim

乱码处理

电脑win10 在使用git的时候无论时bash还是cmd或者是vs code里显示的commit message的时候中文都是乱码的。
解决方法，打开bash，依次输入如下命令：

1
2
3
4
5

git config --global core.quotepath false 
git config --global gui.encoding utf-8
git config --global i18n.commit.encoding utf-8 
git config --global i18n.logoutputencoding utf-8 
export LESSCHARSET=utf-8

然后在环境变量里加入LESSCHARSET=utf-8，问题解决。

在微信里做网页分享第一步要先在网页里引入jssdk

1

<script src="//res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

在单页应用中，微信sdk的分享配置不同，说下两个概念

• LandingPage 落地页面，刷新，a标签，location.href等方式直接到达的页面
• CurrentPage 当前页面，当前链接所处的页面

首先说一下android和ios的微信版本对url的识别问题
android里无论怎么跳转当前页面的url都是CurrentPage的url
ios里跳转以后的url还是LandingPage的url

所以android里在每次切换路由的时候都要config一次，并配置分享
而ios里在只需要在一开始配置一次即可，后面直接配置分享的api

以vue router 的history模式为例

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

function configShare () {
  initWxJsSDK().then(() => {
    configWxShare({
      title: 'titlexxx',
      desc: 'descxxxxxxxx',
      link: window.location.href,
      imgUrl: 'xxxxxx'
    })
  }, (error) => {
    // console.log(error)
  })
}

router.afterEach(route => {
  if (!route.meta || !route.meta.needShare) {
    // 必须用setTimeout做一个异步的操作，因为afterEach钩子中的 url还没有变化，会导致config失败
    if (window.__wxjs_is_wkwebview) { // ios里
      configShare()
    } else {
      setTimeout(() => {
        configShare()
      }, 500)
    }
  }
})

let isConfiged = false
/**
 * 初始化微信JsSDK
 */
export const initWxJsSDK = () => {
  if (!isWeixin()) {
    return Promise.reject('非微信环境无法config')
  }
  if (isConfiged && is.ios()) {
    return Promise.resolve()
  }
  let url = window.location.href.split('#')[0]
  if (is.ios()) {
    url = global.landPageUrl.split('#')[0]
  }

  return api.wechat
    .getJsSdkSign({
      data: {
        url
      }
    })
    .then(result => {
      return new Promise((resolve, reject) => {
        if (result.responseCode === 0) {
          isConfiged = true
          configJsSDK(result)
          wx.ready(enhancer(configJsSDKSuccessHander, resolve))
          wx.error(enhancer(configJsSDKErrorHandler, reject))
        } else {
          reject('JsSDK 接口请求失败')
        }
      })
    })
}

以上是通用页面的分享配置，如果有些页面需要单独配置分享信息，则需要给这个路由的meta.needShare设为true

1
2
3
4
5
6
7

{
  path: '/product-info',
  component: () => import('@/views/moonMall/product/info'),
  meta: {
    needShare: true
  }
}

并在页面的mounted钩子里做配置

1
2
3
4
5

mounted () {
  this.fetchData().then(() => {
    this.configShare()
  })
}

links

• 微信JS-SDK说明文档

在前端开发中有时候不得不使用post的方式去获取一张图片，如何把响应的图片数据在页面上显示

1
2
3
4
5
6
7
8
9
10

// response是响应体
const uint8Array = new Uint8Array(response.data)
// imageBase64 则是图片的base64数据，可以放在img标签的src中直接用来显示
// 在ios 上方法的参数长度有限制，所以不能直接使用String.fromCharCode方法调用
// let imageBase64 = window.btoa(String.fromCharCode.apply(null, uint8Array))
let imageBase64 = window.btoa(uint8Array.reduce(function (data, byte) {
  return data + String.fromCharCode(byte)
}, ''))
// 如果图片显示不出来，尝试加入图片类型
imageBase64 = 'data:image/jpeg;base64,' + imageBase64

禁止系统字体缩放对页面的影响

android

需要给webview设置

1

webview.getSettings().setTextZoom(100)

ios

无需设置webview，只需要给body设置样式：

1
2
3

body {
  -webkit-text-size-adjust: none !important;
}

nodejs的调试方式有很多，可以看官方文档，我英文不好，只研究了几种个人比较常用的。

• console.log
• chrome devtools
• vs code launch
• vs code attach