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)