xingxingxingge-优快云博客

原创 JS 获取剪切板图片

onpaste 事件onpaste 事件在用户向元素中粘贴文本时触发。注意：虽然使用的 HTML 元素都支持 onpaste 事件，但实际上并非支持所有元素，例如 p 元素，除非设置了 contenteditable 为 “true”<p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容</p>有三种方式可以在元素中粘贴内容：按下 CTRL + V从浏览器的编辑菜单中选择 “Paste（粘贴）”右击

2022-02-16 14:53:15 4056 1

原创图片/视频url 转 File Blob

图片转Base64由于 onload 方法是异步的便于取值, 用 Promise 封装一下 function urlToBase64(url) { return new Promise((resolve) => { let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') let img = new Image() img.crossOr

2021-12-17 16:17:33 6849 2

原创 Vue及React中跨域配置

Vue配置代理在 config/index.js 中配置 proxyTabledev: { //...... proxyTable: { '/api': { target: 'http://192.168.0.104/', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/' //接口重写调用接口时用 api 替换 target 的地址 /

2020-06-14 20:42:27 1795 1

原创 React之Render Props

术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。<DataProvider render={data => ( <h1>Hello {data.target}</h1>)}/>上面是官方的解释,我的个人理解是: 当前组件(DataProvider)接收一个函数组件(rend

2020-05-19 15:08:49 354

原创 React高阶组件

高阶组件是一个函数，接受一个组件作为参数，返回一个新的组件高阶组件有两种实现方式属性代理 (将高阶组件的props传给了被包装的组件)function Hoc(WrappedComponent) { const ComponentName = WrappedComponent.displayName || WrappedComponent.name || "Component" return class extends React.Component { //为了方便调试,请选择一

2020-05-18 20:52:31 239

原创 Vue 自定义v-model

官方实例父组件<template> <div> <p>父组件:{{name}}</p> <Child v-model="name" /> </div></template><script>import Child from './Child'export defa...

2020-05-04 18:26:04 266

原创 Vue 混入 mixins

mixins 概念官方网址官方是这样说的: 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项个人理解: mixins 类似函数封装, 将可复用的功能抽离,可以提取出来单个文件来封装函数基本使用创建混入对象, mixins 是一个对象, 我们可以...

2020-04-09 18:46:29 460

原创防抖和节流

防抖动是将多次执行变为最后一次执行节流是将多次执行变成每隔一段时间执行一次防抖和节流属于前端的性能优化,场景用于监听一些持续触发的事件，如 resize、scroll、mousemove 等等, 如下给window添加 resize 事件window.addEventListener('resize', function(e){ console.log(e.target.innerWi...

2020-04-05 19:56:07 190

原创 ES6总结 class

ES6 class 的本质就是原型继承，class只是语法糖目的是让我们用更简洁明了的语法创建对象及处理相关的继承javascript传统做法是当生成一个对象实例，需要定义构造函数，然后通过new的方式完成function Person(name){ this.name = name}Person.prototype.run = function () { console.log...

2020-03-10 15:05:09 216

原创 ES6总结 let 、const 和块级作用域

块级作用域ES5 只有全局作用域和函数作用域, 没有块级作用域ES6 新增块级作用域概念一对花括号 {} 即为一个块级作用域 if 语句和 fo r语句里面的 {} 也属于块作用域没有块级作用域,将带来很多不合理的场景内层变量可能会覆盖外层变量var tmp = new Date();function f() { console.log(tmp); if (false) {...

2020-03-09 17:46:10 688 1

原创 ES6总结箭头函数

箭头函数的this的区别普通函数的 this 指向是那个最终调用他的对象箭头函数的 this 定义的时候直接绑定父执行上下文里的this 不会因为调用方式而改变首先看个普通函数的栗子var name = 'win';var obj = { name: 'obj', fun: function () { console.log(this.name) }}obj.f...

2020-03-07 17:14:16 229 1

原创 ES6总结解构赋值

文章目录1. 数组的解构赋值2. 对象的解构赋值3. 字符串的解构赋值4. 常用方法ES6 按照一定的模式,从数组或者对象中提取值,对变量进行赋值,称为解构赋值1. 数组的解构赋值ES5为变量赋值var a = 1;var b = 2;var c = 3;ES6 解构赋值可以写成这样从数组中取值,按照位置为变量赋值var [a, b, c] = [1, 2, 3];解构赋...

2020-03-06 18:02:50 216

原创移动端 HTML5 打电话发短信发邮件

<a href="tel:123456">打电话</a>window.location.href = "tel:123456"<a href="sms:123456">发短信</a>window.location.href = "sms:123456"<a href="mailto:123456@163.com">发送邮件&...

2019-10-30 15:42:01 807

原创 Mac 搭建 React Native Android 环境

1.安装Homebrew2.安装node Watchmanbrew install nodebrew install watchman3.Java环境搭建3.1 下载并安装JDK3.2 配置java环境变量,在终端运行以下命令/usr/libexec/java_home(运行此命令可以得到java安装路径) touch ~/.bash_profile ...

2019-10-24 10:57:35 842

原创 React Native 打包 iOS

1.在项目的 ios 目录下新建 bundle 文件夹2.在项目目录中运行以下命令react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle ...

2019-10-22 16:20:19 1430

原创新建的 React Native 项目报错Pointer is missing a nullability type specifier

为了避免麻烦,我觉得新建一个项目首先注意一下两点构建项目时指定 react-native 的版本react-native init myrn --version 0.57.0新建好项目后首先rm -rf node_modules &&npm install1. ios 错误信息如下Pointer is missing a nullability type...

2019-10-22 14:16:25 440

原创 React Native 找不到模拟器 Could not find iPhone X simulator

在终端使用 react-native run-ios 后报错Could not find iPhone X simulatorError: Could not find iPhone X simulato解决方法: 找到 /node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js 做如下修改if (!v...

2019-10-17 15:14:19 1150 1

原创 React Native ios 填坑之 Linker command failed with exit code 1(use-v to see invocation)

1. 如果是报错信息是library not found for -XXXX那就是第三方库的引入报错,找到link Binary With Libraries 看一下引用的库有没有重复的,或者路径错误,重新添加一下, 然后点击 Product > clean2. 另一种错误信息找到 Deployment Info 把 Deployment Target 调高...

2019-10-15 17:53:04 1510 2

原创 React Native ios 填坑之 main.m “Thread 1:signal SIGABRT“

iOS运行后卡在启动界面并在main.m抛出错误 Thread 1:signal SIGABRT, 网上都是说修改了控件,重新添加就OK直接贴出我的解决办法,可能不是每个人都是适用,我这里是IP地址填错,打包后没有及时将IP修改回来1.用 XCode 打开RN项目, 项目名/项目名/AppDelegate.m 根据路径把AppDelegate.m 文件打开, 找到jsCodeLocat...

2019-10-15 17:33:51 709

原创 React Native Text 文字垂直居中

import {Platform} from 'react-native';style: { fontSize: 28, height: 40, textAlign: 'center', textAlignVertical: 'center', ...Platform.select({ ios: { lineHeight: 40 }, androi...

2019-10-14 17:53:24 2549

原创 React Native ios 填坑之 Error: `fsevents` unavailable (this watcher can only be used on Darwin)

react-native run-ios 运行报错Error: `fsevents` unavailable (this watcher can only be used on Darwin)网上一查两个命令解决,但是........我这边brew install watchman 安装失败一直卡在哪里npm r -g watchmanbrew install watchman...

2019-10-13 17:17:06 4251

原创 Mac 安装 brew命令

官网:https://brew.sh/index_zh-cn.html打开终端运行以下命令,运行之后再按一下 enter 然后会要求输入密码/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"检查是否安装成功brew -v卸载命令...

2019-10-13 17:09:52 2822 3

原创 npm install 报错 Failed at the XXX install script

npm ERR! Failed at the realm@2.29.1 install scriptnpm ERR! This is probably not a problem with npm. There is likely additional logging output above使用 --ignore-scripts 安装 (先把某个报错的包单独安装)npm in...

2019-07-26 11:46:20 34091

原创 React Native 通知 DeviceEventEmitter

1. A页面注册监听事件,别忘了在组件销毁的时候将其移除import {DeviceEventEmitter} from 'react-native';componentDidMount() { this.listener = DeviceEventEmitter.addListener('xxxName',(param) => { });}...

2019-07-08 16:32:17 432

原创 React Native 三角形

triangleLeft: { width: 0, height: 0, borderTopWidth: 10, borderTopColor: 'transparent', borderRightWidth: 10, borderRightColor: '#999', borderLeftWidth: 5, borderLeftColor: 'transpare...

2019-07-05 10:49:48 1886

原创 React 父组件调用子组件方法

class Parent extends React.Component { render() { return( <div> //1 父组件调用子组件时传递一个onRef 函数 <Child onRef={(child) => { this.child = child }}/> </di...

2019-07-01 10:53:55 3266

原创 React Native Realm 配置及使用

官方文档一安装npm install realm@2.1.0 --save #没指定版本我这边安装失败二配置Android2.1.1 文件 android/app/build.gradledependencies { implementation project(':realm') //++}2.1.2文件 android/settings.g...

2019-06-26 21:04:53 2745

原创 git 回滚操作

git 的三种回滚方式--hard 清空所有修改,删除本地数据--soft 将之前提交的内容恢复到暂存区,不会修改本地文件--mixed 将之前提交的内容恢复到未暂存状态,不会修改本地文件对本地代码库进行回滚git log //查看提交历史，找出要回滚到的commit-idgit reset --hard c.........

2019-06-15 10:35:12 37140 2

原创 hover() 事件委托

$(document).on("mouseenter mouseleave",".class",function(event){ 　　if(event.type == "mouseenter"){ 　　　　　　}else if(event.type == "mouseleave"){ 　　　　　　};});mouseenter mouseleave 只有在鼠标指针穿过(离...

2019-06-12 14:13:29 823

原创 React 生命周期

组件加载的时候触发的函数： constructor 、componentWillMount、 render 、componentDidMount (dom操作,请求数据)组件数据更新的时候触发的生命周期函数： shouldComponentUpdate(nextProps, nextState) 是否要更新数据,接收两个参数,return true;才会执行更新数据...

2019-06-10 17:31:41 260

原创 React Native Android物理返回键两次退出程序

//注册componentDidMount() { if (Platform.OS === 'android') { BackHandler.addEventListener('hardwareBackPress', this.onBackHandler); }}//移除componentWillUnmount() { if (Platform....

2019-06-10 11:38:33 1140

原创 React Native WebView 开发中的各种问题

1.WebView 嵌入 html 代码时乱码, 在后面加 baseUrl: ''<WebView source ={{html:"<h1> html </h1>", baseUrl: ''}}></WebView>2.浏览器返回上一页//定义 canGoBackconstructor(props){ super(props...

2019-06-10 11:27:40 4575 4

原创 table添加table-layout:fixed属性和colspan后列宽调整无效

给表格加上table-layout: fixed; (防止td被撑开) 属性后,如果第一行设置了colspan 合并单元格后,那么后面的后面的单元格都被平均分配了,无法设置 width 属性解决办法: table 单元格宽度一般都是按照第一行设置的宽度来进行分配的,在 table 第一行添加 colgroup 固定每一列的宽度示例:<table> <co...

2019-06-04 14:03:41 4956 1

原创 React + Electron

1.创建一个 react 项目# 安装 create-react-app 命令,如果已将安装请忽略npm install -g create-react-app# 创建 electron-react 项目create-react-app electron-react# 进入项目cd electron-react# 启动 npm start浏览器输入 localhost:30...

2019-05-25 11:14:29 1953 3

原创 Electron 渲染进程中 require is not defined

一个 Electron 应用总是有且只有一个主进程(main.js) 多个渲染进程(index.html index2.html ...) 最近一个项目需要在渲染进程中使用node模块上个小demo index.html 这里引用node fs模块读取本地文件<!DOCTYPE html><html> <head> <m...

2019-05-23 11:27:27 9372 8

原创 Windows上搭建Flutter环境

1.配置环境变量,新建用户变量PUB_HOSTED_URL https://pub.flutter-io.cnFLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn 2.获取Flutter SDK 2.1 下载地址:https://flutter.dev/docs/developme...

2019-05-22 11:45:18 172

原创第一个Electron程序

再此之前你需要安装node 官方下载：https://nodejs.org/en/download/安装好之后在命令行中输入 node -v 可查看到node的版本号即可1.创建一个空文件夹,在该文件夹中运行npm init运行后需要输入项目名称版本描述各种,一切默认即可,完成后会在文件夹中生成package.json 文件,这里稍加修改{ "name": "hel...

2019-05-22 10:47:32 571

原创 React Native 打包apk

一.生成签名密钥运行以下命令,运行后会让你输入一些信息密码之类的 ---- 在 Windows 上keytool命令放在 JDK 的 bin 目录中(比如C:\Program Files\Java\jdkx.x.x_x\bin), 你可能需要在命令行中先进入那个目录才能执行此命令keytool -genkey -v -keystore release.keystore -alias k...

2019-05-16 18:02:48 336

原创 React Native 解析html代码 HTMLView

安装 npm install react-native-htmlview --saveimport HTMLView from 'react-native-htmlview';class Demo extends Component{ render(){ var htmlContent='<p> HTML字符串 &...

2019-05-16 15:35:47 1840

原创 Tomcat启动时中文乱码

修改文件 apache-tomcat-7.0.94/conf/logging.propertiesjava.util.logging.ConsoleHandler.encoding = GBK

2019-05-13 11:21:16 1562 3

空空如也

空空如也