1、安装CMake （如果已安装可以跳过）

1.1 准备编译环境

1

yum -y install gcc gcc-c++

1.2 获取源码，并解压

1
2
3

wget https://github.com/Kitware/CMake/releases/download/v3.19.1/cmake-3.19.1.tar.gz
tar -zxf cmake-3.19.1.tar.gz
cd cmake-3.19.1

1.3 编译安装

1
2
3

./bootstrap --prefix=/usr --datadir=share/cmake --docdir=doc/cmake && make
sudo make install
cmake --version # 检查是否正确安装

2、安装 QConf

1
2
3
4
5
6

git clone git@github.com:Qihoo360/QConf.git  (如果没有权限可以直接去 Github 主页下载 zip 包)
cd QConf/
mkdir build && cd build
cmake ..
make
make install

3、启动

1

/usr/local/qconf/bin/qconf_agent

结尾可能出现 Failed to get conf! 是一个 WARNING，可以暂时忽略，已经启动成功了。

二、在 Node.js 调用

1、在项目中安装 node-qconf

首先配置环境变量

1

export QCONF_INSTALL=/home/work/local/qconf

安装依赖

1

npm install node-qconf

2、调用

1
2
3
4
5
6
7
8

// qconf.js
console.log('启动')
try {
  var qconf = require('node-qconf')
  console.log('version:', qconf.version())
} catch (e) {
  console.error(e)
}

qconf 的错误处理不太完善，又十分依赖本机环境，容易出现程序直接中断而没有报错的情况。因此需要 try catch （包括 require(‘node-conf’) 语句）

三、常见问题

Q：报错：Error: QConf init failed: 201

A：大概率是因为 QConf 没有启动 （参考 https://github.com/Qihoo360/QConf/issues/22）

Q：npm 安装 node-qconf 报错：

1
2
3
4

../qconf.cc:2:19: fatal error: qconf.h: No such file or directory
#include <qconf.h>
^
compilation terminated.

A：安装 node-qconf 前，需确保 QConf 已经被正确安装，并配置了 QCONF_INSTALL 环境变量

Q：require('node-qconf') 报错：

1
2
3
4
5
6
7
8
9
10
11

Error: libqconf.so: cannot open shared object file: No such file or directory
at Object.Module._extensions..node (internal/modules/cjs/loader.js:731:18)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/home/wwwroot/acs-platform-server/node_modules/node-qconf/qconf.js:1:80)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)

A：找不到libqconf.so文件，需要在/usr/lib或/usr/lib64下创建libqconf的软连接

1

sudo ln -s /usr/local/qconf/lib/libqconf.so /usr/lib64/libqconf.so

参考链接：

https://github.com/Qihoo360/QConf

https://github.com/Qihoo360/QConf/blob/master/doc/Qconf%20Node%20Doc.md

https://github.com/bluedapp/node-qconf

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

// login
function checkUserLogin() {
  const configData = this.getUserConfig()
  if (configData.username) {

  }
}

// user-config.js
function getUserConfig() {
  // do something and return userConfig
}

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

interface UserConfig {
  username: String
  uid: Number
}

function checkUserLogin() {
  const userConfig:UserConfig = this.getUserConfig()
  console.log(configData.name)
}

// user-config.js
function getUserConfig:UserConfig() {
  // do something and return userConfig
}

2. 代码补全

声明文件 d.ts

其实我们一直在用 ts

VSCode 对 d.ts 的支持

Automatic Type Acquisition 功能，会将自动下载社区中流行的 @types

Webstorm 对 d.ts 的支持

自动

对于自己的库，可以编写自己的 d.ts，发布到 @types/ 下

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

// @types/xxx/index.d.ts
declare namespace $ACS {
  /**
    * 工具方法
    */
  export const utils: {
    /**
      * 是否处于微信小程序
      */
    isMini(): Boolean
    /**
      * 当前是否处于APP内
      */
    isApp(): Boolean
    /**
     * 获取当前所在的联调、测试、本地、线上、预发布等环境及域名信息
     */
    getEnv(): {
      env: 'local-dev'|'online'|'pre'|'test'
      mHost: String
    }
  }
}

页面埋点

在页面的 onShow 勾子函数中上传埋点数据

曝光埋点

利用小程序提供的 createIntersectionObserver API, 监听元素露出屏幕的事件，并触发回调（参数为元素的相关信息），由业务组件在回调中自己上传埋点数据。

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

export class Exposure {
  constructor(selector, callback, vm, options) {
    this.callback = callback
    this.selector = selector
    this.lockTimer = null
    if (options) {
      this.bottom = options.bottom || 0
      this.top = options.top || 0
    }
    this.init(vm) // 为什么把vm传来传去而不用this.vm：因为会出现循环引用导致报错
  }

  /**
 * 初始化
 * @param vm 组件的 $vm 实例 (vue 实例)
 */
  init(vm) {
    // 创建 IntersectionObserver 的实例
    this.ob = vm
      ? vm.createIntersectionObserver({ observeAll: true })
      : uni.createIntersectionObserver(null, { observeAll: true })
    // 开始监听，当露出时触发回调
    this.ob
      .relativeToViewport({
        bottom: this.bottom,
        top: this.top
      })
      .observe(this.selector, (result) => {
        if (result.intersectionRatio > 0) {
          this.callback(result)
        }
      })
  }
}

由于业务需求，页面埋点和曝光埋点还需要有以下逻辑

1. 进入页面时（用户未操作），立即触发页面埋点和曝光埋点

2. 跳到其他页面再返回时，需要再次触发页面埋点和当前在屏幕露出的元素的埋点

页面埋点很容易处理，而曝光埋点很麻烦，因为 IntersectionObserver 只能监听元素可见性变化，无法静态获取是否露出元素，因此需要在每个页面监听 onHide 和 onShow 事件，在 onHide 时销毁所有监听实例，在 onShow 时重新监听（因为 IntersectionObserver 创建时会默认触发一次事件，即可达到重新触发曝光的目的）
但如果这些逻辑放在业务代码中，非常繁琐且重复，因此使用全局 mixin 处理。

二、 全局 mixin

• 页面埋点

  每次 onShow 时都触发一次页面埋点

• 曝光埋点

  首次 onShow 时初始化曝光埋点（初始化不在此控制，因为加载时机不同，所以放在在业务逻辑中）并将曝光埋点实例存在 exposureObservers 中以备后用；同时标记 isPageFirstLoad 为 false

  每次 onHide 时销毁所有曝光埋点

  下次 onShow 时，遍历并调用 exposureObservers 中的所有实例的 reInit 方法

