前端開發總結

　　最近一直在寫移動端頁面，由於之前寫移動端寫的比較少，所以此次踩過許多坑。特此總結一下：　

　　1、<input type='button'>背景色在ios中的兼容性，顏色發白
　　　　解決辦法：在全局樣式中加入以下代碼：
　　　　input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

 

　　2、在vue中使用jquery weui中的地區選擇器時，通過點擊事件來初始化地區選擇器，第一次點擊無效，第二次點擊才觸發
　　　　解決辦法：在mounted生命周期中執行初始化事件，在onClose事件中調用另外一個函數以獲取選擇器選擇的值。這樣在其他地方就可以使用這個值了。

 

　　3、ios端按鈕和輸入框自帶圓角問題：
　　　　解決辦法：
　　　　-webkit-appearance : none ; /* 解決ios上按鈕的圓角問題 */
　　　　border-radius: 0; /* 解決ios上輸入框圓角問題 */

 

　　4、vue中點擊事件阻止冒泡：@click.stop

 

　　5、clipboard.js的使用：
　　　　按鈕觸發：按鈕我用的是div，pc端能正常使用，ios上失效（安卓不清楚，沒測過）。折騰好久，最后嘗試將div換成button按鈕后，pc、ios均正常

 

　　6、swiper輪播圖（4.x版本）時遇到的問題：
　　　　（1）、設置slider容器能夠同時顯示的slides數量：可以設置為數字（可為小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量
　　　　（2）、slide能夠根據慣性滑動：設置freeMode為true
　　　　（3）、設定初始化時激活slide的索引：設置initialSlide的值，默認為0
　　　　（4）、當slider容器中同時顯示多個slides時，讓激活的slides居中：設置centeredSlides為true
　　　　（5）、分頁器樣式設置：設置pagination對象的type屬性，當type值為bullets時，會以圓點顯示；當type值為fraction時，則會以分式形式顯示（形如：1/3、2/3、3/3等）；當type為progressBar時，則會以進度條形式顯示，即切換slide時，上方會顯示進度條
　　　　（6）、swiper默認顯示三個，中間顯示全部，兩邊顯示部分：設置如下：
　　　　　　spaceBetween: 10 // 表示每個slide間的間隔
　　　　　　slidesPerView：1.2 // 設置slider容器同時顯示slides的數量。
　　　　　　centeredSlides：true // 讓中間顯示的slides居中
　　　　（7）、swiper動態加載數據輪播滑動異常，也無法自動輪播（自動輪播的前提是要設置autoplay:true）：需要設置observer:true來啟動動態檢查器，這樣就可以自動自動輪播了，也能手動操作了，然而新的問題來了，手動滑動后，離開滑塊，無法繼續自動輪播，需要設置autoplay:{disableOnInteraction:false}現在就可以正常輪播了。如果想要循環輪播，則添加loop:true（此時新的bug出現了，就是輪播的時候跳過了第一張跟最后一張，目前還未解決）。

 

　　7、vue遮罩層阻止默認滾動事件（適用於遮罩層本身沒有滾動事件的，否則本身的滾動事件也會被阻止）：@touchmove.prevent

 

