vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题。小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情、出现原因以及相对应的解决方法。有相关问题的小伙伴,就一起来看看吧!
1、ios端兼容input光标高度
问题详情描述: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、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); 只在刚进入单应用的时候保存!
3、ios端微信h5页面上下滑动时卡顿、页面缺失。
问题详情描述:在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况。
出现原因分析:
笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。【有待考证】
解决办法:只需要在公共样式加入下面这行代码
*{
-webkit-overflow-scrolling: touch;
}
4、ios键盘唤起,键盘收起以后页面不归位
问题详情描述:
输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑。
出现原因分析:
固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件。
解决办法:
placeholder="请输入姓名"
v-model="peopleList.name"
@focus="changefocus()"
@blur.prevent="changeBlur()"/>
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
wind
ow.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 200)
}
}
5、安卓弹出的键盘遮盖文本框
问题详情描述:
安卓微信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);
}
}
微信H5页面兼容性问题分析及解决方法就暂时分享到这里了。相信大家在做微信H5页面的时候,还会遇到许多问题。想要更深入解决微信H5页面问题,欢迎大家登陆博学谷官网,在线学习相关的视频课程。
vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法相关推荐
- oxooooooof4蓝屏_常见电脑蓝屏代码分析与解决方法解析大全
每次电脑出现蓝屏,你是不是很头痛额? 自己看到那些像天文般的英文,是不是眼花缭乱? 呵呵,小编我今天汇总额一些常见的30个蓝屏代码,为您排忧解难!! 停止错误编号:OXOOOOOOOA 说明文字:IR ...
- 直接修改html文本页面没变化,VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析...
本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法.分享给大家供大家参考,具体如下: 业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面 ...
- 微信开发学习 问题1: 网页授权问题 “该连接无法访问” 解决方法
微信开发学习 问题1: 网页授权问题 "该连接无法访问" 解决方法 参考文章: (1)微信开发学习 问题1: 网页授权问题 "该连接无法访问" 解决方法 (2) ...
- 微信支付curl: (60) SSL certificate problem: unable to get local issuer certificate 解决方法
微信支付curl: (60) SSL certificate problem: unable to get local issuer certificate 解决方法 参考文章: (1)微信支付cur ...
- 计算机有些应用无法卸载,有些软件卸载不了怎么办_电脑软件卸载不了的正确解决方法...
电脑上安装一些日常使用软件,是再平常不过的了,但是有一些软件在使用后,却提示软件卸载不了,那么该如何解决呢?下面智能手机网分享一下电脑安装的软件无法卸载解决方法,如果你平时出现过软件无法卸载的情况,不 ...
- 计算机屏幕尺寸不是全屏,电脑屏幕有黑边撑不满怎么办_电脑屏幕不能全屏显示的解决方法...
电脑屏幕有黑边撑不满怎么办?平时在使用电脑时候,如果是新手,可能会出现显示屏不能全屏显示的问题,有些情况是分辨率的问题,调整一下就好了,但有时候调整了也没有用,那么该怎么办呢?下面智能手机网小编来具体 ...
- 计算机语言输入不见了,win7右下角的输入法图标不见_右下角的输入法没了_右下角的语言栏不见了的解决方法...
最近有很多同事说在工作中有时候电脑用着用着右下角的输入法图标却没有了,让人觉得很不习惯.对于这种情况要怎么把右下角的语言栏调出来呢?一般是重新启动一下电脑,但是大部分电脑重启了还是一样没有显示右下角的 ...
- 华为微信来消息不提示/不显示内容/没声音/不亮屏等解决方法
华为微信来消息不提示/不显示内容/没声音/不亮屏等解决方法,首先排除网络问题,再看设置问题,下面介绍这几个问题点对应的正确设置操作步骤: 一.手机这3个设置项是否正确? 1.确认系统已开启允许通知 方 ...
- vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录
本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分 ...
最新文章
- 编译报错一列----aclocal找不到
- 按键驱动的思路分析和代码实现
- ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤
- modem建链过程详述
- 为Mac OS X添加用Firefox搜索服务
- Linux二进制实用工具Binutils工具集解析()
- csdn怎样设置友情链接栏目
- pytorch学习笔记(十九):二维卷积层
- 最难的几道Java面试题,看看你跪在第几个?
- 如何得到DataTable的列名
- mysql 慢日志 逻辑读_学会读懂 MySql 的慢查询日志
- 头歌 Java IO 答案 增加章节java学习-Java输入输出之字节缓冲IO流之复制文件
- 经典与科技碰撞之美!CGU 2018九段卡皇耀世登场
- 分享一个自己做的记账的小程序 - 智能记账,欢迎朋友们体验
- 阿里云企业邮箱域名注册流程
- android 表情包下载,表情包制作pro
- 主板usb接口全部失灵_主板usb接口全部失灵
- 分数化成有限小数的方法_怎样把分数化成小数
- 网桥VLAN GROUP组
- IBM TS3100磁带机更换磁带的方法