web前端開發中遇到的問題整理(一)

時間 2019-11-10

標籤 web 前端開發遇到問題整理欄目 HTML 简体版

原文原文鏈接

記錄開發過程當中遇到的問題及經過本身摸索或查閱網上的教程整理出的解決方案，若有不全或者錯誤歡迎留言更正javascript

1. 如何設置輸入框 input 中 placeholder的字體顏色、字號

input::-webkit-input-placeholder{
                  /*顏色*/
                color:#fff;
                 /* placeholder字體大小  */
                font-size: 12px;
                /* placeholder位置  */
                text-align: right;
            }
            input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                 /*顏色*/
                color:#fff;
                 /* placeholder字體大小  */
                font-size: 12px;
                /* placeholder位置  */
                text-align: right;
            }
            input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                  /*顏色*/
                color:#fff;
                 /* placeholder字體大小  */
                font-size: 12px;
                /* placeholder位置  */
                text-align: right;
            }
            input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                 /*顏色*/
                color:#fff;
                 /* placeholder字體大小  */
                font-size: 12px;
                /* placeholder位置  */
                text-align: right;
            }

2.js判斷jios仍是android

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
if(isAndroid){
      console.log('android)
}
if (isIOS) {
　//這個是ios操做系統
}

3.忽略eslint語法警告

若使整個文件範圍內禁止規則出現警，將/ eslint-disable /放置於文件最頂部html

/* eslint-disable */
alert('eslint');

若在文件中臨時禁止規則出現警告將須要忽略的代碼塊用註釋包裹起來java

/* eslint-disable */

alert('eslint');

/* eslint-enable */

4.在移動端查看console

因爲在移動端沒法打開控制檯,因此用vConsole 進行調試android

下載 vConsole 的最新版本，取出dist/vconsole.min.js放到本地

script引入<script src="path/vconsole.min.js" type="text/javascript"></script>
初始化var vConsole = new VConsole(); console.log('test')ios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <script src="./vconsole.min.js" type="text/javascript"></script>
</head>

<body>
    hahah
    <script>
        var vConsole = new VConsole();
        console.log('test')
       // 必定不要忘記初始化
    </script>
</body>

</html>

5.三元運算符的運用技巧

基本用法git

表達式 (expr1) ? (expr2) : (expr3)

在 expr1 求值爲 TRUE 時的值爲 expr2，在 expr1 求值爲 FALSE 時的值爲 expr3。

進階技巧點擊這裏github

6.wepy+weui搭建小程序框架

1.執行 wepy init wepyjs/wepy-weui-demo wepy-weui-demo命令建立項目
其中wepy-weui-demo是項目名web

$ wepy init wepyjs/wepy-weui-demo wepy-weui-demo

   wepy-cli · Generated "wepy-weui-demo".

2.項目建立成功後cd 進入項目目錄，執行npm install安裝依賴包npm

$ cd wepy-weui-demo

$ npm install
.........
npm WARN wepy-weui-demo@1.0.0 No repository field.

added 621 packages in 116.675s

3.開啓實時編譯，wepy build --watch
##執行wepy build --watch可能會有報錯
以下json

$ wepy build --watch
{ Error: Cannot find module 'less'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
............
[WARNING] 找不到編譯器：wepy-compiler-less。
[14:23:47] [信息] 檢測到有效NPM包資源，正在嘗試安裝，請稍等。
npm WARN eslint-config-standard@7.1.0 requires a peer of eslint-plugin-promise@>=3.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN wepy-compiler-less@1.3.14 requires a peer of less@^3.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN wepy-weui-demo@1.0.0 No repository field.

+ wepy-compiler-less@1.3.14
updated 1 package in 3.746s
[14:23:52] [完成] 已完成安裝 wepy-compiler-less，從新啓動編譯。
[14:23:52] [編譯] 入口: src\app.wpy
[14:23:53] [寫入] JSON: dist\app.json
{ Error: Cannot find module 'less'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
 ......................
    at Array.forEach (<anonymous>) code: 'MODULE_NOT_FOUND' }
[WARNING] 找不到編譯器：wepy-compiler-less。
[Error] 未發現相關 less 編譯器配置，請檢查wepy.config.js文

解決方法
運行以下命令

npm install less --save

從新執行wepy build --watch便可

其中生成的 dist 文件夾就是小程序的內容。
能夠打開微信開發者工具，新建項目，項目目錄就是dist文件夾。
能夠看到項目的初始化內容。
在小程序運行時，調試器中可能會有報錯，不要慌張
在微信開發者工具中找到設置》項目設置將

ES6 轉 ES5
上傳代碼時樣式自動補全
代碼上傳時自動壓縮

三個選項的打鉤去掉

7.idea 項目設置前臺html修改後當即生效

步驟太多了就不寫了，給個傳送門，要的自取

8.CSS控制文字，超出部分顯示省略號

單行文本的溢出顯示省略號

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出顯示省略號

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

9.清除定時器的方法

var t1=window.setTimeout(refreshCount, 1000 * 5);
    function refreshCount() {
      console.log("ready");
    }
    //去掉定時器的方法  
    window.clearTimeout(t1);

定時器是個很佔內存的傢伙，用完必定要記得清除，不然可能會形成內存泄漏

10.html中使用base64格式圖片

首先將須要用到的圖片轉碼成base64格式，以後引入以下代碼

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU...........>

其中data:image/png;base64,iVBORw0KGgoA.....就是轉碼以後base64
將圖片轉化爲base64編碼格式，網站有不少可自行百度

11.npm源碼

npm

12.安裝指定版本的ionic

更新命令
npm update -g cordova ionic


安裝特定版本
npm install -g ionic cordova@5.0.0
npm install -g ionic@1.6.5


刪除命令
npm uninstall cordova -g
npm uninstall ionic -g

13.獲取url 中的參數

假設當前頁完整地址是：http://localhost:61768/Home/Index?id=2&age=18

var search = window.location.search;
var age = getSearchString('age', search); //結果：18
var id = getSearchString('id', search); //結果：2
//key(須要檢索的鍵） url（傳入的須要分割的url地址，例：?id=2&age=18）
function getSearchString(key, Url) {
    var str = Url;
    str = str.substring(1, str.length); // 獲取URL中?以後的字符（去掉第一位的問號）
    // 以&分隔字符串，得到相似name=xiaoli這樣的元素數組
    var arr = str.split("&");
    var obj = new Object();

    // 將每個數組元素以=分隔並賦給obj對象 
    for (var i = 0; i < arr.length; i++) {
        var tmp_arr = arr[i].split("=");
        obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
    }
    return obj[key];
}

其餘詳細操做點擊傳送門

14.js中的邏輯運算符 || &&

一、JS中的||符號：

運算方法：

只要「||」前面爲false,無論「||」後面是true仍是false，都返回「||」後面的值。

 只要「||」前面爲true,無論「||」後面是true仍是false，都返回「||」前面的值。

總結：真前假後

二、JS中的&&符號：

運算方法：

只要「&&」前面是false，不管「&&」後面是true仍是false，結果都將返「&&」前面的值;

 只要「&&」前面是true，不管「&&」後面是true仍是false，結果都將返「&&」後面的值;

總結：假前真後

弄懂了以上說的還應該知道：

在js邏輯運算中，0、" "、null、false、undefined、NaN都會判爲false，其餘都爲true。

記錄開發過程當中遇到的問題及解決方案，若有不全或者錯誤歡迎留言更正持續整理更新正........

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。