Mixin代码：

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

/**
 *
 */
import { reportData } from '@/common/report-data'

/**
 * 曝光埋点
 */
export const pageAndExposureObservers = {
  data() {
    return {
      exposureObservers: [], // 用于存储曝光埋点
      isPageFirstLoad: true // 标记页面是否第一次加载
    }
  },
  onShow() {
    console.log(
      this.route,
      '=====================onShow 前========================'
    )
    console.log(
      this.route,
      '=====================onShow 后========================'
    )
    // 1. 首次和之后每次显示页面。发送页面埋点（从页面组件的 pageTrackConfig 中读取数据）
    if (typeof this.pageTrackConfig === 'undefined') {
      const pageTrackConfig = this.$options.pageTrackConfig
      let dataForReport
      if (typeof pageTrackConfig === 'function') {
        dataForReport = { type: 3, ...pageTrackConfig.call(this) }
      } else if (typeof pageTrackConfig === 'object' && pageTrackConfig.info) {
        dataForReport = { type: 3, ...pageTrackConfig }
      } else if (typeof pageTrackConfig === 'string') {
        dataForReport = { type: 3, info: pageTrackConfig }
      }
      dataForReport && reportData(dataForReport)
    }
    // 2.如果是从其他页面切换，重新初始化曝光埋点
    if (!this.isPageFirstLoad) {
      this.exposureObservers.forEach((item) => item.reInit(this))
    }
    this.isPageFirstLoad = false
  },
  onHide() {
    // 2.页面隐藏时，销毁所有曝光
    this.exposureObservers.forEach((item) => item.disconnect(this))
  }
}

Exposure修改为：

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
69
70
71
72
73
74
75

export class Exposure {
  constructor(selector, callback, vm, options) {
    this.callback = callback
    this.selector = selector
    this.lockTimer = null
    if (options) {
      this.bottom = options.bottom || 0
      this.top = options.top || 0
    }
    this.init(vm) // 为什么把vm传来传去而不用this.vm：因为会出现循环引用导致报错
  }

  /**
 * 初始化
 * @param vm 组件的 $vm 实例 (vue 实例)
 */
  init(vm) {
    // 创建 IntersectionObserver 的实例
    this.ob = vm
      ? vm.createIntersectionObserver({ observeAll: true })
      : uni.createIntersectionObserver(null, { observeAll: true })
    // 切断循环引用，防止报错
    this.ob._component = null
    // 开始监听，当露出时触发回调
    console.log({ bottom: this.bottom, top: this.top })
    this.ob
      .relativeToViewport({
        bottom: this.bottom,
        top: this.top
      })
      .observe(this.selector, (result) => {
        if (result.intersectionRatio > 0) {
          this.callback(result)
        }
      })
    // push 到当前页面组件的 exposureObservers 数组中
    this.getRootPageComponent(vm).exposureObservers.push(this)
  }

  /**
 * 销毁所有监听
 */
  disconnect(vm) {
    this.ob.disconnect()
    const rootPageComponent = this.getRootPageComponent(vm)
    const index = rootPageComponent.exposureObservers.indexOf(this)
    if (index) {
      rootPageComponent.exposureObservers.splice(index, 1)
    }
  }

  /**
 * 重新监听所有曝光埋点
 * @param vm
 */
  reInit(vm) {
    this.disconnect(vm)
    this.init(vm)
  }

  /**
 * 获取组件所属的最上层组件(页面组件)
 * @param vm
 * @returns {*}
 */
  getRootPageComponent(vm) {
    if (vm.mpType === 'component') {
      return this.getRootPageComponent(vm.$parent)
    } else if (vm.mpType === 'page' || vm.$parent === undefined) {
      return vm
    } else {
      return vm
    }
  }
}

三、坑：iOS微信bug导致页面和曝光不准

1. 问题描述

iOS版本微信存在一个问题：从一个非TabBar页面A切换到TabBar页面B时，如果TabBar当前不处于目标页面B，会先短暂展示一下当前TabBar所在页面C，然后再切换到B。

结果就是页面C的 onShow 和 onHide 被执行，导致多发送一次页面和一批曝光事件。

除此之外，当二次复现此路径时，还会额外多触发一次B埋点，也就是发送2次B埋点。

相关链接
https://developers.weixin.qq.com/community/develop/doc/000ea812d54ab0cfea3a23eaf51400

2. 解决方案

过滤页面埋点

在调用 switchTab 前，记录全局变量 isSwitchingTab（表示当前正在切换TAB）

1

Vue.prototype.isSwitchingTab = 'pages/shopping-cart'

在全局 mixin 的 onShow 方法中，判断这个变量，如果当前页面路由和 isSwitchingTab 的值相同，才认为当前是真正想跳转的页面，而不是由于 bug 短暂展示的页面。这样就过滤掉了本就不应该触发的C页面的 onShow。
同时，在进入B页面 onShow 后，延迟2s清除 isSwitchingTab ，防止影响下次跳转。

1
2
3
4
5
6
7

if (
  Vue.prototype.isSwitchingTab === undefined ||
  this['__route__'] === Vue.prototype.isSwitchingTab
) {
  setTimeout(() => (Vue.prototype.isSwitchingTab = undefined), 2000)
  // 下面继续埋点逻辑
}

此处还有一个点需要注意：在使用 getCurrentPages() 获取的页面栈中，并不包含C页面，只能在 this[__route__] 中读取当前页面的 route 属性。这说明对于微信小程序来说，C页面的意外展示是不被承认的，毕竟它连一个痕迹都木有留下。

过滤重复发送的B埋点

在发送埋点时，判断当前页面是否刚刚发送埋点，如果2s内有发送过，就不再发送

1
2
3
4
5
6
7
8
9
10
11

// 防止重复曝光
if (
  dataForReport &&
  Vue.prototype.CurrentPageForMaidian !== dataForReport.info
) {
  dataForReport && reportData(dataForReport)
  Vue.prototype.CurrentPageForMaidian = dataForReport.info
  setTimeout(() => {
    Vue.prototype.CurrentPageForMaidian = undefined
  }, 2000)
}

四、最终代码

Mixin代码

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
69
70
71

import { reportData } from '@/common/report-data'
import Vue from 'vue'

