发表于 |

数组求和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.终极篇
[1,2,3,4].reduce(function (prev, cur) {
   return prev + cur;
 },0) //10
2.开始篇
function sum(arr) {
  var len = arr.length;
  if(len == 0){
    return 0;
  } else if (len == 1){
    return arr[0];
  } else {
    return arr[0] + sum(arr.slice(1));
  }
}
sum([1,2,3,4]) //10
利用slice截取改变数组,再利用递归求和

发表于 |

Echarts 导出图片

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
downCharts () {
  let baseURL
  if (this.btShow) {
    baseURL = this.$refs.pie.getImageBase()
  } else {
    baseURL = this.$refs.bar.getImageBase()
  }
  const elink = document.createElement('a');
  elink.download = '统计图';
  elink.style.display = 'none';
  elink.href = baseURL;
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL 对象
  document.body.removeChild(elink)
}



getImageBase () {
  return this.myChart.getDataURL({
      type: 'png',
      pixelRatio: 1.5,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
      backgroundColor: '#fff'
  })
}

发表于 |

一.数据解构

使用解构从数组和对象提取值并赋值给独特的变量
应用场景 接口返回大JSON时 能快速分割数据 简化及美化代码 它不香嘛

数组解构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[a, b, c] = [1, 2, 3]

=> a = 1
=> b = 2
=> c = 3

[a, ...b] = [1, 2, 3]

=> a = 1
=> b = [2, 3]

如果你想忽略某几位
[a,,,f] = [1,2,3,4,5,6]
=> a = 1
=> f = 4

对象解构

1
2
3
4
5
6
{a, b, c} = {a:1, b:2, c:3}
=> a = 1  b = 2 c = 3
------- 当你的参数 跟后台返回的Key值不一样时
({a: this.myKey} = {a:2})

=> this.myKey = 2

function解构

1
2
3
4
5
6
7
8
9
function abc ({aaa, bbb, ...ccc}) {
  console.log(aaa, bbb, ccc)
}
abc({aaa:2, bbb:3, ccc:4, ddd: 5})

=> aaa = 2
=> bbb = 3
=> ccc = {ccc: 4, ddd: 5}
=> arguments[0].length = 4

二.字符串模板

使字符串的拼接 更加简洁 美观
应用场景 拼接多个字段的字符串 或者分行 或在vue HTML中拼接字符串

1
2
3
var _name = '何鹏', _age = '18'
`我叫${_name}, 我今年${_age}岁了~`
=> "我叫何鹏, 我今年18岁了~"  PS(我觉得没啥毛病)

三.默认参数

当你在业务中发现 一套逻辑可以在多个场景使用 但可能存在个别差异 你可以复用方法 并将并不是所有不同的方法参数设默认值

1
2
3
4
5
6
7
function obj(_name = '何鹏', _age = '18') {
  console.log(`我叫${_name}, 我今年${_age}岁了~`)
}
obj()
=> "我叫何鹏, 我今年18岁了~"
obj('陆美味', '48')
=> "我叫陆美味, 我今年48岁了~"

四.延展操作符

数组之间合并 或者数据之间合并 可快速使用

1
2
3
4
5
6
7
8
9
var a = [1, 2], b = [3, 4]
var c = [...a, ...b]
a.push(...b)
=> c = [1, 2, 3, 4]
=> a = [1, 2, 3, 4]
当然 对象也可以延展
var d = {obj1: 2, obj2: 3}
var f = {obj3: 2, ...d}
=> f = {obj3: 2, obj1: 2, obj2: 3}

五.Promise await

在项目中 很常用的 接口回调，或依赖于异步数据执行的函数
其实很简单 按照正常写法执行即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Prom() {
  return new Promise(resolve => {
    setTimeout(()=> {
      resolve('我完成了')
    }, 3000)
  })
}
await Prom().then(res => {
  console.log(res)
  <!-- do soming -->
})
console.log('我等他完成')
<!-- do soming -->
=> Promise {<pending>}
=> 我完成了
=> 我等他完成

