微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

1、ios端兼容input光标高度

问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上
当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。

出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字的底部

解决办法:高度height和行高line-height内容用padding撑开

例如:

            .content{
              float: left;
              box-sizing: border-box;
              height: 88px;
              width: calc(100% - 240px);              .content-input{
                display: block;
                box-sizing: border-box;
                width: 100%;
                color: #333333;
                font-size: 28px;
                //line-height: 88px;
                padding-top: 20px;
                padding-bottom: 20px;
              }
             }复制代码

2、ios端微信h5页面上下滑动时卡顿、页面缺失

问题详情描述:在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后,卡顿导致如左图下面部分丢失。

出现原因分析:

笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。【有待考证】

解决办法:只需要在公共样式加入下面这行代码

*{
  -webkit-overflow-scrolling: touch;
}复制代码

But,这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点,那么该节点的显示会错乱,当然还有会有其他的一些bug。

拓展知识: -webkit-overflow-scrolling:touch是什么?

MDN上是这样定义的:

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

3、ios键盘唤起,键盘收起以后页面不归位

问题详情描述:

输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑

出现原因分析:

固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件

解决办法:

<div class="list-warp">
  <div class="title"><span>投·被保险人姓名</span></div>
   <div class="content">
     <input class="content-input"
            placeholder="请输入姓名"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>    </div>
 </div>复制代码
changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    }复制代码

拓展知识: position: fixed的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘

4、安卓弹出的键盘遮盖文本框

问题详情描述:

安卓微信H5弹出软键盘后挡住input输入框,如下左图是期待唤起键盘的时候样子,右边是实际唤起键盘的样子

出现原因分析:待补充

解决办法:给input和textarea标签添加focus事件,如下,先判断是不是安卓手机下的操作,当然,可以不用判断机型,Document 对象属性和方法,setTimeout延时0.5秒,因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了

    changefocus(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1;
      if(isAndroid){
        setTimeout(function() {
         document.activeElement.scrollIntoViewIfNeeded();
         document.activeElement.scrollIntoView();
        }, 500);
      }
    },复制代码

拓展知识:

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动

5、Vue中路由使用hash模式,开发微信H5页面分享时在安卓上设置分享成功,但是ios的分享异常

问题详情描述:

ios当前页面分享给好友,点击进来是正常,如果二次分享,则跳转到首页;使用vue router跳转到第二个页面后在分享时,分享设置失败;以上安卓分享都是正常

出现原因分析:jssdk是后端进行签署,前端校验,但是有时跨域,ios是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数,分享朋友圈参数还不一样,貌似系统不一样参数也不一样,但是每次获取url并不能获取后面这些参数

解决办法:

(1)可以使用改页面this.$router.push跳转,为window.location.href去跳转,而不使用路由跳转,这样可以使地址栏的地址与当前页的地址一样,可以分享成功(适合分享的页面不多的情况下,作为一个单单页运用,这样刷新页面跳转,还是..)

(2)把入口地址保存在本地,等需要获取签名的时候 取出来,注意:sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存!【该方法未验证】

作者:codercao
链接:https://juejin.im/post/5d47d2eff265da03f77e4e3a

原文地址:https://www.cnblogs.com/zhangruiqi/p/11378785.html

时间: 2024-11-01 06:47:48

微信H5页面前端开发,大多数人都会遇到的几个兼容性坑的相关文章

C#开发微信门户及应用(44)--微信H5页面开发的经验总结

在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页面,给我们提供了很大的便利,本文是在自己做的一些H5微信应用页面上做了一些功能总结,希望能够给大家提供一定的帮助. 1.微信网页开发 1) JSSDK 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语

微信h5页面中跳转下载第三方app的办法

需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app) 变通方法: 一.借助TX的应用市场 --'应用宝':将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可跳转应用直接进行下载,iphone则会自动跳转Appstore(需在TX开发平台进行配置) 总结:虽然这种方