/**
 * 曝光埋点
 */
export const pageAndExposureObservers = {
  data() {
    return {
      exposureObservers: [], // 用于存储曝光埋点
      isPageFirstLoad: true // 标记页面是否第一次加载
    }
  },
  onShow() {
    console.log(
      '当前页面栈',
      getCurrentPages()
        .map((i) => i.route)
        .join(' ====> ')
    )
    const currentPages = getCurrentPages()
    const currentPage = currentPages[currentPages.length - 1]
    const currentRoute = currentPage ? currentPage.route : false
    console.log(currentRoute, '===========onShow==========')
    if (
      Vue.prototype.isSwitchingTab === undefined ||
this['__route__'] === Vue.prototype.isSwitchingTab
    ) {
      // 为了处理 ios switch tab 的bug，记录当前正在切换的页面
      setTimeout(() => (Vue.prototype.isSwitchingTab = undefined), 2000)
      // 1. 首次和之后每次显示页面。发送页面埋点（从页面组件的 pageTrackConfig 中读取数据）
      if (typeof this.pageTrackConfig === 'undefined') {
        const pageTrackConfig = this.$options.pageTrackConfig
        let dataForReport
        if (typeof pageTrackConfig === 'function') {
          dataForReport = { type: 3, ...pageTrackConfig.call(this) }
        } else if (
          typeof pageTrackConfig === 'object' &&
pageTrackConfig.info
        ) {
          dataForReport = { type: 3, ...pageTrackConfig }
        } else if (typeof pageTrackConfig === 'string') {
          dataForReport = { type: 3, info: pageTrackConfig }
        }

        // 防止重复曝光
        if (
          dataForReport &&
Vue.prototype.CurrentPageForMaidian !== dataForReport.info
        ) {
          dataForReport && reportData(dataForReport)
          Vue.prototype.CurrentPageForMaidian = dataForReport.info
          setTimeout(() => {
            Vue.prototype.CurrentPageForMaidian = undefined
          }, 2000)
        }
      }
      // 2.如果是从其他页面切换，重新初始化曝光埋点
      if (!this.isPageFirstLoad) {
        this.exposureObservers.forEach((item) => item.reInit(this))
        console.log('reInit this.exposureObservers', this.exposureObservers)
      }
    }

    this.isPageFirstLoad = false
  },
  onHide() {
    // 2.页面隐藏时，销毁所有曝光
    this.exposureObservers.forEach((item) => item.disconnect(this))
  }
}

Exposure

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

export class Exposure {
  constructor(selector, callback, vm, options) {
    this.callback = callback
    this.selector = selector
    this.lockTimer = null
    if (options) {
      this.bottom = options.bottom || 0
      this.top = options.top || 0
    }
    this.init(vm) // 为什么把vm传来传去而不用this.vm：因为会出现循环引用导致报错
    this.getRootPageComponent(vm).exposureObservers.push(this) // push 到当前页面组件的 pageAndExposureObservers 数组中
  }

  /**
 * 初始化
 * @param vm 组件的 $vm 实例 (vue 实例)
 */
  init(vm) {
    // 创建 IntersectionObserver 的实例
    this.ob = vm
      ? vm.createIntersectionObserver({ observeAll: true })
      : uni.createIntersectionObserver(null, { observeAll: true })
    // 开始监听，当露出时触发回调
    // 开始监听，当露出时触发回调
    this.ob
      .relativeToViewport({
        bottom: this.bottom,
        top: this.top
      })
      .observe(this.selector, (result) => {
        if (result.intersectionRatio > 0) {
          this.callback(result)
        }
      })
    // 切断循环引用，防止报错（此语句必须放在.observe之后，否则会找不到组件内的元素）
    this.ob._component = null
  }

  /**
 * 销毁所有监听
 */
  disconnect() {
    this.ob.disconnect()
  }

  /**
 * 重新监听所有曝光埋点
 * @param vm
 */
  reInit(vm) {
    this.init(vm)
  }

  /**
 * 获取组件所属的最上层组件(页面组件)
 * @param vm
 * @returns {*}
 */
  getRootPageComponent(vm) {
    if (vm.mpType === 'component') {
      return this.getRootPageComponent(vm.$parent)
    } else if (vm.mpType === 'page' || vm.$parent === undefined) {
      return vm
    } else {
      return vm
    }
  }
}

五、调用方法

页面埋点

在页面组件中定义 pageTrackConfig 属性即可，无需额外处理
支持 String 和 Function

1
2
3
4
5
6
7
8
9
10

// string
export default {
  pageTrackConfig: 'hnav_home_page',
}
// function，返回复杂的埋点信息
export default {
  pageTrackConfig() {
    return { info: 'plist_product_detail_page', ext: { product_id: this.pid }}
  },
}

曝光埋点

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

// 参数：选择器（支持多个），曝光回调，当前组件实例（即this）
// 可以在回调参数中读取 dom 的 dataset 等属性
this.$registerExposure(
  '.tofu .leaf-node',
  (result) => {
    // 在回调中发送埋点，可以通过 result 的 id和 dataset 获取信息，dataset就是DOM上的 data-xx=xx
    this.$reportData({
      info: 'hnav_homepage_tofu_exposure',
      ext: {
        serial_num: result.dataset.num
      }
    })
  },
  this
)

// 支持传递触发阈值，如被吸底的价格条遮挡的情况：
this.$registerExposure(
  '.section.rights',
  () => {
    this.$reportData({ info: 'plist_productdetail_policy_exposure' })
  },
  this,
  { bottom: -60 }
)

Power Tools 是一个 VSCode 插件, 可以让用户随时编写自己的脚本, 并能很方便地在 VSCode 中运行, 而且支持 VSCode 扩展的 API.
下面来使用 Power Tools 实现一个半自动 px 转 rpx 的快捷功能.

使用条件

• VSCode
• Power Tools 插件

一、 安装

直接从 ego-digital.vscode-powertools 安装
或在VSCode中搜索

二、 配置

F1启动命令窗口， 输入 settings 搜索， 选择 settings（JSON）

在底部添加配置, 创建一个名为 px2rpx 的命令， 并指向 px2rpx.js 文件

1
2
3
4
5
6
7
8
9
10
11

"ego.power-tools": {
      "commands": {
          "px2rpx": {
              "script": "px2rpx.js",
              "button": {
                  "text": "Click here to start the command."
              },

          }
      }
  }

