伤寒杂病
1：better-scroll与wx.previewImage 安卓点击冲突bug
由于better-scroll对click事件进行了二次封装处理，需要在初始化时配置
new BScroll(this.$refs.scroll, {
click: true
})
- 作用：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
- 但是自定义的 click 事件会阻止一些原生组件的行为，如 checkbox 的选中等，所以一旦滚动列表中有一些原生表单组件，推荐的做法是监听 tap 事件
但是实际中发现，在ios上使用正常，在安卓中时，问题就来了，安卓上点击查看图片调用wx.previewImage 时，发现事件被调用了两次，每次点击查看图片，都会打开两张相同的图片
官方说的tap事件，也试了下，效果一样，仍是调用两次，后来解决问题时我发现，要做两处改变，第一种加.stop.prevent第一次发现这个问题时，我加上这个就ok了，后来项目不知道修改了什么，发现又无效了，于是又加上了第二种
- 阻止默认事件与冒泡，我用的vue所以直接@click.stop.prevent，原生js event.stopPropagation(); event.preventDefault();
- 使用touchstart 与touchend事件替代
<div class="NEED_DEFAULT_EVENT" v-if="item.msg_type*1 === TYPE_IMG">
<img @load="loadImage" :style="calcImgWidth(item)" v-if="ISIOS" @click.stop.prevent="previewImgHandle(item)" class="msgImg" v-lazy="item.content" alt="">
<img @load="loadImage" :style="calcImgWidth(item)" v-else @touchstart="touchStartHandle($event)" @touchend.prevent="touchEndHandle(item,$event)" class="msgImg" v-lazy="item.content" alt="">
</div>
touchStartHandle(e){
let touch = e.changedTouches[0]
this.firstX = touch.pageX
this.firstY = touch.pageY
this.firstTime = new Date().getTime()
},
touchEndHandle (item, e) {
let touch = e.changedTouches[0]
let lastX = touch.pageX
let lastY = touch.pageY
let lastTime = new Date().getTime()
let diffX = Math.abs(lastX - this.firstX)
let diffY = Math.abs(lastY - this.firstY)
let diffTime = Math.abs(lastTime - this.firstTime)
//由于考虑到微信上长按会触发，查保存图片与识别二维码等默认功能，所以没加点击成长按时的，时间限制，因为时间一长，会自动触发成微信本身的事件，于是冲突掉了，现在的点击事件，
//所以touchend不能加.stop否则微信的事件就无法触发了，仅此针对微信做的修改，浏览器环境使用，仍需加上时间限制diffTime < 200 ,
//ios由于没出现这样的问题 ，所以一开始我就做的判断，ios仍采用@click的方式
if (diffX < 10 && diffY < 10 ) { // && diffTime < 200
this.$emit('preview', item)
}
},
2：关于better-scroll会阻止原生的滚动，这样也同时阻止了一些原生组件默认行为的觖决方式
preventDefaultException
- 类型：Object
- 默认值：
{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/} - 作用：better-scroll 的实现会阻止原生的滚动，这样也同时阻止了一些原生组件的默认行为。这个时候我们不能对这些元素做 preventDefault，所以我们可以配置 preventDefaultException。
- 默认值
{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/}表示标签名为 input、textarea、button、select 这些元素的默认行为都不会被阻止。 - 备注：这是一个非常有用的配置，它的 key 是 DOM 元素的属性值，value 可以是一个正则表达式。比如我们想配一个 class 名称为 test 的元素，那么配置规则为
{className:/(^|\s)test(\s|$)/}。
this.scroll = new BScroll(this.$refs.scroll, {
probeType: this.probeType,
click: this.click,
pullDownRefresh: this.pullDownRefresh,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|IMG)$/, //表示所有input textarea button select img等元素，默认事件不会被阻止
className: /(^|\s)NEED_DEFAULT_EVENT(\s|$)/ //表示所有NEED_DEFAULT_EVENT类的元素本身（不包括子元素），默认事件不会被阻止，如文字长按出现复制粘贴，微信图片长按出现保存、收藏、转发、识别二维码等
} })
3：vue单页面 与 wx API调用wx.config设置失败问题
由于其本身是在微信内置浏览器上运行，除了基础配置要正确外，
页面跳转方式推荐用
window.location.href='/spa/msgGroup/chat?groupId=222' 或者
window.location.replace('/spa/msgGroup/chat?groupId=222')
4：使用new Image()获取图片的宽高
getImgWH (imgUrl) {
return new Promise((resolve, reject) => {
let img = new Image();
let baseUrl = window.location.origin
img.src = baseUrl + imgUrl + '?' + Date.parse(new Date())
img.onload = function () {
resolve({
width: img.width,
height: img.height,
url: baseUrl + imgUrl
})
img = null
};
})
},
5：setTimeout 第二个以外的参数
setTimeout(function(x,y){
console.log(x,'---',y); // 第三个参数---第四个参数
},1000, '第三个参数','第四个参数');
由于IE不支持第三个参数，如下是解决方案：
(function(w){
//ie传入第三个参数
if(!+[1,]){//除IE外，!+[1,]都是返回false
(function(overrideFn){
w.setTimeout = overrideFn(w.setTimeout);
w.setInterval = overrideFn(w.setInterval);
})(function(originalFn){
return function(fun,delay){
var args = Array.prototype.slice.call(arguments,2);
return originalFn(function(){
if(typeof fun == 'string'){
eval(fun);
}else{
fun.apply(this,args);
}
},delay);
}
})
}
})(window)
