看淡江湖-优快云博客

原创 electron中引入iohook来监听系统级鼠标键盘事件

iohook官网：https://wilix-team.github.io/iohook/usage.htmlhttps://nodejs.ctolib.com/article/releases/98298本人项目的版本号：electron5.0.0node12.16.1一、准备工作使用node-abi来获取electron和node对应的abi版本npm install node-abi --save-devconsole.log(nodeAbi.getAbi('12.16..

2020-10-13 15:03:10 11615 14

原创 antd中对Datepicker的日期组件进行选择后的格式化

<DatePicker placeholder='Select Time' onChange={value => { // 提供中文数字 let cnum = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖', '拾'] function rp (n) { let s = '' .

2020-07-21 17:18:49 3155

原创 electron中引入flash插件的方法

1、在electron的主程序中输出 console.log(111111111111,app.getPath('pepperFlashSystemPlugin'));获取pepflashplayer.dll的版本和文件路径2、let plugins = path.join(__dirname,`./libs/flash/pepflashplayer64_32_0_0_255.dll`)app.commandLine.appendSwitch('ppapi-flash-path',

2020-05-30 17:49:51 3656 1

原创 canvas实现将dom元素转为图片并下载

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>htmltopic</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">&l...

2020-01-09 14:53:09 2090

原创发布自己的npm包

发布时可能遇到的坑：https://www.jianshu.com/p/40f732d91a8c使用官网的地址：npm config set registry http://registry.npmjs.org1、在npm的官网上注册账号：https://www.npmjs.com/2、新建一个目录，例如hu_sqlite3,在目录中npm login如上图示代表登录...

2019-11-21 14:40:13 254

原创 electron中使用sqlite3的安装教程

1、设置npm的registry地址npm config set registry https://registry.npm.taobao.org查看是否成功npm config get registry2、设置成功后，安装依赖npm install node-gyp --gnpm install --vs2015 -g windows-build-toolsP...

2019-11-21 11:12:20 1518

原创 antd-mobile屏幕适配方案: flexible+px2rem

参考网址：https://www.jianshu.com/p/16cfeb265525

2019-08-01 13:12:46 3371

原创 react中fetch请求的使用封装(2)——使用proxy代理解决跨域问题

1、使用proxy解决fetch中的跨域问题①、在package.json中进行配置"proxy": "http://192.168.0.162:8012"②、请求时直接写地址2、对fetch的post请求application/json格式global.$ = { post: (info) => { fetch(info.url, {...

2019-07-16 16:07:37 2360

原创获取url中的所传参数的方法

获取url中的所传参数的方法：//通过该方法可以获得地址栏中传递的参数值function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(...

2019-07-12 15:39:08 488

原创 NSIS 打包 Electron 生成exe安装包

本文参考文章：https://blog.youkuaiyun.com/yu17310133443/article/details/79496499本文主要用来备份参考网址的内容，防止丢失。1、先使用electron-packager进行打包。2、使用NSIS生成setup.exe程序。以下是参考网页的内容。1、下载NSIShttps://pan.baidu.com/s/1mitSQ...

2019-05-27 10:55:35 626

原创 electron中主进程和渲染进程的交互（react）

项目使用react写的主体逻辑（渲染进程），结合electron打包成exe程序。现在说一下主进程（electron的主文件）和渲染进程（js逻辑）的交互。1、在public/index.html(react)文件中，先引入electron <script> window.electron = require('electron') <...

2019-05-09 15:12:33 4273

原创 react路由使用的时候注意

exact这个严格模式需要注意，嵌套路由时候如果使用，会导致子路由显示失败

2019-05-09 09:22:50 342

原创 react中引入jquery和animate.css

1、引入jqueryyarn add jquery --save-devimport $ from 'jquery' render() { return ( <div> <h1 className="h1" onClick={()=>{ $('....

2019-05-07 16:22:04 817

原创 js中对可编辑的div进行光标位置插入内容，和移动光标到最后

直接上代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...

2019-05-07 14:48:30 6972 4

原创 react中引入富文本编辑器wangeditor，react打包项目直接运行文件

1、安装yarn add wangeditor --save-dev2、引入并使用代码：import E from 'wangeditor'<div className="text-area" > <div ref="editorElemMenu" className="editorElem-men...

2019-05-06 15:12:33 1577

原创 jsx语法中解析字符串中含有标签样式的问题（react）

代码：<div dangerouslySetInnerHTML={{__html:this.textToEmoji()}}></div>this.textToEmoji()这块代码可以替换为字符串（带有html标签样式的字符串），例如：‘<divstyle="color:red;">这是红色文字</div>’展示效果如下：...

2019-05-06 11:44:43 1852

原创 react中打包时解决浏览器缓存的问题

将打包后的文件放到服务器上，浏览器访问就会缓存，单纯的刷新页面是更新不了的，必须进行清除缓存并加载才行，为解决这个问题，打包时对文件新增随机码。这样再打包发布到服务器上，只刷新一下页面即可更新。由于我在项目中用到了electron，而electron打包好后是不能进行刷新的，所以用到了如下方式在配置electron的主窗口的启动页面时候加上随机数，这样每次打开exe应...

2019-05-06 11:39:57 9240

原创 react UI 组件库Ant Design of React的使用

学习网址：https://ant.design/docs/react/introduce-cngithub地址：https://github.com/hushaohhy/react-router-dom-demo/tree/future/1.0.2github更改的内容：https://github.com/hushaohhy/react-router-dom-demo/commit/fe...

2019-04-25 11:44:09 613

原创 react项目中使用sass样式

本文主要介绍如何在使用create-react-app创建的react项目中使用sass来编写样式文件。本文github：https://github.com/hushaohhy/react-router-dom-demo/tree/future/1.0.11、展示全部文件在项目的根目录下，执行以下命令，将简化版的项目结构全部展示。npm run eject2、在packag...

2019-04-25 09:39:37 7258

原创在react框架中使用redux的总结

参考学习网址：1、https://www.jianshu.com/p/7a867be0594a如何优雅地在React项目中使用Redux2、http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html阮一峰本文主要是根据第一个网址中的内容进行学习。本文所写代码的github地址：ht...

2019-04-24 17:41:50 361

原创 html中固定table的首行和首列

见代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1....

2019-04-24 15:27:50 3672

原创 react框架学习入门（二）

由于之前直接上手的是react-native，因此再来学习react框架的时候感觉轻松不少。本文按照菜鸟教程练习了一些使用方法，仅供参考。github：https://github.com/hushaohhy/react-router-dom-demostudy.js（子组件）// 该组件是菜鸟教程上的学习内容import React, { Component } from 're...

2019-04-23 14:56:15 213

原创 react框架学习入门（一）

一、前言react框架是前端三大框架之一。学习网址：http://www.runoob.com/react/react-tutorial.html 菜鸟教程二、安装使用create-react-app来快速搭建react开发环境。create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-ap...

2019-04-22 17:40:26 2146

原创 react中fetch请求的使用封装

react中推荐使用fetch请求github地址:https://github.com/hushaohhy/react-router-dom-demo一、项目结构二、http相关的js代码http.js代码如下：global.$ = { post: (info) => { var bodyvalue = ""; var ar...

2019-04-22 17:06:01 2058

原创 react-router-dom的使用（react框架路由）

一、前言截止目前在网上搜索react路由，有react-router和react-router-dom两种，后来研究发现，后者是前者更新升级后的产物。可以用js代码来控制路由的跳转。官网：https://reacttraining.com/react-router/web/guides/quick-start二、路由的使用以下代码见github：https://github.co...

2019-04-22 15:37:48 2420 1

原创 electron-builder的使用（初接触，有些含义不懂）

electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npm install -g yarn安装electron-builderyarn add electron-builder --save-dev二、配置在package.json中配置"bu...

2019-04-19 17:39:49 8669

原创 Electron入门教程一（electron的基础安装等）

一、前言官方文档：https://electronjs.org/docsElectron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。二、安装配置1、新建文件夹electro...

2019-04-19 15:36:17 9881

原创 js实现鼠标拖拽缩放div

封装为了jq插件，如下drag.js;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最大宽度 minW:50// 可伸缩的最小宽度 };// 参数默认值 var opts ...

2019-03-19 09:59:48 6014 1

原创用css实现的进度条效果

参考地址：https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100html：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"

2019-01-15 17:04:46 1712

原创 js冒泡排序和.sort排序的方法

js代码：function Sort() { // 定义冒泡排序的方法 this.bubbleSort = function (arr,flag) { for(var i=0;i<arr.length;i++) { for(var j=0;j<i;j++) { if(arr[i]>arr...

2018-12-20 15:10:41 523

原创 js实现base64的转化

本文实现的功能：一、前言1、字符串转base64。2、base64转字符串。3、input file选择的图片转base64。4、input file选择图片在线预览。5、input file 修改上传类型。二、插件插件所在github地址：https://github.com/hushaohhy/base64将base64之间的转化封装成了插件如下：...

2018-12-19 13:19:07 5915

原创 js实现导入导出Excel（结合js-xlsx）

本文是单纯用前端实现导入导出Excel的功能。说明：1、导入要求导入的数据是文本格式。2、导出是导出json数据到excel文件demo的githup地址：https://github.com/hushaohhy/imexport 代码如下：1、通过以下命令行安装js-xlsx，在dist中复制出xlsx.full.min.js引入到页面中。js-xlsx的git...

2018-12-18 15:29:26 6707

原创实现手机端1px边框的sass写法

由于dpr导致写的border:1px red solid;并不能在手机上实现真正的1像素。通过伪类实现手机端一像素的代码：@mixin border_bottom($color) { & { position: relative; &:before { content: ""; position: absolute; ...

2018-12-17 17:06:31 489

原创前端实现数据的分批加载（相当于分页），前端模糊查询

一、分批加载当前端在渲染dom元素时，数据多的时候渲染非常慢。并且很容易造成页面卡死，解决这个问题通常是用分页来解决的。分页有两种方式：1、后台进行分页，前端通过传参的方式每次请求接口进行分页。2、前台进行分页，请求一次接口返回所有的数据，前端通过js进行分页。本文所实现的是：请求一次接口返回所有数据，通过js将所有的数据进行二次分组，分割成每10个(或多个)一组，加载时，先加载一部分...

2018-12-17 16:32:12 10049

原创 jq插件仿百度图片中移动鼠标的效果

demo地址：https://download.youkuaiyun.com/download/hhy1006894859/10850963html代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport&

2018-12-14 16:32:36 230

原创小球的曲线动画（贝塞尔曲线）

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial

2018-12-13 14:16:49 933

原创 datatables的使用

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。官方网址：http://www.datatables.club/demo：https://download.youkuaiyun.com/download/hhy1006894859/10847026一、基本使用1、引入jquery、jquery.dataTables.min.js...

2018-12-13 09:42:31 287

原创 bootstrap-closable-tab可关闭的tab标签页（插件）

Demo下载地址：https://download.youkuaiyun.com/download/hhy1006894859/10846105这是从网上找的一款可以关闭的tab标签页插件：1、这是基于bootstrap的插件，因此要引入bootstrap的相关插件前提得引入jquery：2、引入该插件：代码如下：//子页面不用iframe，用div展示var closab...

2018-12-12 17:09:19 6640

原创 html中表格固定表头

html：<div class="table_div_wrap"> <div class="table_thead"> <table cellpadding="0" cellspacing="0"> <thead> <tr&am

2018-12-11 14:03:39 1245 1

原创实现放大镜效果的插件

插件的主体js代码如下：function getId(id){ return document.getElementById(id);}var fdj = function (obj) { var lay = getId(obj.lay), smallImg = getId(obj.smallImg), bigImg = getId(obj...

2018-12-11 08:46:36 1455