在项目目录下的 .vscode 文件夹下创建 px2rpx.js 文件, 内容如下:

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

exports.execute = async (args) => {
  // args => https://egodigital.github.io/vscode-powertools/api/interfaces/_contracts_.buttonactionscriptarguments.html

  // s. https://code.visualstudio.com/api/references/vscode-api
  const vscode = args.require('vscode');
  const activeTextEditor = vscode.window.activeTextEditor;
  const selection = activeTextEditor.selection
  const oldText = activeTextEditor.document.getText(selection)
  const r = /^(\d+)px$/.exec(oldText)
  if (r!==null) {
    const newText = r[1] * 2 + 'rpx'
    activeTextEditor.edit(builder => {
      builder.replace(selection, newText);
    })
    vscode.window.showInformationMessage(`${oldText} => ${newText}`)
  } else {
    vscode.window.showInformationMessage(`没有选中PX值`);
  }
};

三、试用

配置完成后, 在 VSCode 左下角会出现一个按钮, 选中代码中的 12px, 点击按钮, 12px 就会被替换成 24rpx 了.

四、配置快捷键

点击鼠标很不方便, 我们可以为这段脚本配置一个快捷键.
在 File-Preference-Keyborad Shorcuts 中, 搜索 px2rpx, 双击设置一个快捷键, 我设置为了 Ctrl + Alt + Shift + A.
现在就可以流畅快速的操作了, 只需要双击鼠标-按快捷键-双击鼠标-按快捷键.

在开发物料平台的过程中, 为了提升物料开发的效率, 对 api 接口做了约定, 将物料用到的接口都配置到同一个 js 文件内.按照变量名划分.

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

const mApi = {
  getList: (params) => axios.get("/api/get-list", params),
  setItem: (params) =>
    axios({
      method: "post",
      url: "/api/set-item",
    }),
};
const adminApi = {
  getList: (params) => axios.get("/admin-api/get-list", params),
};
export { mApi, adminApi };

为了减少操作, 打算根据这个文件自动配置代理.

一个搭建平台一般有后台(一般放在公司的管理系统域名下)和 M 站两部分, 所以这两部分接口需要分别指向不同的域名.

也就是获得下面的代码:

1
2
3
4
5
6
7
8
9
10
11

export default {
  "/api/get-list": {
    target: mHost,
  },
  "/api/set-item": {
    target: mHost,
  },
  "/admin/get-list": {
    target: adminHost,
  },
};

首先想到的方法是正则提取, 但大家在代码里如何配置路由和参数不太可控, 可能出现提取错误, 也不容易判断哪个接口所属那个 api 下.

因此采用 AST 解析的方式, 更准确也更优雅的提取, 也对物料开发有更少的限制.

依赖的工具

babel 是一个前端工程中很常用的工具, 其作用就是用将使用未来新语法的代码解析成 AST (Abstract Syntax Tree 抽象语法树), 然后转换成已经被浏览器兼容的语法, 再将其生成代码.

而 babel 是由多个工具组成的, 本次实现这个功能用到了以下工具:

• parser (AST 解析器)
• generator (代码生成器)
• traverse (转换器)
• types AST (节点类型)

解析

将代码解析成 AST 树, 很简单:

1
2
3
4
5
6

const parser = require("@babel/parser");
const codeString = fs.readFileSync(apiFilePath, "utf-8");
const ast = parser.parse(codeString, {
  ecmaVersion: 2020,
  sourceType: "module",
});

遍历 AST, 找到配置 ajax 请求 url 的地方, 将存储到对应的数组中

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

const traverse = require("@babel/traverse").default;
let parentChain = []; // 在深度优先遍历中记录所有祖先node
let mApiList = []; // 存储 mApi 的 URL 地址
let adminApiList = []; // 存储 adminApi 的 URL 地址
let unkownApiList = [];
// 遍历提取
traverse(ast, {
  enter: function (path) {
    const { node, parent } = path;
    parentChain.push(node);
    // 适用于 ajax.get('xx') ajax.post('xx')
    if (node.type === "StringLiteral" && parent.type === "CallExpression") {
      getApiObjectName(parentChain).push(node.value);
    }
    // 适用于 ajax({url: 'xx'}) 写法
    if (node.type === "ObjectProperty" && node.key.name === "url") {
      getApiObjectName(parentChain).push(node.value.value);
    }
  },
  exit: function () {
    parentChain.pop();
  },
});
// 判断祖先是属于 mApi 还是 adminApi
function getApiObjectName(parentChain) {
  if (
    parentChain.some(
      (ancestorNode) =>
        ancestorNode.type === "VariableDeclarator" &&
        ancestorNode.id.name === "mApi"
    )
  ) {
    return mApiList;
  } else if (
    parentChain.some(
      (ancestorNode) =>
        ancestorNode.type === "VariableDeclarator" &&
        ancestorNode.id.name === "adminApi"
    )
  ) {
    return adminApiList;
  } else {
    return unkownApiList;
  }
}

这里存在一个问题. @babel/traverse 的 enter 方法提供的回调参数里只能拿到 当前 node 和 parent node, 因此无法直接得知它属于哪个 api 对象.

为了做出判断, 维护一个 parentChain 栈, 记录深度优先遍历过程中的所有父级节点, 在判断时就可以根据这个栈找到它的祖先节点.

创建代码

拿到 mApiList 和 adminApiList 数组后, 就可以生成配置了.

这一步拼接字符串也可以实现, 但为了更好的理解 AST, 就遍历数组再次创建一个 AST, 使用 @babel/generator 生成 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

const generator = require("@babel/generator").default;
// 根据配置列表依次生成代理列表的 ast node
const code = generator(
  t.program([
    // 导入全局配置(定义代理域名的js)
    t.variableDeclaration("const", [
      t.variableDeclarator(
        t.objectPattern([
          t.objectProperty(
            t.identifier("mHost"),
            t.identifier("mHost"),
            false,
            true
          ),
          t.objectProperty(
            t.identifier("adminHost"),
            t.identifier("adminHost"),
            false,
            true
          ),
        ]),
        t.callExpression(t.identifier("require"), [
          t.stringLiteral("./dev-host"),
        ])
      ),
    ]),
    // 导出生成的代理列表
    t.expressionStatement(
      t.assignmentExpression(
        "=",
        t.memberExpression(t.identifier("module"), t.identifier("exports")),
        t.objectExpression([
          t.objectProperty(
            t.identifier("proxy"),
            t.objectExpression(
              list.map((item) => createAstNodeOfProxyItem(...item))
            )
          ),
        ])
      )
    ),
  ]),
  {
    jsescOption: { quotes: "single" }, // generate options
  }
);