　　8、h5頁面點擊元素會出現灰色背景：body {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

 

　　9、發現頁面在ios上能正常上下滑動，而安卓上不行，pc端也不能滑動，但是通過鼠標滾動是可行的，這時候有可能是css文件中加入了touch-action:none導致的，這句代碼作用是阻止頁面滾動，將它去掉就好了。坑爹的，困擾我好久了。

 　　

　　10、ios上雙擊強制縮放問題：

　　　　解決辦法：*{touch-action: manipulation}   // 該方法還能移除整個文檔的觸發延遲，對於IE10，需要使用-ms-touch-action

 

　　11、vue圖片懶加載（vue-lazeload）,不能動態切換圖片（如，切換tab時，圖片無法動態改變）

　　　　解決辦法：為每個img標簽添加一個key屬性。<img v-lazy="imgUrl" :key="imgUrl">

　　

　　12、使用translate導致元素內字體模糊：

　　原因：translate中的參數為非整數。常見於translateX(百分比)、translateY(百分比), translate(百分比,百分比)。

　　解決辦法：因為translate中參數百分比其實是相對於操作元素本身的寬或高的百分比，所以可以調整所要操作的元素的寬或高，已達到百分比后的值是整數，這樣就能解決元素內字體模糊的問題

 

　　13、App嵌入h5頁面（使用vue）

　　問題：如果App端需要在頁面跳轉時攔截到跳轉路徑，使用vue的路由跳轉方法時，App端是攔截不到的，因為vue是單頁面應用，根本不存在頁面的跳轉。

　　解決方案：使用window.location.href方法跳轉（注：如果當前頁面使用window.location.href跳轉，且路徑中帶有查詢參數，在跳轉后的頁面中仍然可以使用this.$route.query來獲取查詢參數）

 

　　14、給復選框綁定事件。

　　如果需要給復選框綁定選中和取消事件，可以將checkbox用label包圍起來，給label綁定change事件，不要直接使用click事件，因為這樣獲取到checkbox的狀態是反的，換句話說他獲取的只是點擊瞬間checkbox的狀態，而不是改變后的狀態。

 

　　15、為元素添加多重圓角。

　　如：   

　　可這樣實現：box-shadow: 0 0 0 6px rgba(255,255,255,0.60), 0 0 0 13px rgba(255,255,255,0.10);

 

　　16、input在ios上存在重影邊框問題：

　　解決辦法：去掉默認樣式，上邊框的陰影，點擊時的蒙版　

input {
    outline: none;
    -webkit-appearance: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

　　17、判斷是否為微信瀏覽器：

function isWeiXin() {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
  } else {
      return false;
  }
}

 

　　18、判斷當前設備是哪種設備，如ios、安卓、移動端等等。

var browser = {
  versions: function () {
    var u = navigator.userAgent, app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, //IE內核                
      presto: u.indexOf('Presto') > -1, //opera內核                
      webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核                
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核                
      mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否為移動終端                
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端                
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器                
      iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否為iPhone或者QQHD瀏覽器                
      iPad: u.indexOf('iPad') > -1, //是否iPad                
      webApp: u.indexOf('Safari') == -1//是否web應該程序，沒有頭部與底部            
    };
  }()
}

　　如判斷是否是ios,只需要這樣使用：browser.versions.ios。如為true則為ios，否則不為ios

 

　　19、復制功能

　　方法1：html部分：

<!-- 此處可為任意標簽。 -->
<p id="input">自古評論出人才</p>

 

　　js部分：

function copyContent() {
  var copyDOM = document.querySelector('#input');  
  var range = document.createRange();  
　// 選中需要復制的節點
  range.selectNode(copyDOM);
　// 執行選中元素
  window.getSelection().addRange(range);
    var successful = document.execCommand('copy');  // 表示是否支持復制功能
  try {  
    var msg = successful 
    console.log('Copy email command was ' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }  
  window.getSelection().removeAllRanges();  // 移除選中元素
}

 

　　復制方法2：

　　此處需要使用input標簽。

<input type="text" value="hello" id="input">    // 如果是vue下，且內容動態改變的，則可以不用value，直接v-model即可

　　js部分：

var copyDOM = document.querySelector('#input');  
copyDOM.select();
document.execCommand('copy');
copyDOM.blur()

 

　　復制方法3（兼容ios端）：

// 選擇文本。createTextRange(setSelectionRange)是input方法
function selectText(textbox, startIndex, stopIndex) {
    if(textbox.createTextRange) {//ie
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart('character', startIndex);//起始光標
        range.moveEnd('character', stopIndex - startIndex);//結束光標
        range.select();//不兼容蘋果
    }else{//firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();
    }
}

 

　　點擊復制方法：

normalCopy () {
      var NumClip=document.getElementById("input");
      var NValue=NumClip.value;
      var valueLength = NValue.length;
      this.selectText(NumClip, 0, valueLength);
      if(document.execCommand('copy', false, null)){
          document.execCommand('copy', false, null)// 執行瀏覽器復制命令
          NumClip.blur()
          this.$toast('復制成功!')
      }else{
          NumClip.select(); // 選擇需要復制內容的對象
          document.execCommand("Copy"); // 執行瀏覽器復制命令
          this.$toast('復制成功!')
      }
}

 

 

　　20、h5頁面中判斷本地是否裝了某app，如有則打開，否則跳轉到指定鏈接。

function openApp (openUrl, callback) {
  //檢查app是否打開
  function checkOpen(cb){
      var _clickTime = +(new Date());
      function check(elsTime) {
          if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
              cb(1);
          } else {
              cb(0);
          }
      }
      //啟動間隔20ms運行的定時器，並檢測累計消耗時間是否超過3000ms，超過則結束
      var _count = 0, intHandle;
      intHandle = setInterval(function(){
          _count++;        
          var elsTime = +(new Date()) - _clickTime;
          if (_count>=100 || elsTime > 3000 ) {
              clearInterval(intHandle);
              check(elsTime);
          }
      }, 20);
  }
  //在iframe 中打開APP
  var ifr = document.createElement('iframe');
  ifr.src = openUrl;
  ifr.style.display = 'none';

  if (callback) {
    checkOpen(function(opened){
        callback && callback(opened);
    });
    // //客戶端檢測微信直接跳應用寶鏈接
    // var browser = BrowserInfo();
    // //使用微鏈接
    // var encodeUri = encodeURIComponent(openUrl);

    // if (browser.isWeixin) {
    //   window.location.href = '你的微鏈url&android_schema='+encodeUri;
    // }else{
    
    // }
  }
  document.body.appendChild(ifr);      
  setTimeout(function() {
      document.body.removeChild(ifr);
  }, 2000);  
}

