安卓和ios针对小程序兼容以及小程序技术实现上本身遇到的一些问题

小程序实现问题

问题：1.小程序中弹出框，使用absolute定位一屏蒙版结果发现上下滑动蒙版没有遮住后面内容。只遮住后面内容的一屏。

解决：蒙版用fixed布局设置top right bottom left 为0 整个后面的内容都会被蒙版遮住

缺点：被蒙版遮住的内容依然可以滑动，只不过是不能操作

问题： 2.小程序中input按照文档设置自动聚焦不起作用 auto-focus focus都无效

解决: 同时使用focus 还有auto-focus 虽然官网提示即将废弃，但是亲测这种方式可用。在wxml的input中给focus设置一个变量，在需要实现的场景中给该变量设置一个600ms的延时配合auto-focus 就会自动聚焦

let timer = setTimeout(() => {this.setData({autoFocus: true})clearTimeout(timer);},600)

场景：要做一个功能，先AR识别比心成功后，播放一个MP4的视频，视频播放完成后展示全屏滑动轮播图等特效以及其他业务场景

问题：3.在AR比心后，通过wx:if变量控制video显示前面会有黑色的闪屏，闪动后视频才加载播放用户体验很差这里AR比心是使用百度AI开发的接口通过拍照传过去对比做的

解决：autoplay设置为false 让视频不会自动播放等前面的业务需求执行完成后让视频播放播放完成后设置videoStatus为true 让video隐藏掉执行其他场景

// 视频播放js相关代码
let openVideo = wx.createVideoContext('myVideo');
openVideo.play();

// wxml中video写法
<video id="myVideo" class="{{videoStatus? 'video-play': ''}}" enable-progress-gesture="{{false}}" bindended="endPlay" object-fit="cover" autoplay="{{false}}" vslide-gesture-in-fullscreen="{{false}}" controls="{{false}}" poster="{{baseUrl}}/beauty/zh_cn/store/media/wysiwyg/cvdaog/ar/morenzhen.png" src="{{baseUrl}}/beauty/zh_cn/store/media/wysiwyg/cvdaog/ar/white1.mp4"></video>

其他业务场景举例：小程序第一帧KV播放视频加载的时候会出现KV中第一帧的视频黑屏一下再播放的情况因为controls设置成了false 默认不展示播放控件所以默认帧也不可用

解决方案：vedio提供了一个默认事件 bindloadedmetadata（视频元数据加载完成时触发）实践发现会在视频黑屏结束后触发该方法所以默认进入小程序时可以先设置一个骨架屏loading效果当视频元数据加载完成触发该函数时让骨架屏消失当前页面展现就可规避掉黑屏一下的问题。除了这个之外要做好容错例如当视频本身加载成功但是进入binderror的时候为了防止骨架屏一直在loading状态我在binderror事件里也设置了关掉骨架屏效果以及onLoad后 2秒如果骨架屏还在加载也会关掉这个主要是为了确保视频播放有了其他问题等导致骨架屏不关闭设置一个最长关闭时效 2重容错

业务场景：从其他小程序页面进入到小程序某一页并且滚动到该页面对应商品位置

问题：4.利用wx.pageScrollTo()滚动到对应位置不管是设置scrollTop的像素值还是selector设置定位到某个选择器位置都会出现不准确的情况设置了setTimeout 2s后解决了一部分的问题但是当页业务场景太多需要滚动定位到指定位置的产品所以还是存在很多问题

解决：使用scroll-view小程序自带组件设置scroll-y 通过scroll-into-view某个元素的ID 去跳转到对应位置但是存在一个问题就是scroll-view内部使用swiper会出现部分安卓手机滑动的时候 swiper的内容很卡估计是部分机型处理器不行暂时测试vivo和oppo对应一款会这样

问题：5.给小程序设置背景图片，会发现有些全屏背景图片糊了刚开始一直定位以为是图片分辨率的问题所以被迫使用image 但是有些业务场景使用image还要涉及点击左右按钮屏幕滑动之类的就很麻烦