// 创建每一个代理配置的 ast node
function createAstNodeOfProxyItem(api, target, cookie) {
  return t.objectProperty(
    t.stringLiteral(api),
    t.objectExpression([
      t.objectProperty(t.identifier("target"), t.identifier(target)),
    ])
  );
}

得到源码后, 将其写入到 js 文件.

1
2
3
4
5

fs.writeFileSync(
  path.resolve(config.localRepoPath, "proxy-list-auto.js"),
  proxyListResultCode,
  "utf-8"
);

这样就得到了一个 export 开头提到的代理配置列表 js 文件, 将其导入到 webpack 的 proxy 配置即可.

1
2
3
4

# 安装
npm i typescript -g
# 编译
tsc hello.ts

在 VSCode 中直接调试 TS 文件

1. 在根目录创建 tsconfig.json

1
2
3
4
5
6
7
8

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true // 用于断点调试
  }
}

2. 在 VSCode 的命令窗格(Ctrl/Command + Shift + P)中执行 Run Task - tsc:watch - tsconfig.json

这个操作将会启动一条任务, 功能是监听 ts 文件变化, 并实时按照 tsconfig.json 的配置编译成 js 文件

3. 创建一个调试配置 launch.json

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

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${file}",
      "outFiles": [
        "${workspaceFolder}/out/**/*.js"
      ]
    }
  ]
}

4. 开始调试

切到要调试的 ts 文件, 按下F5即可运行当前文件, 支持打断点调试

因为 Task 已经实时做了编译, 也不需要每次写完 ts 再用 tsc 手动编译了

一键即可快速运行

• Node.js
• VSCode (建议)

新建项目, 安装依赖

1
2

npm init # 在空文件夹中初始化项目
npm i electron -D # 安装 electron 依赖, 注意需要安装为 devDependencies

创建主进程和渲染进程文件

1
2
3
4
5
6
7
8
9
10
11

const { app, BrowserWindow } = require('electron')
let win
app.on('ready', () => {
  // 创建一个新窗口
  win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true // 在这个窗口(渲染进程)中启用Node
    }
  })
  win.loadFile('index.html') // 加载一个 html
})

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <p>Hello Electron</p>
  <pre><script>
    const fs = require('fs')
    document.write(fs.readFileSync('package.json'))
  </script></pre>
</body>

</html>

• 项目结构

运行项目

• 编辑 package.json, 添加一条 script

  1	"start": "electron .",

调试代码

调试主进程(main.js)

• 使用VSCode调试, 创建以下配置文件, 按F5即可在编辑器中打断点调试
  

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

  { "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" }, "args" : ["."], "outputCapture": "std" } ] }

调试渲染进程

• 调试普通页面: 在窗口中按快捷键 Ctrl/Command + Shift + I 启动 Chrome Dev Tools, 即可像在Chrome中一样调试
• 使用框架的Devtools调试Vue/React: Electron支持加载常用前端框架的调试扩展, 如 vue-devtools, 可以按照官网提供的方法加载, (要求电脑上的 Chrome 安装这个扩展)

一. 需求分析

实现一个等级标识组件

提供的图片是一张水平方向的雪碧图

二. Alignment 属性

这个属性可以让图片的显示位置偏移, 功能类似 css 中的 background-position
调用: Alignment(x, y) , x y 分别表示水平和垂直方向的偏移 , 初始值均为 0
-1 表示图片最左侧 , 1表示图片最右侧
虽然实际上容器是不动的 , 偏移的是图片, 但为了便于理解, 可以认为图片静止, 容器是一个移动的选区 , 确定位置后”抠”出图来显示到界面, 如下图 (虚线框代表容器) :

官方文档

基本用法

先用这张规则的图片做一些尝试
首先设定图片的宽高

1
2
3

String imageUrl = 'https://static.soyoung.com/sy-pre/2-1569589803824.png';
double width = 400;
double height = 40;

配置 Container 的 decoration 属性 , 用 BoxDecoration 和 DecorationImage 组件实现.
如下代码, 会将图片完全渲染

1
2
3
4
5
6
7
8
9

Container(
  width: width,
  height: height,
  decoration: new BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(imageUrl),
      fit: BoxFit.fitHeight,
      alignment: Alignment(0, 0),
  )),

控制宽度

1
2
3
4
5
6
7
8
9

Container(
  width: width * 0.2, // 修改容器宽度即可
  height: height,
  decoration: new BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(imageUrl),
      fit: BoxFit.fitHeight,
      alignment: Alignment(0, 0)),
  )),

1
2
3
4
5
6
7
8
9

Container(
  width: width * 0.1, // 同上, 再次修改容器宽度
  height: height,
  decoration: new BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(imageUrl),
      fit: BoxFit.fitHeight,
      alignment: Alignment(0, 0)),
  )),

增加简单的偏移

1
2
3
4
5
6
7
8
9

Container(
  width: width * 0.1,
  height: height,
  decoration: new BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(imageUrl),
      fit: BoxFit.fitHeight,
      alignment: Alignment(-1, 0)), // (1, 0) 即可仅显示10
  )),

以上是简单的偏移, 这仅能控制左右对齐 , 想偏移到更多的位置, 就需要增加一点计算:
显示5和6的位置

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

// 5
Container(
  width: width * 0.1,
  height: height,
  decoration: new BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(imageUrl),
      fit: BoxFit.fitHeight,
      alignment:
      Alignment( 0.05/0.45, 0)),
  )),
// 6
Container(
  width: width * 0.1,
  height: height,
  decoration: new BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(imageUrl),
      fit: BoxFit.fitHeight,
      alignment:
      Alignment(-0.05/0.45, 0)),
  )),

此时传给 Alignment 的 x 值 , 是十分诡异的 ±0.05/0.45 ≈ ±0.111111
为什么这样算呢? x 值的获取可以总结为一个公式:
x = d1/d2
d1 = 初始状态时图片左边界到容器左边界的距离
d2 = 目标状态时图片的偏移量
初始状态 (未偏移时, 选框居中) 如下图 , d1 = width * 0.45