微信h5页面中跳转外部浏览器下载APK的办法

需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app) 变通方法: 一.借助TX的应用市场 --'应用宝':将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可跳转应用直接进行下载,iphone则会自动跳转Appstore(需在TX开发平台进行配置) 总结:虽然这种方

微信h5页面调用第三方位置导航

微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考:微信公众号开发文档 步骤: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/... jssdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了,相信用过微信其他api的这一步都可以省了

新大番薯棋牌牛牛源码安装搭建 微信h5牛牛大厅开发选择方式

一个完整的客户端棋牌游戏从结构上包括了游戏.游戏大厅.游戏网站.客户端等部分,如果把做棋牌游戏比作建房子,那打造一个自己的棋牌之家就得经过前期的规划设计,中期的建筑施工,后期的装修设计等环节,有的人建房子可能会亲力亲为,有的人为了省钱而去购买小产权房或二手房,更多的人则选择开发商购买商品房.本质上,做棋牌游戏基本也是如此,无论个人还是团队企业,在当前日渐成熟的网络棋牌游戏市场,新大番薯棋牌牛牛源码安装搭建(h5.maliwl.com) 微信h5牛牛大厅开发选择方式   ,要想涉足无非也是以下这几

微信H5页面登录到支付的心得

这几天帮朋友做了一个微信H5页面,代码都是down下来的,只添加了微信登录和微信支付功能. 以前没这么搞过这方面的,不知道怎么入手,在同事的帮助下终于完成了,现在记录下来,避免以后继续踩坑. 1.首先你的公众号中必须支持微信网页授权的权限,创建了一个方法里面判断用户是否登录,没有的话那么就会去请求微信的接口获取用户的基本信息, 获取信息后存入到数据库,cookie和session中:下次进入的时候判断cookie和session中的数据是否和数据库的一致,一致的话就默认为登录状态.这样微信登录的

微信h5页面屏蔽投诉按钮的完美实现办法

   在做微信投票,小说阅读类,以及大部分推广类微信H5页面经常会遇到因为被举报投诉导致页面被微信封杀的情况.因为微信是处理投诉举报是非人工,所以一旦这种举报投诉多次域名就会百分百被封杀.申诉等处理又是遥遥无期,基本希望渺茫,严重影响了正常推广的拓展.如果我们能够屏蔽掉微信的举报投诉按钮的话,就能够从源头彻底杜绝了恶意举报投诉的情况,经多方寻找和研究最终找到了能够完美屏蔽到掉微信举报投诉按钮的方法.      演示地址1:http://www.188tool.cn/button/demo1.ht

微信开发系列——微信订阅号前端开发利器:WeUI

前言:年前的两个星期,学习了下微信公众号的开发.后端基本能够基于盛派的第三方sdk能搞定大部分事宜.剩下的就是前端了,关于手机端的浏览器的兼容性,一直是博主的一块心病,因为博主一直专注于bootstrap的相关组件学习,知道bootstrap做响应式没有任何问题,所以曾经尝试过直接用bootstrap来布局,对于一些简单的栅格布局,bootstrap没有任何问题,可是一旦涉及前端组件这一块的时候,总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了.于是乎博主打算另辟蹊径,找找

【经验分享】微信H5页面制作_页面制作教程

现在,H5页面在微信中很受欢迎,邀请函就是其中一种,它有着传播快.影响范围广等特点,看起来虽然很高端复杂,很多企业或个人都不知道如何制作,但是其实非常简单,借汇桔宝平台就能轻松搞定. 它具有海量的场景营销模板,让您不会错失任何一个与客户接触的机会:数百个游戏模板,只需轻松配置即可玩转微信朋友圈,推广吸粉无比轻松.在这里您可以制作H5微场景,包括节日问候.企业宣传.产品推介以及活动介绍.你可以制作邀请函,包括:商务邀约和沙龙聚会:你还可以制作微投票,包括:市场调研.商业评选:你甚至还可在这里制作万