解决：小程序是支持设置背景图片的只是属性不可以简写设置background-size: 100% 100%; 正确写法如下因为我这个背景需要不够的位置重复铺所以设置了repeat-y;可以根据业务场景去调整我这里说的简写是background: url('xxx') cover no-repeat;这种类似的。

问题：6.通过wx.createSelectorQuery();获得某个节点的高度，会发现部分ios机型获取到的高度不准。当时用了2款机型测试一款是iphone7p 另一款 iphone xs Max 会出现获取几次中，有一两次高度不准的情况。也许其他机型更多。但是我们以我当前测试机为主

解决：出现这种情况，应该是部分机型Dom节点没有完全加载完导致计算高度不准。将计算高度的相关内容写在onReady中解决了iphone7p中的获取不准的问题但是 iphone xs Max还是非常偶尔出现这种情况因此设置了定时器给个异步执行并且加上了50ms 解决了iphone xs Max中获取节点不准的问题

    onReady () {let settingTimer = setTimeout(() => {// 计算元素高度 传递给组件const query = wx.createSelectorQuery();query.select('.box-wrap').fields({size: true},(res) =>{//这里返回元素自身的DOM属性let height;if (res.height) {height = res.height - 80 - this.data.headerHeight.height + 'px';this.setData({searchHeight: height})clearTimeout(settingTimer);}}).exec();}, 50);},

问题：7.scroll-view里面的内容，滚动时偶尔会卡顿，出现划不动的情况，多次上下滑，又可以滑动。

解决：1.scroll-view内部包裹的view元素class设置了overflow:hidden;overflow-x: hidden; overflow-y: hidden;其中的一种就会出现这种问题。去掉就可以正常滑动了。如果去掉测试还是有的机型出现卡顿，那么让对应机型清除掉小程序缓存，再次测试即可正常。

2.控制台看scroll-view的class内部的内容超出scroll-view 出现长滚动条

3.控制台给page加上border 给scroll-view也加上了border 发现是scroll-view超出了page 不知道为什么 page距离底部有大概几十像素的距离然后我把scroll-view的高度设置为90% 发现在page内了问题也解决了也间接解决掉了scroll-into-view属性定位到某个位置定位不准在iphone12中直接回到顶部其他ios手机中偶现定位不准直接定位到页面顶部的问题。真是amazing

业务场景详细描述：本身香水这一栏做的是sticky效果，到达顶部时固定在顶部，没到达顶部时正常滚动。然后这个栏目下面的banner以及商品正常向下滚动当滚动出去一段距离时，点击香氛蜡烛或者沐浴与身体护理，切换分类以及商品banner信息并且定位回到banner位置。当时iphone12手机在切换tab的时候直接定位就回到这个页面的最顶部。使用其他测试机，偶现回到顶部。尝试了很多中方式，例如数据一次请求好，不在切换分类的时候接口拿数据渲染只是切换请求好的数据的所在下标位置。还是不行然后将这个数据直接都写死在data中的。又可以定位准确。这个问题真的是很难琢磨。没想到调整了一下超出遮挡的问题这个自动也好了。

问题：8.wx.previewImage预览图片在某些机型上出现黑色背景加载中效果，图片出不来的情况

解决方法：当时尝试了几种方式，结果发现问题出在图片链接上本身我们静态服务器其中一个域名的链接访问图片速度可能就比另一个略微慢一点。这次用这个链接在wx.previewImage上直接出现上述问题我将域名改成另一个直接就可以加载出来了猜测可能是cdn解析慢?或者解析出错导致的？出现这个问题的可能性是预判。我这里是出在图片链接上（换成m.就可以使用www.就访问不到）。

问题：9.父组件中引用了悬浮窗组件和一个授权个人信息组件根据业务场景变化在首页的悬浮窗组件中又使用个人信息弹框组件点击悬浮窗客服按钮弹出个人信息弹框组件后出现的问题是个人信息弹框组件上面的复选框一直点不到每次点击实际点的是首页的KV 通过同时调整悬浮窗组件和个人信息弹框组件的z-index值后依然无效

解决方法：拿掉悬浮窗组件套用个人信息组件这种方案

在悬浮窗组件客服按钮上写一个事件获取当前页面的页面栈并且直接修改父组件中data的值来调起个人信息组件这样就可以正常点选这个操作有点迷但是存在即合理吧和同事探讨他也遇到了一个相似的问题他通过修改2个组件的层级解决了问题

问题：10.swiper里面插入slot不生效写了个swiper组件用了slot 在recommed-product里面调用并且传入内容结果发现传入内容并没出现在swiper-item里面而是出现在了swiper标签的外面

解决方案：重新封装换方案目测是小程序bug

补充：

1.wx.switchTab的tabbar页面不可以在url链接上带参数可以通过在全局app.js里设置变量控制或者将要传递的数据存入缓存去拿需要的参数但是投入到公众号等的外部链接上面带的参数可以在tabbar页面的onLoad中拿到

2.tabbar对应页面的内部子页面，如果跳转其他tabbar页面会先回到当前tabbar页面闪一下才会跳转到其他tabbar的页面（业务场景：例如我们底部tabbar中首页和产品用的是tabbar 使用wx.switchTab跳转切换到产品tabbar的时候会展示产品menu分类页面点击其中的三级分类，会跳转到另外一个页面A。在A页面中点击首页tabbar，回到首页会首先闪一下回到产品menu分类页面然后才会真正跳转到首页tabbar页面）

3.scroll-view包裹sticky的时候 sticky失效只能使用fixed的方式利用scroll-view自带的属性bindscroll对要实现sticky效果的这个元素距离进行监控，在想要设置的距离时，设置变量控制position:fixed显示如果不使用scroll-view包裹，并且不使用sticky,也要实现sticky效果的话在onPageScroll小程序自带的函数中一样的操作，去监控距离。

4.业务场景：多个带搜索框的页面，悬停搜索框进入到搜索详情页，这里用A代替。搜索详情页可以通过历史记录或者热门搜索以及直接输入进行搜索进入到搜索结果页，这里用B代替。搜索结果页有一个搜索框和搜索list。我们可以通过悬停搜索结果页的搜索框或者左上角返回按钮回到搜索详情页。现在的问题是反复从B回到A进行多次操作。会出现返回的时候多次进入A后才会返回初始页面。我们想要的是不管多少次搜索，只要从B返回到A，然后点A页的返回按钮回到前一个页面。不要进行重复返回A页的情况。解决方法：通过全局拿navigate跳转的路由信息，并且判断路由数量如果路由数量大于1 就使用wx.redirectTo方式关闭当前页跳转即可达到该业务场景的要求。

5.小程序swiper中的bindchange事件直接操作swiper上的current属性会造成轮播死循环

业务场景：1.图片自动轮播 2.轮播图上有左右箭头可以点击切换当前轮播的位置 3.轮播上面有几个按钮点击按钮可以切换到对应轮播的第几张图

错误写法：

上面swiper中current对应的变量是active 这个active在bindchange的swiperChange事件中被直接修改操控导致接入测试时，测试工程师长期连续频繁切换按钮去切换轮播会出现轮播死循环卡死一直在抖

解决方案：定义一个中间变量去接收swiperChange中的当前轮播位置下标当点击左右箭头的时候对当前下标位置做处理再赋值给current对应的active变量这样就不会死循环还有一种可能性就是检查swiper上的属性是否被赋值或者赋容错默认值这种也可能导致死循环

后期又犯了一次这样的错误

轮播里面插入视频当视频播放完成后再进入下一帧轮播回到视频的时候让视频自动播放

这个功能中又使用了 bindchange事件操作了current属性值导致闪动解决方案 bindchange绑定的方法中不改变current属性对应的变量值因为本身我就操作了autoplay 让视频播放完成后 autoplay:true 自动轮播当视频回到第一帧的时候 autoplay:false 等待视频播放完成再轮播所以再多操作一遍current属性不仅没意义还造成了死循环闪动如果除了这2中情况 swiper再遇到其他问题要检查swiper上的其他属性是否赋默认值等情况

问题：还有一个会出现swiper频繁闪动的问题那就是swiper一直在轮播这时候手机小程序切后台时间久再切回来会偶尔出现这种问题

解决方案：在onHide的时候把swiper自动轮播设置false暂停掉 onShow的时候再让它继续自动轮播设置为true

6.小程序图片加载过程中，图片变形闪一下恢复正常

这个是因为图片我设置的mode:widthFix 然后css样式中只写了宽，没写高。所以出现的这个问题。把高写图片实际的高，或者auto就可以解决这个问题。

这篇博客也是为了自己后期再遇到小程序相关问题，忘记怎么解决。所以后续会一直更新补充。

安卓和ios针对小程序兼容以及小程序技术实现上本身遇到的一些问题相关推荐

Picker——uniapp[uview]微信小程序兼容支付宝小程序
博主uview-ui版本1.8.3 PICKER-时间选择组件-生日范围选择 my.datePicker 支付宝小程序api提供地址:在这里~ 地址:https://opendocs.alipay.c ...
java程序员内功_Java程序员如何成为内功深厚的架构师
一听到架构师,首先便想到的是在一间宽敞的房间中间坐着一位衣着得体的中年男人,望着落地窗外的风景凝思,万千思绪在脑海里翻腾,颇有运筹帷幄千里外的气势.程序员究竟是做架构师还是项目经理,最近看到微软潘正磊 ...
uni-app日历组件（calendar），兼容安卓、ios、微信、百度、抖音小程序
uni-app日历组件,兼容安卓.ios.微信.百度.抖音小程序效果图插件连接如何使用参数说明事件效果图插件连接插件链接: https://ext.dcloud.net.cn/plug ...
【小程序】小程序安卓，ios，ipad兼容问题
1,formId 不同说明:安卓与ios下的formId的规则是不一样的,之前由于后端拦截了导致报错 ios下的formId 安卓下的formId 2,尽量少用定位fixed的百分比说明:由于小程 ...
微信小程序解决ios端时间格式兼容的问题
微信小程序获取当时时间new Date时,会在ios真机上出现问题,具体表现为时间格式会报错并显示出NaN.这个bug并不会在模拟器和安卓系统出现,只会在ios系统上出现,具体原因是ios不支持符号 ...
小程序兼容各个ios版本
本篇文章记录的是小程序兼容的ios 6.7.7 ,plus, x及xs等等,最后方式设计人员应该看懂的设计方式(会了才能开发设计搞-) 第一.各个iphone的尺寸绝对是帮你解决各种问题的表,对应微 ...
【三端通用】微信即时通讯+视频聊天（安卓、IOS、小程序）项目完整版
# 简单描述: 此产品是本人耗时12day开发出来的,采用的是uniapp框架开发出来的,可快速云打包上线,也可以进行二次开发符合自己的具体需求. 为什么要选择uni-app框架去开发 ...
关于微信小程序iOS端时间格式兼容问题
关于微信小程序iOS端时间格式兼容问题在自己开发中,当时间格式为 2020-06-29 08:00 ,需要将时间转为其他格式时,Android端转换成功,iOS端报错或是转为NaN. 解决方法: 1 ...
小程序里头textarea在安卓和iOS下的兼容性问题
小程序里头textarea在安卓和iOS下的兼容性问题我最近才发现的一个问题,真令人头秃~~~~ 事儿是这样的,我负责编写的页面中有一个textarea输入框,当时没当回事儿,我自己测试的时候用自己 ...
input ios问题小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色卸载placeholder-class里面的co ...

安卓和ios针对小程序兼容以及小程序技术实现上本身遇到的一些问题

安卓和ios针对小程序兼容以及小程序技术实现上本身遇到的一些问题相关推荐

最新文章

热门文章