六.for in

当我们需要所有可以枚举的属性时 使用此方法 symbol不可以被枚举

1
2
3
4
5
6
7
8
9
10
11
let SYMBOL = Symbol()
var a = {obj: 1, obj2: 2, [Symbol(hhh)]: 3, [SYMBOL]: '前端小菜鸡'}
for (let key in a) {
  console.log(key, a[key])
}
=> obj 1
=> obj2 2
=> a[SYMBOL] = '前端小菜鸡'
=> a['hhh'] = undefined

Symbol 就不多做陈述了 毕竟在真是项目中 用的地方不多~

发表于 |

我啥也不会

1
2
3
4
5
6
7
8
9
10
11
12
13
let hePeng = function () {
  console.info('我啥也不会')
  return () => {
    console.log('前端太难了')
    return () => {
      console.error('加班加到屎')
      return () => {
        console.table('我只想摸鱼')
      }
    }
  }
}
hePeng()()()()

发表于 |

最近…一直在做electron项目, 经常和node来打交道。当然没经过系统培训 不够也算是摸索了一些经验
脑壳儿都快秃了，趁着最近不忙 整理整理我常用的API

一.异步

Node中的计时器

发表于 |

新建窗口

我们项目 大概有四五个新窗口 太难了 贴段代码散散心，以后就直接复制粘贴就好

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
// 引入创建窗口依赖
const {
  BrowserWindow,app
} = require('electron')
const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/service` : `file://${__dirname}/index.html#/service`
// 同步其他窗口的创建
const {getPush} = require('../suspensionWindow');
// 生命窗口对象
let PushServiceWindow
const createPushService = function() {
  // 创建窗口
  PushServiceWindow = new BrowserWindow({
    height: 600,
    useContentSize: true,
    frame: false, // 要创建无边框窗口
    width: 360,
    transparent: true,
    resizable: false,
    alwaysOnTop: false,
    type: 'toolbar'
  })
  // 获取窗口信息
  const screen = require('electron').screen;
  const size = screen.getPrimaryDisplay().workAreaSize;
  // 定位窗口位置
  PushServiceWindow.setPosition(size.width - 370, 2000);
  PushServiceWindow.loadURL(winURL)
  // PushServiceWindow.webContents.openDevTools();
  // PushServiceWindow.webContents.openDevTools()
  // 同步其他窗口的创建
  PushServiceWindow.on('ready-to-show', () => {
    getPush.getMesuspensionWindow()
  })
  // 关闭操作 将对象销毁
  PushServiceWindow.on('closed', () => {
    PushServiceWindow = null
  })

  // PushServiceWindow.on('blur', () => {
  //   PushServiceWindow.webContents.send('appblur')
  // })

  // PushServiceWindow.on('focus', () => {
  //   PushServiceWindow.webContents.send('appfocus')
  // })
}

// 当其他窗口需要获取本窗口对象时 将对象动态传回去
const PushServiceWindowObj = function () {
  return PushServiceWindow;
}

exports.PushServiceWindowObj = PushServiceWindowObj;
exports.createPushService = createPushService;

发表于 |

今天，一大早需求就气势汹汹的来到我身边。我的第一反应。。。这是要谋害朕啊！
果然，客户临时加需求。开机自启动，首次安装增加软件介绍视频以及设置页前置，好嘞 两天后就要~ 走你！

首先 拆解需求

需求是建立在，用户第一次安装。而第一次安装可以通过Electron或者Node去获取
因为我们项目做的是离线版和在线版。所以会在C盘生成.xyzs的文件夹 用来存储json格式的文件数据
也就是说,项目启动,通过node获取用户目录下的.xyzs 如果存在就是安装过 没有就是第一次安装咯 完美解决~（手动删除给我滚）

1
2
3
4
5
6
7
8
9
let fs = require("fs")
let os = require("os")
let path = require("path")
const dirName = os.homedir()
const dirPath = path.join(dirName, '.xyzs')

