web前端
Callback_heaven
生命不息,奋斗不止。
展开
-
JSElectron使用speechSynthesis进行语音合成
Electron语音合成以及Win7下程序无响应问题解决方案原创 2022-06-16 16:25:24 · 1196 阅读 · 2 评论 -
Flutter安装与安装问题记录
安装当flutter添加进path后运行flutter doctor查看是否缺少其他环境,建议每安装一个环境重新查询一次。步骤下载flutter将flutter/bin加入用户环境变量path下载Android Studio配置Android Studio环境,参考文章:https://www.jianshu.com/p/332205db002c新建环境变量ANDROID_HOME,值为SDK根目录添加X:\Android\SDK\tools、X:\Android\SDK\platform原创 2022-03-28 12:50:01 · 8466 阅读 · 0 评论 -
图搜索法(广、深度优先搜索)
图搜索法(广、深度优先搜索)应用语言JavaScript构建一个图,结构如下:首先写一个类,包含添加顶点和边的方法图在JavaScript中的本质结构为:{ A:["B"], B:["A"], ...:[]}其中key代表顶点,数组代表连线,B:["A"]代表B与A相连,一般情况下A也会与B相连,为空时代表无连线function Graph() { this.vertexes = []; //顶点 this.edges = {}; //边 // 添加原创 2021-07-13 17:18:14 · 149 阅读 · 0 评论 -
KboneAPI部分bug修改
在使用KboneAPI时发现了很多BUG,于是着手修改源码showModal数据不会刷新的问题查看源码后发现内部的show方法仅做了修改display的操作,并没有对用户传入的数据做出相应的相应,所以会导致第二次调用时,传入数据无效,模态框使用的还是老数据。修改方案:src / interaction / modal.ts给show方法添加重置模态框参数的方法resetOptions: resetOptions(params = {}) { const options = Obj原创 2021-04-06 08:18:38 · 171 阅读 · 0 评论 -
KboneAPI Request设置自定义请求头报indexOf解决方案
设置kboneApi 请求头时碰到的问题header:{ "Token":"xxxx"},显示报错看了一下源码,直接写解决方案,将content-type一并写入header中: header:{ "content-type":"application/json", || "content-type":"multipart/form-data"等, "Token":"xxxx"原创 2021-03-10 15:46:34 · 202 阅读 · 0 评论 -
Echarts柱状图-每个柱子都是不同的渐变色
非常简单,直接上代码,修改option->series->bar的配置 { type: 'bar', data: [100, 200, 800, 100], barWidth: 30, showBackground: true, backgroundStyle: { color: '#0F173F' },原创 2021-01-19 10:42:20 · 1584 阅读 · 0 评论 -
IView + Vue2.0 树形插件拓展功能
IView树形插件拓展功能目标情景实例完整的vue最终实现的效果:目标点击文字可以展开树形结构,并可以获取到最内层项目。情景碰到一个需求需要使用树形插件,但iView的树形插件只能点击三角才能展开子项,新版本4.4.0提供的属性expand-node虽然可以点击文字展开,却没有提供可以获取到树最内层项目的事件,研究无果,索性打算拓展,放弃expand-node属性选用select-node属性,利用on-select-change来获得被点击的项目。实例组件:<Tree select-n原创 2020-10-28 16:01:20 · 879 阅读 · 0 评论 -
Electron10版本打印机崩溃问题
经过多个版本测试,证实打印机导致程序崩溃为Electron版本问题,解决方案为退回到Electron9版本即可解决原创 2020-09-28 07:51:36 · 775 阅读 · 0 评论 -
React-Context理解
React-Context类似广播功能可以无视props进行值传递,多用于共用值:例如:import React from 'react';const CommonUse = React.createContext( "公用参数");export default class UseContext extends React.Component{ constructor(props){ super(props); } render(){ ret原创 2020-09-09 21:31:56 · 216 阅读 · 0 评论 -
React-router 5.2.0 + React 16.13.1 路由守卫的简单实现
这几天从Vue转react,学习一下全家桶。React-router很强大, 但是文档是纯英文而且不直接提供类似Vue的路由守卫,所以需要手写路由守卫,下面是一个写法,可参考,路由守卫的作用都知道,就不再赘述,最基础的功能就是对登录状态进行一个简单的验证。首先创建几个页面: Home:主页 Login:登录 Error:路由出错的展示页面(404) 然后创建router.js用来编写路由配置步骤:1.import必要的组件:import React fro原创 2020-09-08 15:18:56 · 1824 阅读 · 0 评论 -
qrcode获取图片链接在安卓/ios上的问题
最近项目使用qrcode生成二维码,制作图片预览时出现了一个问题,在ios端使用document.querySelector('img')时没有问题,可以获取到图片及链接,但是在Android端(HuaWei mate10)则无法获取到,最后通过查看DOM结构发现在Android中img是没有图片链接且display为none的,只有canvas,所以使用canvas转码实现图片预览://获取canvas:var canvas = document.querySelector('can原创 2020-08-16 12:20:59 · 1020 阅读 · 0 评论 -
伪类选择器添加阿里图标的方法
阿里图标库下载源码得到iconfont.css@font-face {font-family: "iconfont"; src: url('https://at.alicdn.com/t/iconfont.eot?t=1572835366254'); /* IE9 */ src: url('https://at.alicdn.com/t/iconfont.eot?t=1572835...原创 2019-11-18 18:06:49 · 1405 阅读 · 0 评论 -
简单浅显的理解Vuex(初步)
Vue-CLI 3.0集成Vuex,默认文件为store.js内容:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);export default new Vue.Store({ *****})官方文档中的五个状态:1.State 单一状态树,简单来说就是定义初始值的位置。state:{...原创 2019-01-02 17:18:43 · 514 阅读 · 0 评论 -
微信小程序框架wepy获取授权
近期开发微信小程序决定使用Wepy框架,对比原生写了一下授权登录,在这里记录一下:(注释已经写详细)<script>import wepy from 'wepy'import 'wepy-async-function'import { setStore } from 'wepy-redux'import configStore from './store'const s...原创 2018-12-19 08:27:55 · 3430 阅读 · 0 评论 -
iview admin 使用mock.js模拟数据
最近在使用ivew admin做项目,为了前后端分离使用mock模拟数据,记录步骤:1.文件结构:2.打开src / mock,新建文件glbr.js:3.编写需要模拟的数据结构:import Mock from 'mockjs'import { doCustomTimes} from '@/libs/util';export const getHospital...原创 2019-03-27 16:39:47 · 2587 阅读 · 0 评论 -
webpack4打包
webpack 4不再需要配置文件,下面来测试一下:首先创建一个目录:test然后使用cmd初始化npm init -y引入webpack4npm i webpack --save-dev继续引入webpack-clinpm i webpack-cli --save-dev这个时候我们的文件夹是这样的:然后修改package.json,加入build脚...原创 2018-12-28 22:22:12 · 542 阅读 · 0 评论 -
ECMAScript 6的一些注意点 第二部分(函数拓展)
函数拓展1.参数变量是默认声明的,所以不能用let或const再次声明。function a(x = 5){ let x = 1; //error}2.使用参数默认值时,函数不能有同名参数。function a(x,x,y){} //正确function a(x,x,y=1){} //错误3.参数默认值不是传值的,而是每次都重新计算默认值表...原创 2019-02-27 17:22:27 · 333 阅读 · 0 评论 -
ECMAScript 6的一些注意点 第三部分(数组的拓展)
拓展运算符1.由三个点组成(...),将一个数组转为用逗号分隔的参数序列2.扩展运算符后面还可以放置表达式,貌似仅限数组中使用const arr = [ ...(x > 0 ? ['a'] : []), 'b',];3.后面是空数组,不产生任何效果。4.扩展运算符如果单独放在括号中,JavaScript 引擎就会认为这是函数调用。如果这时不是函数调用,就会报错...原创 2019-03-01 13:52:32 · 213 阅读 · 0 评论 -
ECMAScript 6的一些注意点 第一部分
什么是"暂时性死区"?在代码块内,使用let命令声明变量之前,该变量都是不可用的。var tmp = 123;let tmp; //报错typeof a; //报错let a = 1;// 不报错var x = x;// 报错let x = x;// ReferenceError: x is not defined如果区块中存在let和const命...原创 2019-02-25 17:21:35 · 164 阅读 · 0 评论 -
ECMAScript 6的一些注意点 第四部分(对象扩展)
对象的扩展1.属性简洁表示法 -- 允许在对象中写入变量和函数:let name = 'jack';let person = {name};person //{name:"jack"}let Person = {name:name};Person //{name:"jack"}属性名为变量名, 属性值为变量的值2.简写方法(method):let obj = { ...原创 2019-03-01 16:45:51 · 211 阅读 · 0 评论 -
ECMAScript 6的一些注意点 第二部分(字符串拓展 -- 数值拓展)
标签模板“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。 如果模板字符里面有变量,会将模板字符串先处理成多个参数,再调用函数。 函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分。假设有以下函数:let a = 1;let b = 2;function tag(x,y){ return x,y;}tag`this is ${a} ...原创 2019-02-26 17:26:10 · 175 阅读 · 0 评论 -
Vue computed中set和get的简单使用 -- 表格的loading
在Vue的计算属性computed中,可以定义get和set,话不多说上例子:使用iview admin做项目,目前做到表格方面,那么问题来了,表格数据使用异步请求,如何在数据到之前显示loading呢:<template><div> <Table :loading="loading" :data="tableData1" :columns="ta...原创 2019-04-04 17:20:31 · 2725 阅读 · 0 评论 -
请求头部带Token -- node.js Express模拟CORS
1.什么是跨域?通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略,默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源,这种安全策略可以预防某些恶意行为。2.什么是CORS?CORS(Cross-Origin Resource Sharing) -- 跨域资源共享,W3C的工作草案,定义了在必须访问跨域资源时,浏览器与服务器该如何进行沟通,CORS背后的基本思想...原创 2019-08-28 13:14:08 · 2065 阅读 · 0 评论 -
OOP中的自定义继承
OOP中的静态方法:static什么是静态方法? 无需创建子对象,就可用构造函数直接调用的方法。为什么需要静态方法? 有些方法不确定使用它的对象的类型,所以不能放在原型对象内部。何时使用静态方法? 只要一个方法,不确定实用它的对象的类型时,任意对象都可使用时,就可以使用静态方法如何使用静态方法? 将方法直接定义在构造函数上自定义继承 1、仅修改一个对象的父对象: ...原创 2018-02-26 23:00:22 · 263 阅读 · 0 评论 -
微信小程序wepy框架+minui踩坑之路
近期项目涉及微信小程序,鉴于原生小程序文件结构过于复杂,决定使用wepy框架开发wepy框架类似Vue的MVVM开发模式,并且支持promise与ES7 asnyc异步函数,记录一下项目开发过程中遇到的坑:1.minUI由于minUI与wepy框架兼容性较好,而且支持单组件导入,所以选择了minUI,使用方式官网有写,需要的组件直接npm安装即可,不过要注意的是,它的form组件对...原创 2018-12-28 09:40:45 · 2245 阅读 · 0 评论 -
Web Workers
首先需要了解什么是线程: 线程:是程序执行流的最小单元,一个标准的线程,由线程ID,当前命令指针(PC),寄存器和堆栈组成什么是指针: 指针:指针是编程语言的一个对象,利用地址,他的值直接指向存在电脑存储器中另一个地方的值,由于通过地址能找到所需的变量单元,可以说,地址指向该变量单元,因此,将地址形象化的成为指针什么是堆栈: 堆栈:在计算机领域中,堆栈是一个不容忽视的概念,堆栈是...原创 2018-03-27 01:29:03 · 150 阅读 · 0 评论 -
响应式布局
响应式 什么是响应式布局? 响应式网页,自适应网页,指的是一个网页会自动根据用户浏览设备不同,自动改变布局,可以被pc端,pad,phone正常浏览。 如何编写响应式布局? 第一步声明viewport元标签: 视口是什么? 虚拟的窗口,用来盛放网页内容 如何定义?<meta na...原创 2018-03-29 23:29:30 · 212 阅读 · 0 评论 -
JavaScript中的基本API整理及应用
第一类:string---------------------------------------------------------------------------------------------------------------强调:所有StringAPI都无权修改原数组,只能返回新的字符串-----------------------------------------------...原创 2018-03-24 01:49:56 · 382 阅读 · 0 评论 -
Node.js基础
Node.js1、什么是? (nodejs.cn -中文nodejs.org-官网) 是一个基于ChromeV8引擎的JavaScript运行环境,可以编写独立的服务器端程序,提供了更多符合CommonJS规范的对象 (1)JS与Nodejs的区别: 1、用途: JavaScript主要用于客户端,Nodej...原创 2018-03-18 17:19:11 · 278 阅读 · 0 评论 -
闭包的理解
首先需要了解什么是作用域和作用域链?作用域(scope)1、什么是作用域?一个变量的使用范围叫做作用域2、为什么存在作用域?为了避免函数内外的变量间互相干扰3、作用域分为两种 1、全局作用域:保存着所有全局变量/函数 2、函数作用域:保存函数内的局部变量4、变量的使用顺序先使用局部变量,当找不到局部变量时,再去全局寻找5、函数的生命周期**1、程序执行前 创建一个数组(执行环境栈...原创 2018-02-23 23:01:58 · 483 阅读 · 1 评论 -
面向对象(OOP)
什么是面相对象?程序中,都是用对象来集中描述现实中一个具体事物的属性和功能。为什么要使用面向对象?为了便于大量数据和功能的维护和使用何时使用面向对象?只要使用面相对象编程,都要先创建对象如何使用?事物的属性会成为对象的属性事物的功能会变成对象的方法成员=属性+方法创建对象的3中方法:1、对象直接量方式:var obj = {属性名:值,属性名:值,方法名:function(){.....原创 2018-02-24 22:31:34 · 462 阅读 · 0 评论 -
ECMAScript5
严格模式:什么是严格模式?比普通的js运行机制要求更严格的运行模式为什么使用严格模式?解决js中部分广受诟病的缺陷何时使用严格模式?几乎所有代码都要在严格模式下运行如何使用严格模式?(分2种情况) 1.新项目:在所有js文件/script标签的顶部添加:"use strict" 2.旧项目升级:逐个函数向严格模式迁移: 在函数定义内部的顶端添加:"use strict"要求: ...原创 2018-02-26 23:40:28 · 244 阅读 · 0 评论 -
ECMAScript6新特性
ES6:简介:ES6可以在不改变原理的基础上,尽量简化开发1、let作用:代替var,用于声明变量为什么要使用let:因为存在着两个问题: 1.声明提前 2.没有块级作用域 如何解决问题:一般我们要求: 1、不会被声明提前 let是如何实现的:let会进行检测,不允许提前使用未声明变量 2、添加块级作用域 (什么是块级作用域:if while do whi...原创 2018-02-28 23:04:47 · 191 阅读 · 0 评论 -
需要掌握的14个JavaScript的调试技术(转自w3cplus)
大家都知道熟悉掌握工具的使用能让我们事倍功倍,对完成任务的产生的影响非常大。对于JavaScript的调试,都一直说是难以调试,但事实上如果你掌握一些调试技巧,那么解决一些问题或调试Bug的时间会少很多。这篇文章整理了14个你可能不知道的调试技巧,但是下次你发现自己需要调试的JavaScript代码时,可能会用得上,也会因此记住这些调试技巧。这些调试技巧大部分都是针对Chrome和Firefox的...转载 2018-03-01 23:00:28 · 195 阅读 · 0 评论 -
DOM实用小例子与编程技巧
实用小例子1:使用DOM实现简单的伸缩二级菜单<!DOCTYPE HTML><html><head><title>1. 实现伸缩二级菜单</title><meta charset="utf-8" /><link rel="stylesheet" href="css/1.原创 2018-03-03 00:19:15 · 321 阅读 · 0 评论 -
原生JS实现简单的放大镜效果
目标:实现放大镜的效果 当鼠标放入图片时,放大图片,该效果多为电商网站使用代码:<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®&原创 2018-03-09 21:03:58 · 335 阅读 · 0 评论 -
实现简单的元素拖拽事件
通过clientX,clientY,offsetX,offsetY简单实现,代码如下:<style type="text/css"> .d1{ position:fixed; border:1px solid #000; width:100px; height:100px; }</style> </head> <body> &l...原创 2018-03-08 00:15:34 · 1364 阅读 · 0 评论 -
动态AJAX封装
在项目中,经常需要封装函数,而封装AJAX是很好的选择,可以通过传递参数动态进行异步交互,而且可以动态转判断并且转换JSON字符串下面上步骤:第一步,写出创建XMLHttpRequest异步对象的方法:function createXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }...原创 2018-03-07 22:40:35 · 199 阅读 · 0 评论 -
web Storage
什么是web Storage 在浏览器存储当前用户专用数据客户端存储数据的可选方式 Cookie:兼容性好,不能超过4KB,操作复杂 Flash:依赖于Flash播放器 H5 WebStorage:不超过8MB,操作简单 IndexDB:可存储大量数据,还不是标准数据什么是会话? Session:会话,浏览器从打开某一个网站的第一个页面开始,中间可能打开多个页面...原创 2018-03-28 00:53:57 · 149 阅读 · 0 评论 -
JavaScript函数式编程与函数柯里化(进阶一)
最近在学习JavaScript函数式编程,浏览了知乎前端大神的教程,故做简单笔记。/* ------------------------------------------------------------------------------------------------------------ 函数的纯与不纯*///对于相同的输入,永远会得到相同的输出,而且没有任...原创 2018-10-24 09:09:24 · 274 阅读 · 0 评论