目标状态 , 选框 (相对上图中的选框) 从中心往左移动了半个格, 则 d2 = width * -0.05

同理 , 若要展示2 , d2 为 width * -0.35 , x = -0.35/0.45 ≈ -0.777777777777778

同理, 若要展示8, d2 为 width * 0.25 , x = 0.25/0.45 ≈ 0.555555555555556

三. 实际应用

回到等级标识的问题 , 现在可以封装一个方法计算每个 level 的偏移量

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

// 考虑到不同等级的图片宽度是不同的, 还需要提供每个等级图片的宽度
List<double> itemWidthList = [60, 60, 60, 60, 60, 60, 62, 62, 62, 62, 66, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70]; // 横向雪碧图中每个小图的宽度
Map getLevelStyle(int level) {
    double totalWidth = 0; // 图片总宽度
    double positionX = 0; // 图片左边的位置
    double width; // 当前等级图片的宽度
    int i;
    // 循环计算出 整个图片的宽度 和 需要的图片所在位置
    for (i = 0; i < itemWidthList.length; i++) {
      if (i < level) positionX += itemWidthList[i];
      if (i == level) width = itemWidthList[i];
      totalWidth += itemWidthList[i];
    }
  // 初始状态(图片和容器中心点重合) 图片左边界到容器左边界的距离, 即 d2
    double zeroPosition = totalWidth/2 - width / 2;
  // 目标状态时, 图片的偏移量, 即 d1
    double distanceToCenter = positionX - zeroPosition;
  // x = d1/d2
    double alignmentX = (distanceToCenter / zeroPosition);
    print('level $level, $positionX, $distanceToCenter, $alignmentX, $totalWidth');
    return {
      "x": alignmentX,
      "width": width
    };
  }

1

packet_write_wait: Connection to 13.229.188.59 port 22: Broken pipe

解决方案

创建 ~/.ssh/config 文件:

1
2

Host *
    IPQoS lowdelay throughput

或者执行:

1

sudo dnf downgrade openssh-clients-7.7p1

原issue链接

OpenSSH 7.8 causes VMware Workstation and Player networking SSH bug on Linux VMs

参考官网的指南 [在中国使用Flutter]https://flutter.dev/community/china

1
2
3
4
5
6
7
8
9
10

# Mac / Linux
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor
# Windows
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Android Studio SDK下载失败/速度慢

在Android Studio 设置 - System Settings - HTTP Proxy 中配置代理, 指向本机的 SS (SS默认端口是 1080, 需设置为允许其他设备连入)

安卓release打包后不能访问网络

需要在 android/app/src/main/AndroidManifest.xml 中配置网络权限, iOS没试过, 应该也有类似的配置

1
2
3
4
5

<!-- others -->
  </application>
  <uses-permission android:name="android.permission.INTERNET"/>
</manifest>
<!-- others -->

No implementation found for method create on channel flutter.io/videoPlayer

此报错出现于添加新插件(如视频播放组件)之后.
原因是对于带有特定平台代码的包, 热更新无法处理, 需要重启应用.
Adding a package dependency to an app

• 如果未下载过 imagemagick 则先下载可执行文件
• 获取多屏幕的宽高

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

  Add-Type -AssemblyName System.Windows.Forms [System.Windows.Forms.Screen]::AllScreens BitsPerPixel : 32 Bounds : {X=2560,Y=255,Width=1920,Height=1080} DeviceName : \\.\DISPLAY1 Primary : False WorkingArea : {X=2560,Y=255,Width=1920,Height=1040} BitsPerPixel : 32 Bounds : {X=0,Y=0,Width=2560,Height=1440} DeviceName : \\.\DISPLAY2 Primary : True WorkingArea : {X=0,Y=0,Width=2560,Height=1400}

• 调用 Powershell 执行 magick 命令, 将选中的2张图片合并为一张大图

  1 2	magick.exe convert -size 757x388 -strip xc:none .\1.jpg -geometry +0+0 -composite .\2.jpg -geometry +369+0 -composite c2.jpg # 总宽度 x 总高度 第一张图的起始位置 0 x 0 第二张图的起始位置 +x+y

• 调用 .Net 设置桌面背景

  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

  function Set-Wallpaper { param( [Parameter(Mandatory=$true)] $Path, [ValidateSet('Center', 'Stretch', 'Cross')] $Style = 'Stretch' ) Add-Type @" using System; using System.Runtime.InteropServices; using Microsoft.Win32; namespace Wallpaper { public enum Style : int { Center, Stretch, Cross } public class Setter { public const int SetDesktopWallpaper = 20; public const int UpdateIniFile = 0x01; public const int SendWinIniChange = 0x02; [DllImport("user32.dll", SetLastError = true, CharSet = CharSet.Auto)] private static extern int SystemParametersInfo (int uAction, int uParam, string lpvParam, int fuWinIni); public static void SetWallpaper ( string path, Wallpaper.Style style ) { RegistryKey key = Registry.CurrentUser.OpenSubKey("Control Panel\\Desktop", true); // Console.WriteLine(style); switch( style ) { case Style.Stretch : key.SetValue(@"WallpaperStyle", "2") ; key.SetValue(@"TileWallpaper", "0") ; break; case Style.Center : key.SetValue(@"WallpaperStyle", "0") ; key.SetValue(@"TileWallpaper", "0") ; break; case Style.Cross : key.SetValue(@"WallpaperStyle", "22") ; key.SetValue(@"TileWallpaper", "0") ; break; } key.Close(); SystemParametersInfo( SetDesktopWallpaper, 0, path, UpdateIniFile | SendWinIniChange ); } } } "@ [Wallpaper.Setter]::SetWallpaper( $Path, $Style ) } Set-Wallpaper -Path 'C:\Users\zchi\Pictures\gg1.png'

各种云笔记用来用去, 写Markdown体验最好的还是 VSCode, 所以决心折腾一下, 把 VSCode 打造成一款Markdown笔记工具.

优势

• VSCode 强大的编辑功能

• Git 自带更完善的版本控制
  

• 自建同步, 不受第三方控制

• 迁移方便

解决痛点

❓ 图片的插入, 代码编辑器不像云笔记软件, 可以方便的上传图片, 且无需关心存储.
❓ 分享和演示
❓ 笔记管理, 搜索, 标签, 归档等功能

