20%的工作匯報將決定你80%的工作效率和工作成果。

前言

雖然之前有好幾次技術分享，但是真正的項目復盤還是第一次做，從業務到技術，全方面的梳理。從不同的開發視角去刨析業務和技術。

傳統項目開發，后端開發人員常考慮的是「 我需要幾張表，怎么設計表結構，提供幾個接口等等」。而前端開發人員常考慮的是「?頁面怎么布局，我需要多少接口，怎么與其他模塊銜接等等」。視角不一樣，對業務的理解還是有些區別。

今天主要分享和記錄一下項目中遇到的bug和容易忽略的技術點。有「 referrer防盜鏈、iphoneX底部黑條遮擋、scrollIntoView、圖片壓縮、webview加載url漢字轉碼、max-width設置最大寬度失效?」等。

max-width失效

一般情況下，我們展示變化的文本有兩種可能性：

• 輸入框輸入

• 接口返回

以上兩種方式都是我們無法預測的。一般情況下，我們傳統的觀念中認為，只要超出指定寬度，文本是自動換行的，比如設置max-width。但其實是不對的，容易忽略的小細節就是，如果文本是數字和字母組成，max-width將會失效。

<style>

.ad{

????max-width: 20px;

}

style>

//不會自動換行

<div class="ad">12123hdfghdfgfhgdfghd合gfhfhgfhdfh好div>

//會自動換行

<div class="ad">桑吉內蒂就是奶粉接口放假div>

這個時候三個屬性登場了：

• white-space:nowrap?用來控制空白字符的顯示，nowrap強制不換行，直接忽略max-width。

• word-break:break-all?控制單詞如何被拆分換行的，break-all 所有單詞碰到邊界一律拆分換行。

• word-wrap:break-word 又叫做overflow-wrap，這個屬性也是控制單詞如何被拆分換行的，實際上是作為word-break的互補，它只有兩個值：normal | break-word，只有當一個單詞一整行都顯示不下時，才會拆分換行該單詞。

多行顯示，溢出顯示省略號

如果只在chrome瀏覽器或者微信瀏覽器中使用，可以：

{

??/* W3C */

??display:box;

??box-orient:vertical;

??/* Firefox */

??display:-moz-box;

??-moz-box-orient:vertical;

??/* Safari、Opera 以及 Chrome */

??display:-webkit-box;

??-webkit-box-orient:vertical;

??-webkit-line-clamp: 3;

??overflow: hidden;

??word-break:break-all;

??white-space:nowrap

????/*IE 不支持 box-orient 屬性。*/

}

使用這幾條css屬性不兼容火狐和IE 所以采用插件的形式clamp.js。

line-clamp控制文本行數。box-orient 屬性規定框的子元素應該被水平或垂直排列。

webview加載url，遇漢字需轉碼

當我們在百度輸入漢字查詢的時候，觀察url會發現有漢字直接拼接在url上，當然相對于瀏覽器來說這沒有什么大不了，但是在webview中，如果我們想要加載一個帶漢字的url，此url將會無法被識別。所以我們需要轉碼，瀏覽器提供了encodeURIComponent() 函數對url參數進行轉碼。encodeURI()著眼于對整個URL進行編碼，特殊含義的符號"; / ? : @ & = + $ , #“不進行編碼，與之相對應的是decodeURI。
encodeURIComponent()對URL的組成部分進行個別編碼，所以”; / ? : @ & = + $ , #"在這里是可以進行編碼。與之相對應帶的是decodeuricomponent。

圖片壓縮

圖片體積太大，加載慢會嚴重影響用戶體驗。所以圖片壓縮是必然的。圖片壓縮的流程是：本地上傳file文件==>轉成base64格式=>動態創建img標簽=>在img的onload方法中創建canvas=>canvas繪制=>通過canvas.toDataURL轉化為base64但當圖片體積太大的時候，img.onload方法將不會被觸發，而是直接觸發onerror方法，猜測可能的原因是圖片體積過大會導致base64字串過長，使得瀏覽器不能完全獲取。所以我們需要判斷圖片體積大小。

/**

* 獲取base64大小

* @param{*}base64url

*/

function getImgSize(base64url) {

//獲取base64圖片大小，返回KB數字

let str = base64url.replace("data:image/jpeg;base64,", ""); //這里根據自己上傳圖片的格式進行相應修改

let strLength = str.length;

let fileLength = parseInt(strLength - (strLength / 8) * 2);

// 由字節轉換為KB

let size = "";

size = (fileLength / 1024).toFixed(2);

return parseInt(size);

}

我們還需要把本地圖片文件轉化成為base64。

/**

* 圖片轉base64

* @param{*}file

* @param{*}obj

* @param{*}callback

*/

function photoCompress(file, obj, callback) {

const ready = new FileReader();

ready.readAsDataURL(file);

ready.onload = function () {

const re = this.result;

if (getImgSize(re) / 1024 > 4) {

Modal.alert("", "上傳圖片不超過4M", [{

text: "確定",

style: {

color: "#868894",

}

}]);

callback(null);

return null;

}

canvasDataURL(re, obj, callback);

};

}

壓縮圖片

/**

* 壓縮圖片

* @param{*}re //base64

* @param{*}obj //option

* @param{*}callback

*/

