踩坑记

最新推荐文章于 2023-06-11 00:36:42 发布

weixin_43743956

最新推荐文章于 2023-06-11 00:36:42 发布

阅读量352

点赞数

分类专栏：个人踩坑文章标签：移动端踩坑

本文链接：https://blog.csdn.net/weixin_43743956/article/details/84680012

版权

个人踩坑专栏收录该内容

6 篇文章 0 订阅

订阅专栏

刚入行前端才3个星期，踩坑无数······，遂写下来，供自己作参考用。

better-scroll插件和vant插件的picker用冲突。
因为bs会为bs实例内的第一个标签加上transform的属性。而vant的picker是用position：fixed定位的。做项目时，发现不论怎么修改，picker的位置都会不对。网上查得，因为transform与position的坐标系不同，导致postion：fixed降级，效果变为position：absolute。
尝试动态删除transform的属性，picker虽然能正确显示在相应的位置，但是选项的定位不正确，选择选项时，那一列的选项会跳动。一番修改，还是不能搞定。遂放弃用better-scroll.
用better-scroll的原因是在移动端页面卡顿。又一番查资料后发现body,html{width: 100%;height:100%} 会导致在ios端卡顿。把body,html{height: 100%;}删去即可(就算把height：100v和也会卡顿)。方法二：利用ios 特有属性 -webkit-overflow-scrolling : touch（但这个有个缺陷是设置了这个属性，这个标签内 position：fixed的元素会跟随滑动，直到滑动结束才固定指定的位置）
解决方案，只能把positon：fixed的标签与之分离。

3.px2rem配置方法 https://blog.csdn.net/qq_29484537/article/details/77977877
3.1 vue-cli + lib-flexible + px2rem实现px自动转化为rem
https://blog.csdn.net/xiaoyao9524/article/details/79374446

4.解决mpvue + vuex 开发微信小程序，vuex辅助函数mapState、mapGetters不可用问题
https://blog.csdn.net/wp_boom/article/details/79741052

5.小程序：跳转的五种方法
https://www.jianshu.com/p/3cf406201974

6.WebSocket详解
https://www.cnblogs.com/fuqiang88/p/5956363.html

7.通过Jquery判断页面元素是否在浏览器的可视区域内
https://blog.csdn.net/huileiforever/article/details/38872411

8.用clipboard.js实现点击进行剪切文字的功能
https://segmentfault.com/a/1190000013746618

9.vue中用watch进行深度监听
在这里插入图片描述

10.swiper插件，在vue中使用，在微信开发者工具中会卡顿，在真机上不会。在chrome上调试也不会，这锅是微信开发者工具背。并且监听touchstart和touchend事件有bug，只能监听到一个事件。用vant的swipe代替。

11.在vue中用vue-touch来监听滑动事件
github：https://github.com/vuejs/vue-touch/tree/next
（1）npm install vue-touch@next --save
（2）在main.js 中引入：

import VueTouch from 'vue-touch'     
   Vue.use(VueTouch, {name: 'v-touch'})   
      VueTouch.config.swipe = {             threshold: 100 //手指左右滑动距离        }

（3）在要使用的页面中写：

<v-touch
      v-on:panstart="onPanStart"
      v-on:panend="onPanEnd"
      v-bind:pan-options="{ direction: 'horizontal', threshold: 100 }">
        {{content.books_chapter_info.content}}
    </v-touch>

注释：使用左右滑动之后，发现不能上下滑动了，这是因为vue-touch 默认禁止了用户的手势操作，注意组件上有个css属性：touch-action: none；

把这个属性覆盖一下就好了，如： touch-action: pan-y!important;

也可以如v-bind:pan-options="{ direction: 'horizontal', threshold: 100 }"来允许上下滑动

注意的是direction: ‘horizontal’，虽然能允许上下滑动了，但是上下滑动的panend不能监听到。要监听那么就改为direction:‘vertical’,当然改为vertical之后不能监听左右滑动的panend了

12.HTTP请求中 request payload 和 formData 区别https://www.cnblogs.com/tugenhua0707/p/8975615.html

13.在笔记本上，win10系统，默认缩放为125%，在微信开发者工具中，会出现点击偏移，就是点击了没有效果。而chrome不会出现。没有最好的解决方法，只能把缩放改为100%

14.在微信H5页面中，ios端，一旦产生路由的历史纪录，浏览器就会出现一个白色的前进后退按钮，如果要一页面展示内容，会占一定的位置，不能一屏显示全部内容
在这里插入图片描述
于是用this.$router.replace或者<router-link :to="{name:'xxxx'} replace">来跳转即可
当然在普通的页面可以用window.location.replace('xxx')也可以实现
参考链接：https://blog.csdn.net/dya110699/article/details/84652787

15.背景音乐自动播放（微信浏览器内才能自动播放，chrome和safari不支持）

<audio src="http://file.rzkeji.com/web/f6/game/back_music.mp3"  id="player1" loop='true' preload="preload"></audio>

 function audioAutoPlay(id){//自动播放
    var audio1 = document.getElementById(id),
        play = function(){
        audio1.play();
        document.removeEventListener("touchstart",play, false);
    };
    audio1.play();
    document.addEventListener("WeixinJSBridgeReady", function () {//微信
       play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {//易信
              play();
        }, false);
    document.addEventListener("touchstart",play, false);
}
 audioAutoPlay('player1');

16.canvas 画图空白
在这里插入图片描述

17.ES5继承

在这里插入图片描述

18.vscode 中的live server插件当文件夹带有_，下划线，就无法找到xxx.html文件
在这里插入图片描述

19.微信ios清除浏览器缓存推出微信重新登陆即可

20.安卓部分手机window.location.reload()失效；
处理方法用window.location.href来代替，并且添加时间戳；防止缓存

		var href = location.href;
          var hasQuery = href.indexOf('?') > 0;
             href = href 
                 + (hasQuery ? '&' : '?') 
                 + 't=' + (new Date().getTime());
             location.href = href;

21.避免服务器缓存js，css文件。


    <script>
    document.write('<link rel="stylesheet" href="./animate.css?time='+new Date()+'">');
	document.write("<script type='text/javascript' src='./build/game.js?v=" + Date.now() + "'><\/script>");
</script>

来自：https://blog.csdn.net/lllo3o/article/details/78292663

22.在小程序的web-view里使用微信的JS-SDK，步骤整理，以及遇到的坑
来自：https://blog.csdn.net/cslp517/article/details/81178657

在这里插入图片描述

公众平台配置得域名，前2个对应前端weibview和api接口等的域名，记住是前端的！

23.sync修饰符
注：this.val值有变化时，父组件才能监听到

<template>
    <input type="text" v-model="val" @input="iptInput">
</template>

<script>
    export default {
        name: "syncAndUpdate",
        props: {
            value: String
        },
        data(){
            return {
                val: this.value    // 关联值
            }
        },
        methods: {
            iptInput(){
                // 通过触发update:value 触发事件，将值传给父组件
                this.$emit('update:value', this.val)
            }
        }
    }
</script>
<!-- 使用 -->
<sync-and-update :value.sync="thirdValue"></sync-and-update>