- 博客(97)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 windows 下 多个node.js版本切换使用
随着前端的五花八门的各种框架使用，就不得不随时切换不同的版本进行开发。比如2016年开发phonegap时使用的ionic1.x就是基于node.js 6.x版本开发的。短短一年时间 现在使用阿里巴巴旗下的weex开发混合应用，则需呀node.js为10.x版本。但是旧的项目仍需维护更新，则需要不断来回切换node版本。参考连接：https://blog.csdn.net/jingsi1991...
2018-06-19 15:27:54
12090
2
原创 nw.js打包windows包，并生成快捷方式和添加到开始菜单
1、把开发的项目文件压缩成app.zip文件 再重命名为app.nw文件，再把下载的nw-sdk 或者nw-normal版本的包 里面的nw.exe复制到跟app.nw同一目录下 ，执行 copy /b nw.exe+app.nw app.exe命令 就可以生成一个app.exe文件2、把app.exe文件复制到 nw-sdk（或者nw-normal）包里面跟nw.exe同级目录下...
2018-03-15 14:52:45
1615
1
原创 搭建个人网站 保姆级教程（四）Navicat链接mySql 失败
修改MySQL的配置文件,在my.cnf文件的**[mysqld]**下添加一行(是通过修改配置文件的方式修改为跳过授权表进入),保存退出。9.给root 这个user设置密码，重新执行步骤7，注意root -> %, 还是 root -> localhost,请自行检查。长时间没有折腾云服务器上的mysql了，今天再次使用Navicat连接云服务器上的mysql时，输入密码报错！8.检查user list，是否存在 root这个user！结果多次尝试后发现还是不对，曾经可以的，没理由呀！
2023-06-07 23:32:50
527
原创 数据大盘动画-demo
如需要详细代码，可以前往下载，下载地址在本人博客资源中，可自行前往下载。最近折腾一个大盘，显示3d围绕中间转动，类似星球转动特效，如下所示。
2023-03-31 23:27:55
172
原创 npm install时报sudo chown -R 501:20，如何解决？
npm install时报sudo chown -R 501:20 "/Users/xxx/.npm"，如何解决？
2023-03-03 20:53:34
2659
1
原创 搭建个人网站 保姆级教程（二）前后端项目部署到云服务器
搭建个人博客保姆级教程，部署本地前端项目build文件以及后端项目jar包，还有数据库mysql到云服务器上，并实现正常访问。并记录这个过程踩过的坑。
2023-02-23 21:34:48
2681
原创 乾坤qiankun-微前端-简单搭建demo
Micro-frontend,微前端，顾名思义，前端也可以像后端一样通过多个微服务，搭建项目。只是后端的微服务架构是Spring Boot, 而前端我们可以使用实现前端的微服务架构。轻松现实大型项目的迭代重构升级以及拓展，不受牵一发而动全身的限制。下面介绍简单搭建微前端框架。
2022-09-18 16:24:56
2869
6
原创 js设计模式六 - 命令模式
命令模式是最常见的应用场景是，当有需要向某些对象发送请求时，并不需要知道请求的接受者是谁，也不需要知道请求的操作是什么。这时候就希望用一种松耦合的方式来设计程序，使得请求的发送者和接受者消除彼此的耦合关系。...
2022-06-12 22:52:04
166
原创 js设计模式五 - 发布—订阅模式
发布订阅模式的优点：1.广泛应用于**异步编程**中，这是一种替代传递回调函数的方案。在异步编程中使用发布订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。例如ZoomSdk的注册以及事件回调都是异步执行的，这时使用发布订阅模式就很好解决这个问题。2.发布订阅模式可以取代对象之间硬编码的通知机制，一个对象不再显式地调用另一个对象的某个接口。发布订阅模式让两个对象松耦合地联系在一起，虽然不太清除批次的细节，但这不影响他们之间互相通讯。当有心得订阅者出现时，发布者的代
2022-06-03 16:45:10
496
原创 双向数据绑定原理（Vue）
双向绑定的底层原理就是应用了发布订阅者模式结合数据劫持，通过Object.defineProperty()方法劫持get、set方法， get中Event.addSub() 添加订阅者，set中调用事件Event.notify发布消息。
2022-06-03 16:40:10
864
原创 js设计模式四 - 迭代器模式
迭代器模式，简言之就是数组或者对象遍历。比如for， forEach, for...in..等。目前，恐怕只有在一些“古董级”的语言中才会为实现一个迭代器模式而烦恼，现在流行的大部分语言如 Java、Ruby 等都已经有了内置的迭代器实现，许多浏览器也支持 JavaScript 的Array.prototype.forEach。......
2022-06-02 22:55:03
171
原创 js设计模式二 - 策略模式
oo面向对象编程的三个特征：封装、继承、多态，但编程中的原则是“封装变化”，“多用组合少用继承”，“针对接口编程，不针对实现编程”下面记一下策略模式。先了解下状态模式。// 旧的不好代码 - 维护麻烦，后期维护需要做删减处理if (state === 'SCHEDULE') { // 预约中} else if(state === 'ONLINE') { // 在线} else if(state === 'OFFLINE') { // 离线} else if(state ===
2022-05-31 22:26:36
236
原创 代码重构-消除魔术字符串
魔术字符串是指：在代码指中多次出现，与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改成含义清晰的变量代替。function getArea(shape, options) { ... switch (shape){ case 'Triangle': { // 魔术字符串，出现一次 ..... break; }， .... }}getArea('Tri
2021-06-28 16:20:44
249
原创 深入浅出实现Electron应用图片下载无感更新渲染进程视图
需求：应用在使用过程中，在后台更新应用的背景图片，这时候应用接收更新推送后实现背景图片的下载和实时更新视图。难点：1、图片下载2、无感刷新背景图片3、websocket推送项目架构：Electron + Vue编译后dist文件作为渲染进程视图解决思路：1、Vue项目中配置websocket推送监听 // 初始化weosocketfunction initWebSocket () { let wsurl = `${type}://${url}/xxxxx/websoc
2021-04-30 10:55:15
971
原创 深入浅出Electron mac打包签名输出dmg和pkg安装包
为了应用安全以及使用electron-updater实现自动升级功能，必须对应用进行签名打包发布。具体签名过程如下：1、本地安装两个签名的证书，具体可以咨询ios开发人员，如下：2.设置package.json的有关mac打包的相关内容,配置签名参考链接```json "build": { "afterSign": "package/afterSign.js", // 签名后执行的js,实现electron-notarize公证app "appId": "cn.com
2021-04-29 17:53:37
3169
原创 深入浅出Electron windows端打包签名应用
应用不签名在安装过程或者下载过程会提示应用不安全，因此需要做签名，具体步骤如下：1.准备好证书，详细可以参考链接导出证书2.设置package.json的有关window打包的相关内容```json"win": { ... "verifyUpdateCodeSignature": false, // 代表加密的方式，一般分为'sha256'与'sha1'两种方式，都进行加密即可。 "signingHashAlgorithms": [ "sha256", .
2021-04-29 17:09:19
3518
原创 高阶函数
一、定义：高阶函数是指至少满足一下条件之一：函数可以作为参数被传递 或者 函数可以作为返回值输出。（1）函数作为参数被传递如：回调函数、Array.prototype.sort函数接收一个函数作为参数（2）函数作为返回值输出如：判断数据类型var isString = function( obj ){ return Object.prototype.toString.call( obj ) === '[object String]'; // String、Array、Object
2021-04-26 17:14:42
137
原创 闭包
一、闭包1、变量的作用域：var声明的变量会局限于函数中，如果变量没有会往外层逐层收缩，一直搜索到全局变量为止。2、变量的生存周期：一般变量会随着函数的调用完，退出函数则会销毁，但是函数内还有函数，并给外部调用了，造成闭包，则变量不会销毁来个简单的闭包例子：var func2 = function(){ var a = 1; a++; console.log('1111',a); return function(){ a++; console.log(
2021-04-26 16:39:01
144
原创 this的指向
分4种：作为对象的方法调用 作为普通函数调用 构造器调用 Function.prototype.call或Function.prototype.apply调用1、作为对象的方法调用当函数作为对象的方法被调用时，this 指向该对象：var obj = { a: 1, getA: function(){ alert ( this === obj ); // 输出：true alert ( this.a ); // 输出: 1 } }; obj.getA();2、
2021-04-26 15:32:38
71
原创 javascript - 原型设计模式
讲解原型设计模式之前，先了解原型和原型链的概念。一、原型和原型链1、显式原型与隐式原型显：prototype隐：__proto__两者指向同一个指针地址，因此两者是相等了 Person.prototype === Person.__proto__ // truefunction Person(name){ this.name = name}var person = new Person('zhangsan');var person1 = new Person('lis.
2021-04-26 14:27:42
106
原创 深入浅出实现Electron音量调节功能
Electron实现调节电脑端的音量，如下：可以通过查找nodejs的相关插件实现。查找资料有两种方式可以实现音量的设置：方式一：使用nircmd.exe实现，这个插件也是挺强大的，可以做挺多事情的，暂时还没有需求，以后可能可以用上。参考资料：https://blog.csdn.net/qq_41185868/article/details/80761111设置音量的参考链接：https://blog.csdn.net/weixin_37073932/article/details/113..
2021-04-20 14:16:36
1889
原创 深入浅出实现Electron判断屏幕当前是否是双屏显示？
如果在win10中设置双屏显示如下配置：开启了双屏后，我们可以通过以下两种方式实现双屏显示的判断：使用nodejs的child_process方式实现信息读取。 // 方式一： 使用 wmic 以及 exec读取显示器序列号数量判断是否多显示器 const cmdStr = "WMIC /NameSpace:\\\\Root\\WMI Path WmiMonitorID Get SerialNumberID /value"; var exec = require('child_proc
2021-04-19 09:43:48
3064
1
原创 深入浅出实现Electron判断屏幕是否是触摸屏
判断设备是否是触摸屏，在cmd终端中输入如下命令可以reg query HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Tablet" "PC /s | find "IsTabletPC"输出结果如下：如果里面的值0x0，则表示是触摸屏。我们在终端中是可以通过命令读取注册表信息是可以判断是否是触摸屏的，那我们在electron中是否也可以通过读取注册表信息，获取这些信息？所以找到regedit模块：let regedit = requi
2021-04-19 09:34:39
2018
原创 深入浅出分析Electron自动升级electron-updater + electron-builder配置
自动升级的方式有很多种，我们公司第一版是使用fs做文件的下载和替换，但是存在C：// programfile的权限问题，因此只好更换技术方案。使用Electron-builder结合updater实现自动升级功能。一、electron-builder的配置在package.json中安装依赖"devDependencies": { ... "electron": "^8.2.4", "electron-builder": "^22.9.1", .... },
2021-04-15 17:12:39
1873
原创 深入浅出分析Electron打包插件electron-builder配置
```json{ "name": "Umeet", // 产品名称 "version": "3.2.0", // 产品版本 "private": true, // 是否私有 "main": "./src/main.js", // 程序入口文件 "author": { // 发布者信息 win-属性可见,mac在关于Umeet中可见 "name": "SYSTEC" }, "desc.
2021-04-15 16:37:21
1955
2
原创 深入浅出Electron如何解决第三方库绕开electron-builder签名配置
一、问题使用electron-builder打包应用时，会自动检查应用中所有的exe文件进行签名，dll文件可以配置"signDlls": false是否需要签名，但是有些.exe文件是不能签名的，如果签名会导致应用报错。而且.exe文件不能通过package.json指定那些文件不需要签名。二、解决思路需要在打包之前把绕开签名的exe文件重命名未.temp文件，当签名完成后再把.temp文件重命名为.exe即可。三、具体步骤如下package.json中的script如下：.
2021-04-06 22:07:44
2634
原创 Electron https
需求是：客户环境是使用https，但是证书是自签名的。因此在一般浏览器访问该网站的地址时会提示证书不安全，需要手动点击“继续访问不安全链接”，进行跳转才能访问。但是我们是Electron客户端，不可能像浏览器一样有个跳转提示，因此需要做绕开这个认证的过程。具体配置如下：/** * 兼容https非可信域*/app.on('certificate-error', (event, webContents, url, error, certificate, callback) => .
2021-04-05 21:58:56
3788
7
原创 Electron如何优雅搭建大型项目
Electron如何优雅搭建大型项目项目框架main.jsapp 模块内容使用UI层Service层Utils层Window层项目框架搭建一个稳健的Electron框架，而不是随便使用别人封装好的electron-vue，想自定义一个更合适自己的项目架构，以便更有利于实现项目发布时的体积尽可能小，并且可以任意选择合适的UI层框架，如React、Vue、Angular甚至是纯html。先看下以下项目架构图：再看下我们数据通讯流程图如下：由以上两个图可以清晰的实现代码的高内聚低耦合，并遵循职责分明的
2021-04-01 20:46:04
749
1
原创 深入浅出解决Electron窗口置顶失效的问题
最近接到一个任务做窗口浮窗置顶，并且可以拖动移动，类似360的浮窗，如下图所示：第一时间是使用alwaysOnTop:true, 但实际效果不如意，比如打开其他应用时会隐藏置顶，效果达不到。经过一番折腾，查阅Electron文档，官网地址，配置如下：// 即时会议窗口function createInstantWindow (title, message, btns) { //如果已经存在即时会议窗口 就不再弹窗了 let instantWindow = utils.winUt...
2021-03-24 15:29:10
4897
3
原创 Electron 使用Webview 快速开发项目，达到web端一次开发多端共用
##目录结构```sh├──assets#打包图片资源├──mac-tool#mac端打包需要的脚本文件│└──preinstall#脚本文件--实现重装清缓存、卸载干净旧的包├──node_modules#npm本地依赖包├──Output#打包输出应用包├──renderViews#渲染进程视图，由...
2021-02-23 09:49:18
1237
test（vc_redist.x86.exe静默安装.nsi
2021-04-16
程序媛30岁何去何从？
2022-06-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人