function canvasDataURL(re, obj, callback) {

const img = new Image();

img.onload = function () {

let that = this;

let w = that.width / 4,

h = that.height / 4,

scale = w / h;

w = obj.width || w;

h = obj.height || w / scale;

let quality = 0.7;

let canvas = document.createElement("canvas");

let ctx = canvas.getContext("2d");

const anw = document.createAttribute("width");

anw.nodeValue = w;

const anh = document.createAttribute("height");

anh.nodeValue = h;

canvas.setAttributeNode(anw);

canvas.setAttributeNode(anh);

canvas.clearRect(0, 0, w, h)

ctx.drawImage(that, 0, 0, w, h);

// 圖像質量

if (obj.quality && obj.quality <= 1 && obj.quality > 0) {

quality = obj.quality;

}

// quality值越小，所繪制出的圖像越模糊

const base64 = canvas.toDataURL("image/jpeg", quality);

// 回調函數返回base64的值

callback(base64);

};

img.onerror = (err) => {

//如果圖片過大，就會直接走err方法

Modal.alert("圖片太大，請重新上傳");

console.log(err);

};

img.src = re;

}

iphoneX底部黑條適配

一般情況下收集瀏覽器已經處理了iphonx頂部(劉海)和底部對頁面的影響，但是在微信瀏覽器中可能會出現系統底部黑條對移動頁面輸出框或底部橫向滾動條的影響。官方給的解決方案是

<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>

//不會自動換行

@supports (bottom: env(safe-area-inset-bottom)) {

????.footer_view {

????????padding-bottom: env(safe-area-inset-bottom);

????}

}

viewport-fit:cover表示網頁內容全面覆蓋手機顯示屏。ios11 增加新特性，添加了4個css函數，四個預定義變量為設定安全區域和邊界的距離，如下:

• safe-area-inset-left：安全區域距離左邊邊界距離

• safe-area-inset-right：安全區域距離右邊邊界距離

• safe-area-inset-top：安全區域距離頂部邊界距離;在劉海全屏的時候 top 為 44px

• safe-area-inset-bottom：安全區域距離底部邊界距離;劉海全屏的條件下是 34px。

css 函數 env和 constant只有在 webkit 內核下才支持，env必須在 ios >= 11.2 才支持，constant必須 ios < 11.2 支持。

env 和 constant 只有在 viewport-fit=cover 時候才能生效。

referrer防盜鏈

當我們加載網絡圖片的時候，常常會遇到403。我同通常的解決辦法是在head標簽里，添加meta。

<meta name="referrer" content="no-referrer"/>

這不是一個好的解決方案，可能產生對網絡請求有影響。所以針對img標簽，我們可以單獨處理。referrer表示網站來路，它是一個Dom屬性，通過Dom設置來影響請求，它可以在兩個地方設置：

• head里meta標簽

• img、a、link、iframe等標簽屬性

如果遇到img403，我們可以這樣處理

<img referrer="no-referrer" alt="" />

referrer的默認策略是no-referrer-when-downgrade，在同等安全等級下(例如https頁面請求https地址)，發送referer，但當請求方低于發送方(例如https頁面請求http地址)，不發送referer origin。需要注意的一點是Fetch支持referrer的更改，

let promise = fetch(url, {

????method: "GET", // POST，PUT，DELETE，等。

????headers: {

????????// 內容類型 header 值通常是自動設置的

????????// 取決于 request body

????????"Content-Type": "text/plain;charset=UTF-8"

????},

????body: undefined // string，FormData，Blob，BufferSource，或 URLSearchParams

????referrer: "about:client", // 或 "" 以不發送 Referer header，

????// 或者是當前源的 url

????referrerPolicy: "no-referrer-when-downgrade", // no-referrer，origin，same-origin...

????mode: "cors", // same-origin，no-cors

????credentials: "same-origin", // omit，include

????cache: "default", // no-store，reload，no-cache，force-cache，或 only-if-cached

????redirect: "follow", // manual，error

????integrity: "", // 一個 hash，像 "sha256-abcdef1234567890"

????keepalive: false, // true

????signal: undefined, // AbortController 來中止請求

????window: window // null

});

referer?選項允許設置在當前域的任何?Referer，或者移除它。referrerPolicy?選項為?Referer?設置一般的規則。一般請求分為3種請求：

• 同源請求。

• 跨域請求。

• 從 HTTPS 到 HTTP 的請求 (從安全協議到不安全協議)。

與?referrer?選項允許設置確切的?Referer?值不同，referrerPolicy?告訴瀏覽器針對各個請求類型的一般的規則。

scrollIntoView

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。它接受兩種類型的參數：

• 布爾值

• 對象

//窗口滾動之后會讓調動元素頂部和視窗頂部盡可能齊平,

//相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數的默認值。

element.scrollIntoView(true)

//窗口滾動之后會讓調動元素頂部和視窗底部盡可能齊平

//相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

element.scrollIntoView(false)

element.scrollIntoView({

????//定義動畫過渡效果

????behavior:"auto" ?| "instant" | "smooth",

????//定義垂直方向的對齊，默認start

????block:"start" | "end" | "center" | "nearest",

????//定義水平方向的對齊，默認nearest

????inline:"start" | "end"| "center" | "nearest",

})

總結

以上是生活随笔為你收集整理的scanner一次输入多行_记一次项目复盘，技术盘点（易忽略的细节）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。