简介html2canvas的一些坑 1.带图片的页面生成图片跨域问题 1）同源的图片，ios和安卓用background-image都没问题 2）不同源的图片，ali-oss的图片（有允许跨域请求头）和cdn的图片（没有允许跨域请求头），在ios上用background-image不行，安卓没问题。 3）不同源的图片，ali-oss的图片（有允许跨域请求头）和cdn的图片（没有允许跨域请求头），用xhr请求必须有允许跨域请求头，不然请求失败 4）用img标签，ios和安卓都可以，但是不支持属性object-fit，用了html2canvas-objectfit-fix，支持了object-fit属性，但是不支持object-position（需求是动态返回的图片放在固定宽高的容器中不能有黑边，需要cover，但是竖着的图片想保留上部分，横着的图片想保留中间部分），在html2canvas-object-fix中object-position默认居中，无法更改 5）ios上canvas的drawimage（）方法的第三个参数，即从纵向的什么位置开始裁剪，不能为负数，负数不生效

简介app内嵌h5遇到的小问题记录，经验值+1 1.调app原生给的方法会有些不常用的写法 123456if (!isIOS) { // 例如这句语法，如果用了eslint，rules里有"no-undef"这些会导致eslint报错，可以把这些规则关掉 javascript: nativeRegisteredTools.invoke("reg03", st);} else { window.webkit.messageHandlers.setShare.postMessage(st);} 2.app原生给的方法有的是用location.href调用，不方便拦截，当需要拦截/捕获结果时，想到的办法就是用定时器 1234567891011// 未登录(或者说是未获取)window.location.href = `${encodeURI("cmgyt://yt.getuserinfo?callBackFun=ytGetuserinfo")}`let ...

1.特殊字体在css中怎么用 1234567@font-face { font-family: tszt; /*这里是说明调用来的字体名字*/ src: url('./tszt.ttf'); /*这里是字体文件路径*/ }.a { font-family: tszt} 2.禁止页面缩放，user-scalable 1<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no;"> 3.img标签的object-fit 4.webpack分析打包的插件webpack-bundle-analyzer 12345678// 基本配置# yarn add webpack-bundle-analyzer// vue.config.jschainWebpack: config => { config .p ...

做了一个涉及音视频的h5页面，做下问题记录 项目简介：h5页面内嵌到原生app中，可以分享（调app原生方法）到微信、朋友圈、qq、qq空间、微博，也可以用任何浏览器打开（不考虑pc）。 1.audio标签在ios上不会预加载，所以音频时长一开始获取不到，搜到一些偏门的方法（body.click一下；audio.play再马上audio.pause；）等，都不好使（可能是特殊情况能用，不建议用）。如果能后台返回时长就让后台返回一下，如果不行就让产品经理妥协吧。 2.用slider做自定义播放器，拖动进度条，更新audio当前时长，松手后进度条会弹回去导致无法拖动到指定位置。 1234567891011121314151617181920212223242526272829// 框架是vant-ui，进度条控件<van-slider button-size="18px" class="vs" active-color="#2fb5ba" v-model="value" @change="c ...

简介js基础数据类型有基础数据类型和引用数据类型 一、类型分类1.基础数据类型数字Number 字符串String 布尔Boolean Undefined：字面意思就是未定义的值，一般来自一个表达式最原始的状态值，不是人为操作的结果，所以不要显式的给变量赋undefined。 1.声明未定义的变量，默认值是undefined 2.函数默认返回值是undefined 3.调用函数没有传实参，打印参数为undefined 4.对象没有的属性，打印也是undefined Null：字面意思就是空值 1.当一个要保存对象的变量还没有真正存放对象，就可以赋值为null，以区分null和undefined，可以理解为它是一个对象引用的占位符，在堆中不占空间 2.当一个数据不再使用时，用null来解除引用，垃圾回收机制会在下次运行时将其回收 Symbol：代表独一无二的值，最大用法就是用来定义对象的唯一属性名 BigInt：可以表示任意大小的整数。Number类型有范围限制，对于非常大的整数将自动四舍五入，存在精度问题，BigInt解决了此问题 2.引用数据类型object array func ...

简介Promise 一、概念1.概念Promise是es6提供的一个构造函数，es6+进行了完善，是一种新的异步处理方式，使用的时候需要new一个Promise对象，用来表示异步操作的结果 2.原理打印一下，console.log(Promise)打印出来是native，无法看到实现代码。 通过console.dir(Promise)可以打印出来，console.dir意思是对一个对象进行检查，会打印出一些细节。如下图，在Promise构造函数中有all，allSettled，any，race，resolve，reject等方法，在原型prototype中有then，catch，finally等方法。 二、为什么使用Promise1.Promise优点异步操作的代码规范 回调地狱 可以批量处理异步任务，统一处理抛出的错误 2.Promise缺点一旦新建就会立即执行，无法中途取消 当pendding时无法知道Promise处于哪个状态，是刚刚开始还是快要结束 如果不设置回调函数，内部错误无法反应到外部 三、使用1.参数接收一个回调函数作为参数，这个回调函数会立即执行，它属于同步任务 ...

简介This 一、概念123456789let v = 1let obj = { v: 2, fn: function() { console.log(v) }}let a = obj.fna() // 1 在对象内部的方法中访问对象内部的属性，js需要通过this机制来支持，this是和执行上下文绑定的 this相当于是隐式的提供了一个对象引用，需要关注的问题就是this的指向问题。 以下都是说的非严格模式下 二、this指向问题1.默认是指向window对象 2.隐式绑定，谁调用就指向谁，对象调用，指向该对象；如果把对象的方法赋给一个全局变量，再调用，则指向window 3.显式绑定，call，apply，bind 4.new关键字修改指向 5.嵌套函数中的this不会从外层函数中继承 5.1.用self变量保存外层函数的this，通过作用域机制使嵌套函数内部可以使用外部的this 5.2.用箭头函数，箭头函数没有this，它里面写this要去外层作用域查找

简介 一、为什么要模块化模块化解决的问题： 1.全局变量污染：变量重名覆盖问题 2.变量保护：使用命名空间模拟模块化时，一个模块修改另一个模块的值，另一个模块不知情 3.梳理模块间依赖关系：模块间的执行顺序和依赖关系需要梳理 二、模块化历程 1.CommonJsnode.js内置使用的一种规范（逐渐废弃，而改用esmodule），规范就是规范，没有为什么 cjs规定每个js文件就是一个模块，每个模块都有require和module变量 require读取和执行js文件，是在运行时同步加载执行的，所以不适用于浏览器，会阻塞页面渲染； module有个exports属性，包括了导出的对象，require获取的就是module.exports对象 2.AMD,CMD这两种模块化规范是由社区人员提出的，对应amd由require.js（为了异步加载模块，适用于浏览器），对应cmd有sea.js（阿里的玉伯写的，为了能像cjs一样清新的写法并且像amd一样的异步加载），这是两个js库，是对两种规范的实现，提供了模块化的方案，提供了接口实现模块的导入和导出 3.ESModule以上规范都是要运行 ...

简介将日期展示为农历：辛丑(牛)年 五月十三 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941 ...

简介 一、同源策略同源策略：url协议、域名、端口相同，就是同源。默认两个不同的源之间不能操作dom和访问资源 1.dom层面，不能互相访问，postmessage跨文档消息机制 2.数据层面，cookie，localstorage不能互相读取， 3.网络层面，不能跨域请求，跨域资源共享策略 二、安全问题1. xss攻击，恶意脚本攻击类型1.存储型，在提交表单时把脚本提交，服务端保存在数据库，当返回给前端再使用时就会执行脚本 2.反射型，提交表单，服务端不保存，处理后即返回。提交脚本也就会返回脚本 3.页面劫持，本地抓包等方式，不经过服务端直接控制页面 方案1.服务端对脚本过滤 2.csp策略：资源黑白名单，禁止加载哪些脚本，禁止向第三方域提交数据 3.设置cookie时加上httponly，则cookie无法通过脚本document.cookie读取 2. csrf攻击，跨站请求伪造类型1.img标签的src是一个请求，而不是图片资源。 2.点一个链接，自动发起请求 解决1.设置cookie的samesite属性值是strict，在第三方域下请求本域时就不会带上有这个属性值的coo ...