日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

PS：此文章只談自己對(duì)開發(fā)過程中的思考，不談?dòng)?jì)算問題。

不知道你們有沒有遇到過這種情況：在開發(fā)網(wǎng)站時(shí)有時(shí)候需要向用戶展示二維碼，但是市面上的二維碼插件一般都是JS調(diào)用，需要自己對(duì)他初始化。有時(shí)候在業(yè)務(wù)場(chǎng)景中，用戶可能關(guān)閉彈出層或者超時(shí)需要重新渲染二維碼，還有時(shí)候一個(gè)網(wǎng)頁需要同時(shí)展示多個(gè)二維碼。這就讓這種調(diào)用方式十分笨拙。因?yàn)槎S碼算法可能只是提供二維數(shù)組信息或者只是初始化成簡(jiǎn)單的黑白兩色。這樣的方式不方便又不美觀。

于是我就在想，能不能像引用圖片一樣簡(jiǎn)單呢？只需要改變圖片地址，用戶看到的效果就是一張全新的二維碼圖片！改屬性就是改二維碼內(nèi)容，開發(fā)人員布局這個(gè)元素和正常圖片無異，CSS可以直接控制它的寬高。

我想，現(xiàn)在的前端開發(fā)早就走向組件化了，那么這個(gè)二維碼一定需要以Web組件的形式使用。而現(xiàn)在各種前端框架橫行，React、Vue等等，我想既然做了，不能只針對(duì)一個(gè)框架寫。同時(shí)這個(gè)組件本身不復(fù)雜，一個(gè)文件引用足矣。于是，我選定了Web Components這款，讓瀏覽器原生支持它，就開始了開發(fā)<widget-qrcode>這個(gè)組件。

二維碼二維數(shù)組的生成，我是直接復(fù)制qrcode.js的代碼。因?yàn)橛X得這本身成熟了，沒必要從頭再來，我關(guān)注的是自己需要解決的應(yīng)用痛點(diǎn)。即“易用”和“美觀”。

組件的使用很簡(jiǎn)單，對(duì)value屬性進(jìn)行賦值，就是對(duì)二維碼內(nèi)容進(jìn)行修改。

<widget-qrcode value="https://passer-by.com/"></widget-code>

二維碼的組成

為了介紹二維碼組件的使用，需要額外提到二維碼的組成。它包括了內(nèi)容區(qū)和碼眼。碼眼的作用在于對(duì)二維碼進(jìn)行定位判定，否則，當(dāng)一張二維碼圖片隨意翻轉(zhuǎn)的時(shí)候，程序無法分清上下左右。而內(nèi)容區(qū)，就是你輸入的內(nèi)容通過復(fù)雜的計(jì)算用黑白形式編碼出來的，里面包含了校驗(yàn)容錯(cuò)部分。黑白的明暗變化（即前景色和背景色），對(duì)于解碼程序來說就是信息。也就是說，我們做出來的二維碼并不需要拘泥于黑白兩色和方形的外觀，同時(shí)還可以有一定面積的信息遮擋。

關(guān)于二維碼美化

要對(duì)二維碼進(jìn)行美化，就需要可以對(duì)前景色和背景色進(jìn)行自定義設(shè)置。既然是美化，配色不能再只有兩種了吧？就像之前說的，對(duì)于二維碼解碼程序來說，顏色只有深淺之分，解碼程序會(huì)自己對(duì)二維碼進(jìn)行去色再二值化處理。那么，讓用戶可以自行設(shè)置多種顏色就是必須的啦。

同時(shí)為了保證多樣化，需要對(duì)二維碼外形進(jìn)行變化。同時(shí)如果過于開放又沒法保證它"易用性"的定位，我不想讓自己做的這個(gè)組件因?yàn)樗y用而沒人愛用。于是，我把對(duì)外形的控制設(shè)定為模板，用戶只需要用我提供的幾個(gè)模板即可。

為了保證內(nèi)容的豐富，提高二維碼的識(shí)別度，很多人會(huì)在二維碼上部添加品牌logo。這樣能在二維碼上添加圖片和文字就是必不可少的了！同時(shí)，文字還有自己的顏色可以配合二維碼的配色。

二維碼美化效果

你根據(jù)需要調(diào)整其他屬性，如糾錯(cuò)等級(jí)、添加背景圖片、前景圖片、logo、懸浮文本等，以滿足個(gè)性化的需求。

【倉(cāng)庫(kù)地址】https://github.com/mumuy/widget-qrcode/

【演示地址】https://passer-by.com/widget-qrcode/?

轉(zhuǎn)自https://juejin.cn/post/7455999467525210139