fs.exists( dirPath, (exists) => {
  console.log(exists ? "存在" : "不存在");
})

现在已经可以获取 是否是第一次安装 然后咧
app.vue中，在router-view进行子路由 增加video.vue页面 来播放动画
每次进入页面是 调用electron主线程发送信号，由主线程向Node发送请求 探查是否是第一次安装
再由主线程 event.returnValue 返回结果，来判断是否播放动画及 动画播放完毕执行setting页面的显示

自启动 那就简单了 百度

站在巨人的肩膀上成长 才能使我成长的更快
当然 不纯是复制粘贴 读一个博客大概20分钟 理解大概一两个小时 熟练使用需要项目的磨合
我会越来越强的！

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 {Registry} = require('rage-edit')
const path = require('path')
const {app} = require('electron)

module.exports = {
	 
	 url:'HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Run',
	 
	 name:'my_application',
	 
	 //设置启动
	 setAppStart(cbSus,cbErr){
		Registry.set(
			this.url,   //注册表开机启动应用路径
			this.name, //随意写
			app.getPath('exe'), //当前应用路径，也是自动启动的应用路径
			'REG_SZ', // 固定的 
		)
		.then(()=>{
			cbSus && cbSus()
		})
		.catch(()=>{
			cbErr && cbErr()
		})
	},
	
	// 取消启动
	cancelAppStart(cbSus,cbErr){
	  Registry.has(this.url,this.name)
	  	.then((res)=>{
			if(res){
				Registry.delete(this.url,this.name)
					.then(()=>{
						cbSus && cbSus()	
					})
					.catch(()=>{
						cbErr && cbErr()
					})
			}
		})
		.catch(()=>{
			cbErr && cbErr()
		})
	}
}

发表于 |

Electron 注册快捷键事件

1
2
3
4
5
6
7
8
9
10
11
12
ipcMain.on('changeWebShot', (event, args) => {
  console.log(args)
  globalShortcut.unregister(args[0]); // 注销上一次的热键
  // 注册新的全局热键
  globalShortcut.register(args[1], () => {
    // 截屏
    Promise.race([operation.webShot()]).then(() => {
      event.returnValue = true;
    });
  })
  event.returnValue = true;
})

发表于 |

electron加密数据 进行存储

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
const crypto = require('crypto');

 /**
   * 创建密码 加密算法
   *
   * @param {*} data
   * @param {*} password
   */
  aseEncode(data) {
    // 如下方法使用指定的算法与密码来创建cipher对象
    const cipher = crypto.createCipher('aes192', this.password);

    // 使用该对象的update方法来指定需要被加密的数据
    let crypted = cipher.update(data, 'utf-8', 'hex');

    crypted += cipher.final('hex');

    return crypted;
  },
  decipher(data) {
    /* 
       该方法使用指定的算法与密码来创建 decipher对象, 第一个算法必须与加密数据时所使用的算法保持一致;
       第二个参数用于指定解密时所使用的密码，其参数值为一个二进制格式的字符串或一个Buffer对象，该密码同样必须与加密该数据时所使用的密码保持一致
      */
    const decipher = crypto.createDecipher('aes192', this.password);

    /*
     第一个参数为一个Buffer对象或一个字符串，用于指定需要被解密的数据
     第二个参数用于指定被解密数据所使用的编码格式，可指定的参数值为 'hex', 'binary', 'base64'等，
     第三个参数用于指定输出解密数据时使用的编码格式，可选参数值为 'utf-8', 'ascii' 或 'binary';
    */
    let decrypted = decipher.update(data, 'hex', 'utf-8');

    decrypted += decipher.final('utf-8');
    return decrypted;
  },

发表于 |

Electron 常用的打包命令

1
2
3
4
5
6
7
8
9
10
11
"build": "node .electron-vue/build.js && electron-builder",
"win32": "node .electron-vue/build.js && electron-builder --platform=win32  --arch=ia32",
"mac": "node .electron-vue/build.js && electron-builder --platform=mac ",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": ""