✔ 图片插入的问题, 使用VS-Picgo插件解决.
✔ 使用 vscode-reveal 插件实现演示, 使用 Marp 插件实现导出PDF
✖ 暂未解决, 也许可以在 Tree View 的位置开发一个管理笔记的 VSCode 扩展

图片插入

PicGo 是一个专门上传图片的工具, 支持又拍云, 七牛云, 阿里云等私有云存储, 也支持 sm.ms 等免费图床. 很早就发布了桌面版本, 现在也推出了 VSCode 扩展.

安装和配置

首先需要在 VSCode 扩展商店里安装 PicGo.

如果你已经配置过 PicGo 的桌面版软件, 只需导入其配置文件文件即可开始使用.

如果没有现成的配置文件, 就需要在 VSCode 的 Settings 里手动配置 (建议安装一个桌面版, 先在桌面版里配置, 这样两个平台就可以同步一份配置)

使用方法

PicGo 支持剪贴板上传, 文件上传, 路径上传, 以及自定义文件名, 十分方便

同步

Github 最近推出了私有仓库, 可以用来同步笔记.
这个操作就很简单了, 直接创建私有仓库, clone 下来用 VSCode 打开即可随意创建文件.

按照 Git 的方式提交和同步即可.

编写

建议采用 Hexo 的规范, 每篇笔记定义 Title, Tag, Data 和等信息.
这种笔记方式也是受到了 Hexo 的启发, 后续的完善也会更多的借鉴 Hexo.

1
2
3
4
5
6
7
8

---
title: 使用VSCode和Git写笔记
date: 2019-05-25 10:44:34
tags:
- VSCode
- Git
permalink: note-with-vscode-and-git
---

演示

Reveal.js 是一个基于 HTML 技术的幻灯片工具, 可以用 HTML 或 Markdown 的语法创建幻灯片, vscode-reveal 是基于 Reveal.js 的VSCode 插件, 可以实现以幻灯片形式直接演示 Markdown 文件.

• 安装插件
  
• 根据Reveal.js 的语法, 用 --- 给笔记分节, 每节在幻灯片中会展示为一页.
• F1 打开命令, 输入 Revealjs 可以看到所有命令
  
• 选择 Open presentation in browser 即可启动一个服务, 并在浏览器中展示生成的幻灯片. 同时在 VSCode 的状态栏可以看到幻灯片和服务的状态, 也可以点击按钮停止服务.
  

• 安装 Java (Open JDK 即可)

  1 2	sudo apt-get update sudo apt-get install openjdk-8-jdk

• 安装 Maven

  1 2 3 4 5 6

  wget http://mirrors.shu.edu.cn/apache/maven/maven-3/3.6.0/binaries/apache-maven-3.6.0-bin.tar.gz tar xzvf apache-maven-3.6.0-bin.tar.gz #设置环境变量 (替换成自己的解压目录) export PATH=/home/zchi/apache-maven-3.6.0/bin:$PATH #查看版本 mvn -v

• 安装 Node.js
  Ubuntu16.04安装新版本的Nodejs

• 其他依赖

  1 2 3 4 5 6 7 8 9 10

  apt-get install python2.7-dev \ make \ libkrb5-dev \ libxml2-dev \ libffi-dev \ libxslt-dev \ libsqlite3-dev \ libssl-dev \ libldap2-dev \ python-pip

1
2
3

sudo apt-get install ant gcc g++ libkrb5-dev libffi-dev libmysqlclient-dev libssl-dev libsasl2-dev libsasl2-modules-gssapi-mit libsqlite3-dev libtidy-0.99-0 libxml2-dev libxslt-dev make libldap2-dev maven python-dev python-setuptools libgmp3-dev
# 如果报错  Package 'libtidy-0.99-0' has no installation candidate , 执行:
# sudo apt-get install ant gcc g++ libkrb5-dev libffi-dev libmysqlclient-dev libssl-dev libsasl2-dev libsasl2-modules-gssapi-mit libsqlite3-dev libxml2-dev libxslt-dev make libldap2-dev maven python-dev python-setuptools libgmp3-dev

• 编译

  1 2

  make apps

按照官方文档即可

配置文件

默认的配置是无验证但仅限本机IP (127.0.0.1) 访问

1
2
3
4

net:
  bindIp: 0.0.0.0
security:
  auth: true

创建用户

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

# 创建管理员用户
> db.createUser({user: 'root', pwd:'YOUR PASSWORD', roles:['root']})
Successfully added user: { "user" : "root", "roles" : [ "root" ] }
# 验证测试
> db.auth('root', 'PASSWORD')
1
# 创建数据库用户 ( 以 test 数据库为例)
> db.createUser({user:'rocket',pwd:'YOUR ANOTHER PASSWORD',roles:[{role:'readWrite',db:'test'}]})
Successfully added user: {
"user" : "rocket",
"roles" : [
{
"role" : "readWrite",
"db" : "test"
}
]
}

远程连接数据库

以 MongoDB Compass 为例

1. 在 设置 - 显示 底部, 点击 高级显示设置 , 选择外接显示器的适配器属性
   
   

2. 在弹出的菜单中点击 列出所有模式, 选择适合自己显示器的配置, 常见的刷新率是60Hz , 如果不确定, 就先选择最低的
   

3. 如果配置正确, 外接显示器就可以正常工作了
   

更纱字体一个很适合终端/编程并且对中文和日文都支持很好的字体系列, 还支持 PowerLine 字体.

下载ttf 文件并选择喜欢的安装即可, 我使用的是 'Sarasa Term SC'

安装后在 Powershell 标题右键属性即可配置

安装终端增强的软件 (需在管理员模式的 Powershell 窗口运行)

1. DirColors 让 ls (Get-ChildItem) 像 Unix 系终端一样具有多彩色

   1	Install-Module DirColors

2. Post-Git 和 Git-Aliases 可以实现类似 oh-my-zsh 一样的 Git 增强(命令别名和显示分支等信息)

   1 2	Install-Module posh-git Install-Module -Name git-aliases -RequiredVersion 0.0.1 -AllowClobber

3. pshazz (可选)

   • 一个软件可用代替前面两个, 实现 git 增强和别名
   • 优点是解决了前者在 vscode 中光标容易错位的 bug
   • 但UI不如前面好看
   • 安装 (使用 scoop 安装, 如果没有, 需先安装 scoop)

     1	scoop install pshazz

