vue h5键盘弹起或收起导致页面变形

Question

vue开发的 h5项目在安卓手机打开时键盘弹起或收起瞬间会导致页面被压缩 键盘弹出后就又会恢复正常了。这是什么原因造成的？

Answer 1

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7589082
• 这篇博客也不错, 你可以看下解决ios手机vue H5页面输入键盘收起后页面回弹到顶部问题
• 您还可以看一下 汤小洋老师的全新Vue3.0全家桶 零基础入门到项目实战课程中的 用户信息管理_5小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue 移动端H5微信支付和支付宝支付中的 一、移动端微信支付，vue中如何玩？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  在移动端微信支付分为微信内支付和微信外支付。
  1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：

  //判断是否微信
          is_weixn(){
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger'){
              return true;
            } else {
              return false;
            }
          },
  

  2.触发立即支付方法，根据微信内外的不同请求后端不同的接口，如果是微信外支付非常简单了~
  3.【微信外支付】下面先看微信外支付，

  官方文档也写的很清楚，后端返回一个url地址，前端的工作就是拿到这个url地址进行跳转就可以了，看一下2-3步代码：

   handelPay() {
            if(this.wechatpayType == 'wxpay'){
             // console.log("微信内支付")
              let data={
                amount:this.number,
              }
              this.$http.insideWeChatPay(data).then( res => {
                if(res.data.code === 200){
                  this.weChatParameter=res.data.data
                 // console.log(this.weChatParameter,"微信内支付需要参数")
                  this.weixinPay()
                }else{
                  Toast({
                    message: res.data.msg,
                    position: 'middle',
                    duration: 1000
                  });
                }
              });
            } else if(this.wechatpayType == 'wxpay_php'){
             // console.log("微信外支付")
              let data={
                amount:this.number,
              }
              this.$http.outsideWeChatPay(data).then( res => {
                if(res.data.code === 200){
                  let url=res.data.data
                  window.location.replace(url)   //这里是后端返回的URL直接进行跳转即可完成微信外支付
                }else{
                  Toast({
                    message: res.data.msg,
                    position: 'middle',
                    duration: 1000
                  });
                }
              });
            }
          },
  

  4.在调起支付的页面监听从其他页面返回的事件，进行一些刷新业务逻辑的实现即可，至此微信外支付已经完成。

  document.addEventListener("visibilitychange", function() {
      //需要的操作
  });
  

  5.【微信内支付】微信内支付比起微信外支付稍微复杂一点，但是也不难，（3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数）根据官方API
  微信内置js对象 WeixinJSBridge，进行开发，至此微信浏览器内支付已经完成

  		 //解决微信内置对象报错
          weixinPay(data){
            var vm= this;
            if (typeof WeixinJSBridge == "undefined"){
              if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
              }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
                document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
              }
            }else{
              vm.onBridgeReady();
            }
          },
          //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
          onBridgeReady(){
            var  vm = this;
            var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest',{
                debug:true,
                "appId":vm.weChatParameter.appId,     //公众号名称，由商户传入
                "timeStamp":timestamp, //时间戳，自1970年以来的秒数
                "nonceStr":vm.weChatParameter.nonceStr, //随机串
                "package":vm.weChatParameter.package,
                "signType":vm.weChatParameter.signType, //微信签名方式：
                "paySign":vm.weChatParameter.paySign, //微信签名
                jsApiList: [
                  'chooseWXPay'
                ]
              },
              function(res){
                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                  Toast({
                    message: '支付成功',
                    position: 'middle',
                    duration: 3000
                  });
                  vm.number=null
                  vm.$router.go(-1)
                  //window.location.href = vm.BASE_URL + 'index.html#/depositResult'
                }else{
                  Toast({
                    message: '支付失败',
                    position: 'middle',
                    duration: 3000
                  });
                }
              }
            );
          },
  

  6.微信内部浏览器支付也可以封装一下，在全局都可以直接调用：

  
  //微信浏览器支付
  function wxpay(params,callback){
    if (typeof WeixinJSBridge == "undefined"){
       if( document.addEventListener ){
           document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);
       }else if (document.attachEvent){
           document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback)); 
           document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));
       }
    }else{
       onBridgeReady(params,callback);
    } 
  }
  
  function onBridgeReady(params,callback){
      var that = this
     WeixinJSBridge.invoke(
         'getBrandWCPayRequest', {
             "appId":params.appId,          
             "timeStamp":params.timeStamp,         
             "nonceStr":params.nonceStr, 
             "package":params.package,     
             "signType":params.signType, 
             "paySign":params.paySign 
         },
         function(res){  
            callback(res)
         }
     ); 
    }
  

  7.组件中调用微信支付：

  this.commonUtils.wxpay(res.data.data,function(payResult){
   	if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
  			//执行
       	} 
  })
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^