H5踩坑记录

flex坑

//不会压缩。会保持原来的宽度(1rem)
.main{
  display：flex;
  flex-shrink: 0; 
  flex-wrap: wrap;  //元素换行
  .item{
    width:1rem;
  }
}

水平居中

使内容居中
.flex__container {
    place-content: center;
    place-items: center;
}
等效于
.flex__container {
    align-content: center;
    justify-content: center;

    align-items: center;
    justify-items: center;
}

利用Grid 实现水平居中

.grid {
    display: grid; // 或 inline-grid
    place-items: center
}

vue坑

vue组件

vue-awesome-picker 组件的使用
vue-awesome-swiper 组件的使用

vue引入坑

在axios中引入 import {app} from '../main'的时候
这个时候一定要记得把 new Vue ()
 export const app=new Vue()  导出去

局部刷新

<div class="customerdetails_tabs" v-if="isRouterAlive"></div>

export default {
    provide(){
        return{
            reload:this.reload
        }
    },
 data() {
      return {
         isRouterAlive:true,
       }
    },

    methods: {
      需要局部组件刷新的时候直接调用reload()方法就可以
        reload(){
             this.isRouterAlive=false;
             this.$nextTick(function(){
                 this.isRouterAlive=true;
             })
        }
   }
} 

vue与原生交互原理

vue和原生的交互都是挂载在window上，供外部调用

 mounted() {
    vue调用原生
    if (window.Android) {
      window.Android.gone(‘name1’，‘name2’); //按顺序传递给原生
    } else if (window.webkit) {
      window.webkit.messageHandlers.isButtonTouchEnabled.postMessage({
        isEnable: true
      });
    }
  vue创建方法供原生调用
 window.back = () => this.back(); 这个back()在methods中定义就行
  可以接收原生给H5传递的参数 ，按原生传递顺序接收，不是一个对象。
 window.refreshPage = conCode => this.callback(conCode);
  },

vue路由坑 路由跳转部分android 不能刷新的坑

hash路由 # 后面变化，但是不会刷新页面，当前页面不能更新
history模式和hash原理相同。

history刷新的时候，url中的参数会消失 怎么解决？用sessionStorage.setItem() 存储
其他的博主：https://blog.csdn.net/oZhangBi/article/details/79939969?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control

解决方法：
使用keep-alive

这样给路由绑定key，路由中的参数改变就会刷新页面，记住路由中的参数改变。可以加时间戳 ，以下代码缺一不可。路由跳转使用的push，没用replace
 <keep-alive>
    <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
    </keep-alive>

router/index.js

const routes=[
    {
        path:'/',
        name:'index',
        component:()=>import ('../views/index.vue'),
        meta:{
            title:'name',
            keepAlive:true
        },
    }
]
const router =new VueRouter({
    routes
})

index.vue

用这两个生命周期即可
mounted () {
 this.init()
},
 activated (){
  this.init()
}

开始试了很多，只绑定key不可以，还得用keep-alive ，不能不分使用，不分不使用，还得全部使用keep-alive。keep-alive有缓存，记得每次进入路由的时候要记得初始化。

vue监听只能输入数字

监听只能输入数字
<input v-model="testValue" @input="testValue = testValue.replace(/[^\d]/g,'')">

input model 需要循环绑定自定义对象属性的时候不监听，如下写,这样vue就可以监听到了。

this.$set('obj','key','value')

vue关掉eslint

module.exports={
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === 'production' './' : '/', //防止打包后index.Html空白
  publicPath: './',
}

vue方法参数传递坑

<div  v-for="(item,index) in  obj" :key="index">

    <input type="text"  v-model.trim="peiPeopleObj.name">
     <p @click="info(item)">
          内容
      </p>
      <ul>
            <li >item.name</li>
      </ul>
</div>
methods(){
//这种方式传递邦迪，相当于this.peiPeopleObj绑定的是 obj对象中的item 对象，这样input中的peiPeopleObj.name改变的时候,li中的item.name也会改变
    info(item){
      this.peiPeopleObj=item 
    }
}

如下这样写就不会有这种情况

<div  v-for="(item,index) in  obj" :key="index">

    <input type="text"  v-model.trim="peiPeopleObj.name">
     <p @click="info(item.namee,item.code)">
          内容
      </p>
      <ul>
            <li >item.name</li>
      </ul>
</div>
methods(){
//这种方式传递邦迪，相当于this.peiPeopleObj绑定的是 obj对象中的item 对象，这样input中的peiPeopleObj.name改变的时候,li中的item.name也会改变
    info(name,code){
      this.peiPeopleObj.name=name
      this.peiPeopleObj.code=code
    }
}

数组坑

数组的筛选方法  arr.filter(()=>{}) 

在数组中删除指定的值
var  arr = ['a', 'b', 'c', 'd'];

arr.splice($.inArray('a', arr), 1);

循环判断

const names=[]

for(const i of input){
 if(i.job==="programmer")
    names.push(i.name)
}

可转变成，集合管道

const names =input.filter(i=>i.job==="programmer").map(i=>i.name)

input file 坑

图片上传传给后台的格式需要new  FormData()
var  fromData=new FormData()
fromDdata.append('file',file)  //不是base64 