4. 创建 Microsoft.PowerShell_profile.ps1

   1 2	$PROFILE // 查看配置文件的全路径 code $PROFILE // 使用 vscode 打开(或创建)配置文件, notepad 也可以

   1 2 3 4

   # 写入以下内容 , 保存后新开一个 Powershell 即可看到效果 Import-Module DirColors Import-Module posh-git Import-Module git-aliases -DisableNameChecking

在 vscode 中调用

1. 设置默认终端
   • F1 调出命令窗口, Terminal: select default shell, 选择 Powershell
2. 给终端设置字体
   • 在设置中找到 Terminal › Integrated: Font Family
   • 设置为 'Sarasa Term SC'

在终端中调用编辑器

1. VS Code: code 即可新开 一个 vscode , 参数可以是文件(编辑文件) 或 路径 (打开为工作区).
2. NotePad++: 将安装目录加入环境变量, notepad++.exe 即可, 想偷懒的话可以将 notepad++.exe 复制一个为 npp.exe, 就可以用 npp 调用了

使用VSCode调试 Powershell 脚本

• 安装扩展 PowerShell

• 创建文件 Powershell 脚本使用 ps1 作为文件后缀

  1 2 3

  # 1.ps1 "Hello PowerShell" "Now Is "+(Get-Date)

• 开始调试
  按F5即可执行, 支持断点

• 如果无法重复调试, 在 VSCode 的设置中勾选 Create Temporary Integrated Console

在 Powershell 中使用 SS 代理

1. 在 ss 中允许局域网的连接/允许其他设备连入
2. 在终端执行

   netsh winhttp import proxy source=ie# 如果成功会返回下面内容当前的 WinHTTP 代理服务器设置:代理服务器:  127.0.0.1:1080...

常用命令

TBC…

类似

1

<E9><85><8D><E7><BD><AE><E6><96><87><E4><BB>

解决方法

1

setx LESSCHARSET 'utf-8'

git status 乱码

类似

1

\226\260\345\273\272\346

解决方法

1

git config --global core.quotepath false

或为目前最好用的 Linux 发行版
更纯正的 Linux 命令行环境和更最好用的图形界面操作系统

安装和启动

1. 准备工作: 在启用或关闭 Windows 功能中打开 适用于 Linux 的 Windows 子系统
2. 应用商店搜索 wsl, 安装 Ubuntu 16.04 或其他 Linux 发行版
   
3. 在开始菜单中启动即可, 首次打开需要设置用户名和密码
   
4. 在 cmd 或 Wox 启动

加入右键菜单

1. 找到注册表中 \HKEY_CLASSES_ROOT\Directory\Background\shell\
2. 右键shell新建一个项 (名称随意, 可以叫WSL), 双击其中的默认, 改为 Bash here(右键菜单要显示的名字)
3. 在默认下面加一个字符串值, 名为Icon, 双击将它的值改为你想要的图标的地址,可以是.ico和.exe文件., 比如用 Ubuntu 的图标
4. 在 WSL 下新建一个项,名为command, 将这个项中的 默认 改为 "C:\Windows\System32\bash.exe", (带双引号)
   
   

访问 windows 下的文件

• /mnt 路径
• 软连接挂载常用目录 ln -s /mnt/e e
  

让终端能走梯子

• 不需要在 linux 中安装 ss , 可以直接利用 windows 上 ss 的代理

  1 2 3

  # ~/.bashrc 或 ~/zshrc export http_proxy="http://127.0.0.1:1080" export https_proxy="http://127.0.0.1:1080"

安装oh my zsh

1. 安装 zsh , sudo apt-get install zsh

2. 安装 oh my zsh

   1	sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

3. 设置为默认终端

   1 2 3

   # ~/.bash_profile (适用于 cmder , vscode) exec zshh source .zshrc

配置开发环境

设为 vscode 默认终端

1. 设置 "terminal.integrated.shell.windows": "C:\\Windows\\Sysnative\\bash.exe"
2. Ctrl + ` 启动终端即可
   

命令行访问 windows 下的可执行文件

1. code . 当前目录启动 vscode (这个 vscode 是windows下的, 貌似仅支持在 \mnt 路径下的文件夹使用, 不支持 linux 路径)
2. 执行全局 node 模块
   安装 Node.js 后, 在 Ubuntu 里可以直接运行 windows 下的 npm 包.
   
   关于执行 Node 模块这一点真是让人困惑, 我在 windows 上安装的 node 版本是 10.x , Ubuntu 上安装的是 8.x.
   从截图看出我在 Ubuntu 上只装了一个 gulp, 但我运行 parcel, hexo 等 windows 上安装的全局包时, 却可以正常运行, 而 hexo 的 info 显示使用的 Node 是 Linux 上的.
   也就是说, 只要子系统安装了 node, 就可以在 Linux 环境直接调用 windows 下的 npm 包, 不需要单独安装, 不过还没测试过本地编译的包能不能用.
   (我怎么感觉这是个环境变量混乱导致的 BUG, 还需要再了解一下 WSL 和 windows 交互的特性啊)

配置换行符为 LF

windows 下默认的换行方式是 CRLF, 而大家在协作时通用的代码换行方式是 Unix 系的 LF 换行, (Mac OS 从前使用 CR, 现已经改为 LF)
在 windows 系统中, VCS 通常采用 autocrlf 的办法来解决问题, 在检出代码时将 LF 替换为 CRLF, 提交时再替换回 LF, 以此保证提交的代码和使用 Linux/Mac 的小伙伴一致.
但是在 WSL 中, Linux 和 windows 的文件系统是互通的, 这就会导致问题, 尤其是使用WSL中的 git 时. 如果开启 autocrlf, 在 WSL 的 git 检出代码时, 会得到 windows 默认的 CRLF 换行, 在 windows 中这符合预期, 但如果我们在 Linux 使用 git 安装一些程序, 这些程序的代码就会出错 (因为 Linux 的文件系统不应该出现 CRLF 换行符), 所以我们在 windows 系统中也使用 LF 换行:

1. 关闭 windows 中 git 的自动转换 git config --global core.autocrlf false (避免 clone 的代码出现 CRLF)
2. 配置编辑器的默认换行符为 LF
   • vscode : `Text editor - Files - the default end of the line character
   • webstorm : Editor - Code Style - Line separator - Unix and OS X
   • Notepad++ : 首选项 - 新建 - 格式 - Unix
3. 杜绝使用 windows 自带的 记事本

To Be Continue…