- 博客(42)
- 收藏
- 关注
RSS订阅原创 随记之 BroadcastChannel多窗体信息共享
BroadcastChannel 接口表示给定源的任何浏览上下文都可以订阅的命名频道。它允许同源的不同浏览器窗口、标签页、frame 或者 iframe 下的不同文档之间相互通信。消息通过 message 事件进行广播，该事件在侦听该频道的所有 BroadcastChannel 对象上触发，发送消息的对象除外。
2024-12-05 11:51:39
115
原创 桌面倒计时
基于electron + vue + pinia 数据持久化本地缓存做了一个桌面倒计时的demo，随手记录一下，哪里不对，希望可以帮忙指出来。主要就两个页面，一个为编辑时间列表窗口，一个为无边框展示窗口。
2023-04-24 14:42:29
482
原创 大屏适配--React hook
前言目前市场可视化大屏越来越多，百度的echarts等，或者阿里的DataV、百度的Suger、腾讯RayData等直接进行制作，适配问题大多数都是使用px2rem方法进行转换，大屏的适配基本是根据设计稿尺寸制作比例，适配各种屏幕的其实很多组件也大多是进行比例缩放； 前端的布局基本使用display: flex/gird布局方式;代码如下：import React, { useState, useEffect } from 'react';import s from './index.less'
2022-11-02 11:24:18
1208
原创 随记：Taro之小程序+echarts
随记：Taro之小程序+echartsecharts-taro3-react文档npm依赖安装不适配 图表无法显示，文件下载可以放到components文件下；将echarts.js里的{t.addEventListener.(e,n,i)}改为 {t.addEventListener?.(e,n,i)} 如不更改还是会发生不显示；** 子组件 柱状图 EChartBar**import { useEffect, useState, useRef } from 'react'import {
2022-11-02 11:22:07
541
原创 随记：Taro之cdn图片路径
随记：Taro之cdn图片路径1. 全局引入less 样式背景路径2. Image 图片路径1. 全局引入less 样式背景路径/** 安装 taro-plugin-style-resource */npm i taro-plugin-style-resource/** 配置 /config/index.js */import path from "path";// 示例, 如果你使用 `vs code` 作为开发工具， 你还可以使用注释的语法引入插件包含的声明文件，可获得类似于typescri
2022-05-31 14:23:03
576
原创 copy复制代码
const copyTranslateResult = () => { const copy = (e: any) => { e.preventDefault() e.clipboardData.setData('text/plain', 'content') document.removeEventListener('copy', copy) } document.addEventListener('copy', copy) .
2021-10-11 11:37:07
2495
4
原创 egg之创建登录，注册接口
框架：egg 、umi、antd，mongodb；mongodb安装教程egg安装umi： yarn create @umijs/umi-app；yarn install；yarn start；umi bulid；初步步骤就完成了egg安装相应的插件；→config/plugin.js // 跨域 cors: { enable: true, package: 'egg-cors', }, // mongodb 数据库 mongoose: { en
2021-08-23 11:49:18
1479
原创 react 高德地图本地gltf 模型
引入高德地图npm install @amap/amap-jsapi-loader --save在utils创建 AMap.tsimport AMapLoader from '@amap/amap-jsapi-loader';export let getAMap = (id = 'container', config = {}) => { return new Promise((yes, no) => { AMapLoader.load({ key: 'xxx
2021-08-15 20:13:41
1437
4
原创 node.js 谷歌翻译api
node 谷歌翻译api安装插件 npm install -g google-translate-cn-apiserver.jsconst translate = require('google-translate-cn-api');//导入express框架const express = require("express");//导入axios插件const axios = require("axios");//初始化expressconst app = express();//本地服
2021-07-30 13:08:46
1022
原创 引入第三方字体库
html:{font-family: 'PingFangSC-Regular';}@font-face { font-family: 'PingFangSC-Regular'; src: url('assets/font/PingFang-SC-Regular.ttf');}持续更新 字体库 github
2021-06-02 14:04:18
375
原创 react 加载动态词云
index.jsimport React, { Component } from 'react'import styles from './index.css'var width = 300var height = 300var direction = '-1' //方向 -1 横向顺时针 1 横向逆时针 -2 纵向顺时针 2 纵向逆时针var speed = 600 //速度var color = ['#2D4DB6', '#04B67C', '#D1AF07', '#E27914',
2021-05-24 23:21:14
1431
原创 原生js 调用百度人脸api
注册登录账号，购买人脸识别；创建人脸识别应用账号登录成功，您需要创建应用才可正式调用AI能力。应用是您调用API服务的基本操作单元，您可以基于应用创建成功后获取的API Key及Secret Key，进行接口调用操作，及相关配置。具体步骤请参考：https://blog.youkuaiyun.com/weixin_44694178/article/details/97404694$.post('https://aip.baidubce.com/oauth/2.0/token?grant_type=clie.
2021-04-30 15:56:48
566
1
原创 ThreeJS之模型引入
<script src="./lib/three.js"></script><script src="./lib/js/loaders/OBJLoader.js"></script><script src="./lib/js/loaders/MTLLoader.js"></script><script src="./lib/js/controls/OrbitControls.js"></script>&l
2021-02-25 11:25:21
992
原创 ThreeJS基础模板
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Three组成</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } </sty
2021-02-25 11:23:42
284
原创 Threejs之粒子动画/点击交互
随意粒子动画管道扫光柱点击事件粒子动画 function createParticle() { var geometry = new THREE.Geometry(); var mouse = { x: 0, y: 100 }; var vertices = new THREE.Vector3( mouse.x, mouse.y, -10
2021-02-25 11:22:26
1483
原创 Three.js (练习)
练习3D字体几何体三角体图表（不能交互）Sprite-canvas卡片3D字体// 字体 const cubeSize = 30; const material = new THREE.MeshNormalMaterial(); const loader = new THREE.FontLoader(); const textMesh = new THREE.Mesh(); const createTypo = font =
2021-02-25 11:16:59
435
原创 Three.js入门指南
1.threejs导入3d模型到web端，3d模型的文件格式可以找个建模软件转化为threejs所支持的格式，如.dae .obj .mtl stl gld等harp.gl 3D地图渲染引擎key：TiWMPfkD-HO_Kv9exEnvQWyKpIqvtMwFfTYX5tmFRSI案例Three.js入门指南(张雯莉)应用结构上图需要注意的事项：首先有一个渲染器(Renderer)。这可以说是three.js的主要对象。你传入一个场景(Scene)和一个摄像机(Camera)到渲染器(
2021-02-25 11:08:54
2427
原创 javascript基础语法之 大乱炖
大乱炖获取当前时间戳js 去掉空格/回车换行去重jquery 兄弟元素滚动条数组截取: 一维数组数组分割数组添加属性，相同属性成组对图片进行压缩js 数组拼接逗号分割字符串获取当前时间戳Date.parse(new Date())(new Date()).valueOf()new Date().getTime()js 去掉空格/回车换行元素.val().replace(/\ +/g,"");//去掉空格.replace(/\ +/g,"") //去掉空格方法元素.text().repl
2021-02-25 11:02:58
137
原创 微信小程序之生成海报保存本地
知识都在代码里index.wxml<view class="canvas-box"> <button bindtap="generate">生成海报</button> <canvas canvas-id="myCanvas" wx:if="{{shows}}" style='width:{{canvasW}}px; height:{{canvasH}}px' /> <button bindtap="saveImg">保存图片
2021-02-25 10:54:45
496
原创 Three.js之引入dae文件类型
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } &l
2021-01-14 17:25:29
1405
原创 vue 高德地图（1）
vue-amapnpm install vue-amapmain.jsimport VueAMap from 'vue-amap'Vue.use(VueAMap)// 高德地图VueAMap.initAMapApiLoader({ key: '密钥', plugin: [ 'AMap.Scale', 'AMap.Icon', 'AMap.Marker', 'AMap.C
2020-09-12 17:47:29
1033
5
原创 vue知识点
js中数据类型boolean,Number,String,null,undefined什么是原型链每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找…这个操作被委托在整个原型链上，这个就是我们说的原型链了。原型指针 1、__proto__ 是原型链查询中实际用到的，它总是指向 prototype； 2、p
2020-08-26 16:57:11
151
原创 react面试题（30个）
1.React Native相对于原生的ios和Android有哪些优势。react native一套代码可以开发出跨平台app， 减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。等等2.React Native的优点和缺点在哪里。缺点：内存、转化为原生的3.如何在组件渲染时调用组件内部嵌套的子组件This.props.children4.组件的生命周期mount:componentWillMountcomponentDidMount
2020-08-26 15:04:02
7021
1
原创 react基础知识
文章目录特点优点Propsstate生命周期受控组件非受控组件高阶组件（HOC）Virtual DOMReduxredux 优点React HooksFlux与MVC组件分为类组件和函数组件类组件禁止修改自身的props值函数组件接收一个单一的 props 对象并返回了一个React元素函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。特点：虚拟DOM并非真实DOM，可以服务器渲染，遵循单向数据流 or 数据
2020-08-26 14:36:33
131
原创 js（对象一行拆分为多行）
对象一行拆分为多行 var a={ 'contents0': "0", 'contents1': "2", 'name0': '0', 'name1': '2', 'type0': "0", 'type1': "2" } var keyList=Object.keys(a) var projectList=[] var rex=/[0-9]$/g for(le
2020-08-26 12:48:59
1824
原创 学习链接react
yarn 功能版本查看：yarn -v建立新工程 ：yarn init添加依赖包：yarn add安装全局依赖包：yarn global add更新依赖包：yarn upgrade移除依赖包：yarn remove脚本运行：yarn serve查看依赖包列表：yarn list项目打包：yarn buildumi3 models 规范https://blog.youkuaiyun.com/deletGlobal/article/details/106183217umi2中的window.g_
2020-08-26 12:47:48
100
原创 react Typescript之 Videojs 插件
react Typescript之 Videojs 插件npm install video.jsnpm install @type/video.js页面组件index.tsximport React, { Component } from 'react';import videojs from 'video.js';import 'video.js/dist/video-js.css'import styles from './index.css';//接口类型interface
2020-07-25 16:08:57
1612
原创 umi3学习 Typescript(一)
配置文件config.tsimport { defineConfig } from 'umi';import RouterConfig from './router.config';export default defineConfig({ /** 浏览器路由配置 **/ history: { type: 'browser' }, /** 路由配置 */ routes: { path: '/', component: './index' }, /
2020-07-25 16:06:26
956
原创 CryptoJS 加密
CryptoJS 加密CryptoTS不太完善 建议使用CryptoJStypescript版 请安装 yarn add @type/crypoto-jsAES区块加密标准算法,三种常见方案:AES-128,AES-192,AES-256 区别在于密钥的长度不同AES-128长度为16bytes(128bit/8);AES-192长度为24bytes(192bit/8);AES-256长度为32bytes(256bit/8);密钥越长，安全强度越高，但伴随运算轮数的增加，带来的运算开销就
2020-07-25 16:05:52
3111
原创 react之echarts图表
react之echarts图表option ==>必须,echarts图表的配置项和数据{标题title、图例legend、提示框tooltip、x轴xAxis、y轴yAxis、series等http://echarts.baidu.com/option.html#title.}notMerge==> 可选， 是否不跟之前设置的 option 进行合并，默认为 false，即合并。lazyUpdate==> 可选，在设置完 option 后是否不立即更新图表，默认为 false
2020-07-25 16:05:14
389
原创 webpack学习（一）
webpack安装node.jsnpm install -g webpackmkdir hello-webpackcd hello-webpacknpm init依赖npm install --save-dev webpackwebpack 源文件 输出文件webpack src/app.js dist/app.bundle.js
2020-07-25 16:04:39
91
原创 React_antd_Comment(评论)_typescript
嵌套评论index.tsximport React, { Component } from 'react';import { Comment, Avatar } from 'antd';interface ICode { children?: any onClickComment: any}const ExampleComment: React.FC<ICode> = (code) => { const { children, onClickComment
2020-07-07 16:54:26
1350
原创 Typescript学习之路—练习
功能：定义一个操作数据库的库，支持 Mysql、Mssql、MongDB要求1：Mysql、Mssql、MongDB 功能一样，都有 add、update、delete、get 方法注意：约束统一的规范，以及代码重用解决方案：需要约束规范所以要定义接口，需要代码重用所以用到泛型1、接口：在面向对象的编程中，接口是一种规范2、泛型 通俗理解：泛型就是解决类 接口 方法的复用性//泛型接口==>函数类型interface DBI<T> { add(info: T): boo
2020-07-03 11:19:16
664
原创 Typescript学习之路（三）
* 普通装饰器(无法传参), 装饰器工厂(可传参) * 执行顺序: 属性 > 方法 > 方法参数 > 类 * 多个同样的修饰器,先执行后面的 * 调用api
2020-07-02 12:01:40
161
转载 umi随记
安装uminpm/yarn create @ umijs/umi-app安装依赖npm/yarn install运行npm run start打包npm run buildUmi3==>推荐使用yarn路由路由组件可通过 props 获取到以下属性，match，当前路由和 url match 后的对象，包含 params、path、url 和 isExact 属性;location，表示应用当前出于哪个位置，包含 pathname、search、query 等
2020-06-29 16:02:13
318
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人