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({ 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)