html android ,ios 都可以.如果不可以就找原生

android 原生的webview默认屏蔽了file自动调起相机，需要做处理。android可以换三方的webview即可，三方的webview应该是已经处理好了。

<input type="file" class="input" accept="image/*">  这么写即可

 <input
                          type="file"
                          accept="image/*"
                          @change="changeImg($event, index)"
                        />

vue

 methods{
      changeImg(e, index) {
      console.log(this.cancelList[index].imgList.length);
      if (this.cancelList[index].imgList.length == 3) {
        this.cancelList[index].hink = true;
        sessionStorage.setItem("cancelList", JSON.stringify(this.cancelList));
        this.reload();
        setTimeout(() => {
          this.cancelList[index].hink = false;
          sessionStorage.setItem("cancelList", JSON.stringify(this.cancelList));
          this.reload();
        }, 2000);
        return;
      }
      let input = e.target;
      let files = e.target.files;
      if (files && files[0]) {
        let file = files[0];
        if (
          file.type != "image/png" &&
          file.type != "image/jpg" &&
          file.type != "image/jpeg"
        ) {
          console.log("图片格式不正确");
          this.$toast.show("图片格式不正确");
          return;
        }

        // if (file.size > 1024 * 1024 * 3) {
        //   console.log("不得超多3M");
        //   input.value = "";
        //   return;
        // }
        if (!this.isIos) {
          this.uploadFile(file, index);
        } else {
          // this.uploadFileIos(file, index);
           this.uploadFile(file, index);
        }
      }
    },
    uploadFile(file, index) {
      var formData = new FormData();
      formData.append("picture", file);
      this.$http
        .post(
          "getUploadUrl",
          formData,
          { headers: { "Content-Type": "multipart/form-data" } }
        )
        .then(res => {
          console.log(res);
          if (res.code == 0) {
            this.cancelList[index].imgList.push(res.data.path);
            console.log(this.cancelList);
            //  sessionStorage.setItem("imgList", JSON.stringify(this.cancelList[index].imgList));
            sessionStorage.setItem(
              "cancelList",
              JSON.stringify(this.cancelList)
            );
            this.reload();
          }
        });
    },
}

后台需要json字符串的时候骚操作vue处理方式

 let params = {
          cameristId: this.accompanyStatus,
          surveyOrderId: sessionStorage.getItem("orderId"),
          userId: sessionStorage.getItem("userId"),
          compId: sessionStorage.getItem("compId")
        };
        let params1 = { param: JSON.stringify(params) };
this.$qs.stringify(params1)

H5页面嵌入原生中的ios坑

iosinput 键盘弹出之后收不回

问题的核心：input不失去焦点，所以需要手动，通过其他办法去触发失去焦点

原生可以解决。监听键盘的高度，如果高度大于0 ，说明唤起了键盘，如果在点击H5页面的时候，就让键盘消失。

H5的思路同，获取页面可见区域，然后键盘弹起的时候在获取可见区域，相减就是键盘的高度，然后添加完成按钮，使input失焦，键盘收回。 但我没有试验成功，获取的可见高度总是手机的总高度

解决问题的思路：

找bug原因的时候一定要想清楚，当前的所处环境。尽可能100%还原环境根本，或者直接抓到线上的url去测试，去找原因。不是直接本地去试问题，找问题。除非本地一下能发现问题的。当发现本地可以，线上不可以的时候，立即抓线上的链接地址，去查看问题

发现难搞的问题，怎么解决？
先分析问题的根本，确定问题源。然后认真阅读，相关的文档知识点。一定是丢掉了某个细节，

ios输入框被键盘遮挡的问题

ios键盘遮挡问题，当获取焦点的时候，整体向上移动310。this.$refs.cmdlist.scrollTop = 310
this.$refs.cmdlist.scrollTop = 100
this.$refs.cmdlist.style.top = 100+'px'

######## input 监听取消事件

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="jquery-3.6.0.min.js"></script>
  <title>input控件研究</title>
</head>
<body>
    <button>打开图片</button><br><img><input type="file">
  <script>
    var inpt = $('input').hide(), FLAG = 0;
    $("button").bind("click", function () {
      inpt.click();
      FLAG = 1;
    });
    inpt.change(function (e) {
      var files = e.target.files[0];
      if (files) {
        FLAG = 2;  //文件打开标志
        //reader 对象读取打开文件内容
        var reader = new FileReader();
        reader.readAsDataURL(files);
        reader.onload = function () {          
          $("img").attr({ "src": this.result, "height": "320px" });
          //若两次打开同一个文件，则change事件不会发生，故须清空
          inpt.val('');
        }
      }
    });
    $(window).focus(f => {
      setTimeout(e => {
        if (FLAG == 1) {
          FLAG = 0;
          console.log('取消');
        }
      }, 100);
    });
  </script>
</body>
</html>

ios textarea 点击空白，键盘不是去焦点()

那我就添加一个时事件点击空白失去焦点
      document.addEventListener('click',function(e){
        var sDom=e.target
        var box = document.getElementById('tex_input');
          if(sDom!=box){
           box.blur()
          }
        })