自用随笔集
-
微信浏览器border 用1px，0.01rem会出现部分边框不显示的问题。
-
微信浏览器页面跳转window.location.href ios会出现底部的返回导航条，如果不需要返回，可以使用window.location.replace(url)代替。
-
递归函数返回 undefind。每次递归需要把递归自身return到最外层。使最外层得到最新的数据。
-
html2canvas.js 获取的dom内不允许出现跨域的图片，即使设置useCORS: true,也无效，需要将图片链接转为base64绑定到页面。
-
html2canvas.js 注意原dom的位置，必须在屏幕的可视区域内，不然截图不完整。position: fixed;
-
html2canvas.js直接用overflow:hidden;来缩小白色边框，生产的海报会不正常，推荐给img用transform:scale();来父元素用overflow:hidden;来实现缩小白色边框。
-
swiper-container得设置高度，不然slidesPerView会混乱。
-
document.addEventListener(‘WeixinJSBridgeReady’, function onBridgeReady() {
// 通过下面这个API隐藏右上角按钮
WeixinJSBridge.call(‘hideOptionMenu’);
});
// 开启微信右上角分享 WeixinJSBridge.call(‘showOptionMenu’);
-
vant上传文件:
headers: {
‘Content-Type’: ‘multipart/form-data’,
}
let fd = new FormData()
fd.append(‘file’, file.file)
FormData只能通过.get(‘健名’)方式去打印，console.log打印不出来。
append中的第一个参数为键名，是与后端定义好的接收参数名称。
file: (binary) 表示上传格式正确。
-
for…of，for…in。
for…of 常用来遍历数组，不可遍历普通实例对象。
for…in 常用来遍历对象和数组，不同的是for…in得到的是数组的下标，for…for是数组的项。注意：for…in 遍历的对象或者数组，会将其原型链上所有的属性一起遍历，也就是自定义属性会通过遍历返回，造成不同预想返回值。可通过hasOwnProperty()方法将其筛选排除。
遍历性能问题：
通过遍历事件反映。优=>劣：forEach > for in > for > for of 。
var buz = {fog: 'stack'
};for (var name in buz) {if (buz.hasOwnProperty(name)) {console.log('this is fog (' +name + ') for sure. Value: ' + buz[name]);}else {console.log(name); // toString or something else}
}
-
每次渲染前都会执行v-for循环，然后每个循环项都会进行判断v-if是否渲染。列表数据量少倒不会影响影响太多，如果列表数据量较大，在每次渲染时，将消耗大量的性能在渲染上。
-
ios在微信浏览器环境下长按图片会出现ios特有的callout信息，可以通过给图片设置样式解决。
img {-webkit-touch-callout: none; } -
微信公众号分享，传给后端的参数url，是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认)，包括’http(s)😕/‘部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。
-
// 禁用长按 * {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; } // 禁用选中 // 注意input框将不能聚焦输入，点击态将不饿能出现。 img {pointer-events: none;-webkit-user-select: none;-moz-user-select: none;user-select: none; } -
// 隐藏滚动条 // 火狐浏览器不支持 div::-webkit-scrollbar {display: none; } div{scrollbar-width:none; } https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width
16.vue生命周期中，切换路由，回退，都会触发beforeDestroy，destroyed。
- 微信公众号开发接口，只需要在全局调用一次授权即可，在需要触发的地方可直接调用ready方法执行。
18.Mixins在被冲突合并时，mixin内的先执行，组件内的后执行；并且，mixin内的函数在调用时也会执行，它并没有被销毁，而是方法被重写。
例：mixin中的方法打印hello mixin！组件中方法打印hello components！在被合并调用时，控制台会先打印hell mixin!再打印hello components!
19.微信小程序分页后setData数据量过大问题。
再增加一个数组，用来存放数据。这个方法，将每一页请求过来的数据的引用放到一个新的数组dataArray内。dataArray[0]存放第一页数据，dataArray[1]存储第二页数据。请求新一页，都只需要更新一组数据，这样set的数据就不会超过微信小程序允许的长度。这个方法首先在loadInitData时，清空dataArray，防止新数据与原数据冲突。然后将这一页数据放到dataArray[0]中即可。
20.注意在布局时，如果页面有输入框，dom高度不得随页面高度变化(100%)，不能将布局设置为absolute，fixed；Android会出现软键盘将布局顶上去的情况。只能固定dom高度解决。
21.微信小程序内嵌的h5页面没法通过小程序码直接跳转到另外的一个小程序页面；能实现的方式就是在初始小程序做一个中转页，h5回到改小程序的中转页，中转页再调用小程序的打开二维码api进行跳转。
iOS的解决方案是覆盖掉微信的样式：
body {/* IOS禁止微信调整字体大小 */-webkit-text-size-adjust: 100% !important;text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;
}
android 通过重写事件控制
网上的方法目前还未生效。
.modal-open {// 两个属性，禁止屏幕跟随滚动overflow: hidden;touch-action: none;
}
// 动态添加类，可以让微信浏览器禁止拉动页面。
document.getElementById("myDIV").classList;
/*可以返回元素的类名数组，classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。add(class1, class2, ...)remove(class1, class2, ...)contains(class) 返回布尔值，判断指定的类名是否存在。true - 存在，false - 不存在toggle(class, true|false) 在元素中切换类名。第二个参数可选。
25.\n生效方法：white-space:pre-wrap;
26.wx.getUserProfile()方法不支持直接通过方法调用，会直接进入失败的回调；必须通过点击事件绑定的事件调用。
27.微信小程序通过路由跳转到webview页面，如果跳转的链接带有参数，必须在跳转是时候进行encodeURIComponent()编码，webview接收的参数进行decodeURIComponent()解码；否则h5参数将会丢失。
28.FileReader()对象异步读取文件；上传功能利器。
[https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader]:
29.个人类型和海外类型的小程序不支持webview功能(公众平台无法配置业务域名)。
30.window.history对象，目前没找到有能够删除指定历史记录的办法；document.referrer可以拿到上一个历史记录的链接，可以根据这个链接的不同之处进行window.history.go(-2)返回两个页面(还是当前页面，只是把中间的外链变相移除了)。
31.new Map()
var obj = new Map()
// set
obj.set('a',1);
// get
obj.get('a') // 1
// has
obj.has('a') // true
// size
obj.size() // 1
// delete
obj.delete('a') // true
// clear
obj.clear()
传统对象本身上是键值对的结合，ES6提供可以以任意类型为健的数据结构new Map()。
使用new Map()构造函数的优势：
常规对象要遍历的话得先转成数组或者for…in…，但是for…in…仅遍历可枚举属性，非Symbol属性，并且遍历的顺序是任意的。而Map()可以直接遍历，并且遍历的顺序和键值对插入的顺序是一致的；还可以用forEach()进行直接遍历Map()对象。
let mapobj = new Map()
mapobj.set('name','ct')
mapobj.set('age', 18)
mapobj.set('tall', 180)mapobj.forEach((key,val) => {console.log(`${key}---${val}`)
})
/*
* ct---name
* 18---age
* 180---tall
*/
32.for…in…
for…in…主要是由于遍历对象，当然也可以遍历数组，不过遍历数组有更好的遍历方式。
for…in…只能遍历非Symbol类型的可枚举属性，就是说不可遍历Symbol类型，会遍历对象的原型链上的属性；如需仅迭代自身的属性，需要通过hasOwnProperty()方法进行过滤掉。
var obj = {name: 'ct',age: 18,tall: 180}
function createObj (){this.color = 'red'; this.id = 1; this.type = 'new'}
createObj.prototype = obj
var newobj = new createObj()
for(key in newobj){console.log(`${key} --- ${newobj[key]}`)}
/*color --- redid --- 1type --- newname --- ctage --- 18tall --- 180
*/
for(key in newobj){if(newobj.hasOwnProperty(key)){console.log(`${key} --- ${newobj[key]}`)}
}
/*color --- redid --- 1type --- new
*/
注意for…in…是以任意顺序进行遍历，不同的JavaScript引擎所表现的结果不相同(可以理解为不同浏览器)。特别是当键名用数字开头时。
for…in…中不可直接使用return中断循环。
可选项(?)
通常情况下，需要检验属性的存在再去做处理，不然会报错。
var obj = {name: 'ct', type: {a: 1,obj: {b:2,c:3}}}
obj.a?.a // undefined
使用 ? 来简化代码，遇到不存在的属性直接返回undefined。
双!操作符
双!操作符可直接将任何变量转换为Boolean类型，相当于进行Boolean(v)。
let a = 1
!!a // true
let b = 0
!!b // false
forEach()循环直接给item赋值不生效
forEach()循环中，item为该个对象的引用，若直接进行赋值给item，相当于把这个对象的引用给了item，并没有改变原数组。若item为基本数据类型，则不可直接赋值给item，因为并不会改变原数组。
错误示例：
let arr = [{ name: '1',id: '1'},{ name: '2',id: '2'},{ name: '3',id: '3'}
]
arr.forEach(item=>{if(item.name==='2'){item= {name: '4'}}
})
console.log(arr)
// 结果
[{id: "1",name: "1"
}, {id: "2",name: "2"
}, {id: "3",name: "3"
}]正确示例：
let arr = [{ name: '1',id: '1'},{ name: '2',id: '2'},{ name: '3',id: '3'}
]
arr.forEach(item=>{if(item.name==='2'){item.name = '4'}
})
展开运算符算浅拷贝
MDN上解释说，展开运算符和Object.assign()行为一致，执行的都是浅拷贝，只遍历最外的一层。
也就是说，在使用展开运算符时，只会深拷贝第一层的数据，对于第二层及其后面的数据，执行浅拷贝，其中一方改变，另一方也跟着改变。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！