欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

PS：此文章只談自己對開發過程中的思考，不談計算問題。

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

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

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

二維碼二維數組的生成，我是直接復制qrcode.js的代碼。因為覺得這本身成熟了，沒必要從頭再來，我關注的是自己需要解決的應用痛點。即“易用”和“美觀”。

組件的使用很簡單，對value屬性進行賦值，就是對二維碼內容進行修改。

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

二維碼的組成

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

關于二維碼美化

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

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

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

二維碼美化效果

你根據需要調整其他屬性，如糾錯等級、添加背景圖片、前景圖片、logo、懸浮文本等，以滿足個性化的需求。

【倉庫地址】https://github.com/mumuy/widget-qrcode/

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

轉自https://juejin.cn/post/7455999467525210139