　　用的時候只需像這樣（其中openUrl為需要打開app的鏈接，由app端提供，jumpUrl為需要跳轉的指定鏈接）：

openApp(openUrl, function (res) {
　　if (res == 0) {
　　　　window.location.href = jumpUrl
　　}
})

 

　　21、圓角邊框且顏色漸變

　　如果直接在指定元素上寫上顏色漸變、圓角等會發現圓角並沒有起作用。。。

　　其實可以這樣做，在需要實現圓角邊框且顏色漸變的元素（以下簡稱‘子元素’）的外層嵌套一層父元素。。為父元素注明寬度、高度、圓角（注意與子元素圓角一致）、漸變色（該漸變色為需要設置的邊框漸變色，如background:linear-gradient.....）、padding（padding的值表示邊框的像素）、還需要設置box-sizing的值為border-box。。。然后子元素設置寬、高、圓角、背景色設置為白色或者其他需要設置的顏色。。。。

　　大功告成。。。。

 

　　22、頁面使用了iframe，導致頁面多出了一塊空白空間。

　　解決辦法：給iframe設置如下樣式即可。

display:block;
width:0;
height:0;
border:none;

　　

　　23、將網站全部變成灰色的效果

　　給網頁根元素html標簽添加如下樣式：

html {
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: gray;
}

　　

　　24、在vue-cli中使用less：

　　（1）、安裝相關依賴，less、less-loader

npm install less less-loader --save-dev

　　然后就可以在項目中使用less了。之所以不用配置，是因為在webpack配置中有utils.js對css各種預處理語言進行了配置加載器。

　　有時候，會報這個錯誤：Module build failed: TypeError: loaderContext.getResolve is not a function。

　　這個錯誤一般都是由less-loader版本過高導致的，版本號可以在 package.json 中查看；

　　卸載原來的 npm uninstall less-loader --save-dev；

　　安裝指定版本，如: npm install less-loader@4.1.0 --save

　　重新編譯即可運行了。

 

　　25、繪制二維碼。

　　推薦qrcode.vue插件：

　　（1）、安裝 npm install --save qrcode.vue 或 yarn add qrcode.vue 

　　（2）、在需要繪制二維碼的組件里引入該插件，具體如下：　　　

<template>
    <div class="wrapper">
        <qrcode-vue :value="erURL" :size="size"></qrcode-vue>
    </div>
</template>

<script>
    import QrcodeVue from 'qrcode.vue'
    export default {
        components:{
          QrcodeVue,
        },
        data () {
            return {
                erURL: '',
　　　　　　　　　 size: 60

            }
        },
        mounted () {

        },
        methods: {

        }
    }
</script>

<style scoped>
    
</style>

 

　　26、快速完全刪除node_modules

　　（1）、安裝npm包rimraf npm install rimraf -g 

　　（2）、在cmd指令下，進入所需刪除的node_modules文件夾的位置，再輸入指令 rimraf node_modules 

 

　　27、構造函數、原型

　　

 

　　28、react生命周期圖解：

　　

　　　　

 

　　29、多行文本添加省略號：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

　　

　　30、讓元素能水平或垂直滾動的同時隱藏滾動條：

element::-webkit-scrollbar {
    display:none;
 }