国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

【Copy攻城獅日志】踩坑小程序之使用svg作為圖標(biāo)

Miracle_lihb / 510人閱讀

摘要:可以使用網(wǎng)絡(luò)圖片,或者,或者使用標(biāo)簽。這個(gè)是常識(shí),連入門(mén)級(jí)小程序員都知道的。那我究竟寫(xiě)了個(gè)什么毫無(wú)疑問(wèn),一定是在中直接引用了本地圖片。雖然可以將圖標(biāo)轉(zhuǎn)化為字體應(yīng)用,但對(duì)于我來(lái)說(shuō),就使用那么幾個(gè)圖標(biāo),實(shí)在是不想引用一大堆等文件,只想用下。

Created 2019-4-4 22:02:27 by huqi
Updated 2019-4-4 23:12:34 by huqi


↑開(kāi)局一張圖,故事全靠編↑

本地資源無(wú)法通過(guò) WXSS 獲取

都9102年了,我居然還會(huì)犯如此低級(jí)的錯(cuò)誤。不經(jīng)想起去年犯的一個(gè)更低級(jí)的錯(cuò)誤,事情的經(jīng)過(guò)是這樣的,去年@肖蜀黍 在某個(gè)群里丟了一個(gè)小程序鏈接--tell心語(yǔ),這個(gè)小程序本身就具有傳奇色彩,背后的故事更是感動(dòng)人心,就是現(xiàn)實(shí)版的解憂(yōu)雜貨店;主要的功能是寫(xiě)信,也就是文字輸入。然后,我居然腦殘地去測(cè)試xss?。?!不學(xué)無(wú)術(shù),還要自命不凡,像我這樣的沒(méi)被祭天就是萬(wàn)幸了。這次,又是基本的常識(shí)都沒(méi)掌握,直接淹死在淺坑里。background-image:可以使用網(wǎng)絡(luò)圖片,或者 base64,或者使用標(biāo)簽。這個(gè)是常識(shí),連入門(mén)級(jí)小程序員都知道的。那我究竟寫(xiě)了個(gè)什么B.U.G?毫無(wú)疑問(wèn),一定是在BG中直接引用了本地圖片。
乳此低級(jí)的錯(cuò)誤,一定要貼出來(lái),示眾以鞭策!

.refresh-icon{
  background: url("refresh.svg");
}
.del-icon{
  background: url("del.svg");
}
獲取iconfont的svg圖

作為老司機(jī)的“幼兒班程序員”,應(yīng)該是沒(méi)有資格拿到切好的圖標(biāo)了,沒(méi)辦法,技不如人,只能自己動(dòng)手去啥都有的網(wǎng)上找找。關(guān)于圖標(biāo),我最先想到的是阿里巴巴矢量圖標(biāo)庫(kù),這個(gè)由阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺(tái),設(shè)計(jì)師可以將圖標(biāo)上傳到這個(gè)平臺(tái),用戶(hù)可以自定義下載多種格式的icon,平臺(tái)也可將圖標(biāo)轉(zhuǎn)換為字體,便于前端工程師自由調(diào)整與調(diào)用。雖然可以將圖標(biāo)轉(zhuǎn)化為字體應(yīng)用,但對(duì)于我來(lái)說(shuō),就使用那么幾個(gè)圖標(biāo),實(shí)在是不想引用一大堆css、ttf等文件,只想用下svg。具體怎么操作,胸中自然有了竹子。

搜索和UI圖一模一樣的圖標(biāo),建議按照英文關(guān)鍵字查詢(xún),如del、refresh等

點(diǎn)擊下載進(jìn)入下載模態(tài)詳情頁(yè),選擇合適的顏色下載svg

轉(zhuǎn)換svg為background

既然官方文檔說(shuō)了,不讓直接引用本地圖片,但給了三條路,那我就隨便遠(yuǎn)一條嘍,反正我不想用網(wǎng)絡(luò)圖片,我也不想用image標(biāo)簽,那就只有轉(zhuǎn)成base64嘍,至于什么是base64,我也不知道,那就超度一下嘍:?base64。但是怎么快速將svg轉(zhuǎn)換成這個(gè)base64甚至直接輸出成css樣式呢?我說(shuō),首先您得有工具得到svg源碼,我用vscode,直接打開(kāi)svg就是svg源代碼;然后轉(zhuǎn)base64,偶然發(fā)現(xiàn)了國(guó)外大佬在codepan上的在線實(shí)現(xiàn),文章的話(huà)可以參考下“優(yōu)化數(shù)據(jù)uris中的svgs” ,我特意fork了一份來(lái)學(xué)習(xí),感興趣的可以看下源碼。有了這個(gè)工具,svg生成background也就是我專(zhuān)門(mén)干的事=copy&paste

獲取svg源碼

生成background

重寫(xiě)background

既然base64已經(jīng)手到擒來(lái)了,那么實(shí)現(xiàn)圖標(biāo)按鈕還會(huì)遠(yuǎn)嗎,來(lái)來(lái)來(lái),有請(qǐng)代碼說(shuō)話(huà):
超級(jí)簡(jiǎn)單!!!搜衣滋!

.my-icon{
  background-size: cover;
  display: inline-block;
  width: 50rpx;
  height: 50rpx;
  vertical-align: middle;
  margin-right: 4px;
}
.refresh-icon{
  background-image: url("data:image/svg+xml,%3C?xml version="1.0" standalone="no"?%3E%3C!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"%3E%3Csvg t="1554354671724" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1543" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"%3E%3Cdefs%3E%3Cstyle type="text/css"%3E%3C/style%3E%3C/defs%3E%3Cpath d="M936.571429 603.428571q0 2.857143-0.571429 4-36.571429 153.142857-153.142857 248.285715T509.714286 950.857143q-83.428571 0-161.428572-31.428572T209.142857 829.714286l-73.714286 73.714285q-10.857143 10.857143-25.714285 10.857143t-25.714286-10.857143-10.857143-25.714285v-256q0-14.857143 10.857143-25.714286t25.714286-10.857143h256q14.857143 0 25.714285 10.857143t10.857143 25.714286-10.857143 25.714285l-78.285714 78.285715q40.571429 37.714286 92 58.285714t106.857143 20.571429q76.571429 0 142.857143-37.142858t106.285714-102.285714q6.285714-9.714286 30.285714-66.857143 4.571429-13.142857 17.142858-13.142857h109.714285q7.428571 0 12.857143 5.428572t5.428572 12.857142z m14.285714-457.142857v256q0 14.857143-10.857143 25.714286t-25.714286 10.857143h-256q-14.857143 0-25.714285-10.857143t-10.857143-25.714286 10.857143-25.714285l78.857142-78.857143q-84.571429-78.285714-199.428571-78.285715-76.571429 0-142.857143 37.142858T262.857143 358.857143q-6.285714 9.714286-30.285714 66.857143-4.571429 13.142857-17.142858 13.142857H101.714286q-7.428571 0-12.857143-5.428572T83.428571 420.571429v-4q37.142857-153.142857 154.285715-248.285715T512 73.142857q83.428571 0 162.285714 31.714286T814.285714 194.285714l74.285715-73.714285q10.857143-10.857143 25.714285-10.857143t25.714286 10.857143 10.857143 25.714285z" p-id="1544" fill="%23ffffff"%3E%3C/path%3E%3C/svg%3E");
}
.del-icon{
  background-image: url("data:image/svg+xml,%3C?xml version="1.0" standalone="no"?%3E%3C!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"%3E%3Csvg t="1554355910565" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2306" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"%3E%3Cdefs%3E%3Cstyle type="text/css"%3E%3C/style%3E%3C/defs%3E%3Cpath d="M817.968553 215.897142l-169.357176 0 0-58.869782c0-25.391297-20.657482-46.048779-46.048779-46.048779l-181.125197 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 58.869782-169.357176 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 71.631434c0 25.391297 20.657482 46.048779 46.048779 46.048779l28.321022 0 0 425.947112c0 59.246359 48.200792 107.447151 107.447151 107.447151l340.40076 0c59.246359 0 107.447151-48.200792 107.447151-107.447151L789.647531 379.626133l28.321022 0c25.391297 0 46.048779-20.657482 46.048779-46.048779l0-71.631434C864.017332 236.554624 843.35985 215.897142 817.968553 215.897142zM426.553932 162.14389l170.892135 0 0 53.753251-170.892135 0L426.553932 162.14389zM738.482221 805.574269c0 31.033807-25.248034 56.281841-56.281841 56.281841L341.79962 861.85611c-31.033807 0-56.281841-25.248034-56.281841-56.281841L285.517779 379.626133l452.964442 0L738.482221 805.574269zM812.852022 328.460824l-601.704045 0 0-61.398372 203.227588 0c2.302439 0.356111 4.66116 0.542352 7.061836 0.542352l181.125197 0c2.400676 0 4.759397-0.186242 7.062859-0.542352l203.226564 0L812.852022 328.460824zM513.023306 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655-14.128789 0-25.582655 11.453866-25.582655 25.582655l0 288.572348C487.440651 771.866562 498.894518 783.320429 513.023306 783.320429zM645.541459 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C619.958804 771.866562 631.41267 783.320429 645.541459 783.320429zM380.505154 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C354.922499 771.866562 366.376365 783.320429 380.505154 783.320429z" p-id="2307" fill="%23ffffff"%3E%3C/path%3E%3C/svg%3E");
}

附上效果圖:

svg轉(zhuǎn)換核心源碼
//  用于創(chuàng)建優(yōu)化的svg url的函數(shù)
//  Version: 1.0.6
@function svg-url($svg){
    //
    //  補(bǔ)齊命名空間
    //
    @if not str-index($svg,xmlns) {
        $svg: str-replace($svg, "<svg","<svg xmlns="http://www.w3.org/2000/svg"");   
    }        
    //    
    //  避免一大塊的字符串
    //  拋出“堆棧級(jí)別太深”錯(cuò)誤
    //     
    $encoded:"";
    $slice: 2000;
    $index: 0;
    $loops: ceil(str-length($svg)/$slice);
    @for $i from 1 through $loops {
        $chunk: str-slice($svg, $index, $index + $slice - 1); 
        //
        //   編碼
        //
        $chunk: str-replace($chunk, """, """);
        $chunk: str-replace($chunk, "%", "%25");
        $chunk: str-replace($chunk, "#", "%23");       
        $chunk: str-replace($chunk, "{", "%7B");
        $chunk: str-replace($chunk, "}", "%7D");         
        $chunk: str-replace($chunk, "<", "%3C");
        $chunk: str-replace($chunk, ">", "%3E");
        
        // 
        //    預(yù)計(jì)列表 
        //
        //    保持大小并縮短編譯時(shí)間
        //    ... 只添加記錄的失敗 
        // 
        //  $chunk: str-replace($chunk, "&", "%26");        
        //  $chunk: str-replace($chunk, "|", "%7C");
        //  $chunk: str-replace($chunk, "[", "%5B");
        //  $chunk: str-replace($chunk, "]", "%5D");
        //  $chunk: str-replace($chunk, "^", "%5E");
        //  $chunk: str-replace($chunk, "`", "%60");
        //  $chunk: str-replace($chunk, ";", "%3B");
        //  $chunk: str-replace($chunk, "?", "%3F");
        //  $chunk: str-replace($chunk, ":", "%3A");
        //  $chunk: str-replace($chunk, "@", "%40");
        //  $chunk: str-replace($chunk, "=", "%3D");      
        
        $encoded: #{$encoded}#{$chunk};
        $index: $index + $slice; 
    }
    @return url("data:image/svg+xml,#{$encoded}");   
}
        
//  Background svg mixin          
@mixin background-svg($svg){
    background-image: svg-url($svg);        
}        
            
//  替換字符串中的字符的輔助函數(shù)
@function str-replace($string, $search, $replace: "") {
    $index: str-index($string, $search); 
    @return if($index, 
        str-slice($string, 1, $index - 1) + $replace + 
        str-replace(str-slice($string, $index + 
        str-length($search)), $search, $replace), 
        $string); 
}              

總算是又get了一個(gè)知識(shí)點(diǎn),最近做小程序,遇到的難題還是挺多的,比如還沒(méi)有解決的wx.redirectTo閃屏問(wèn)題,有大佬要是恰好遇到過(guò)類(lèi)似的坑,歡迎多多指教!

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/103252.html

相關(guān)文章

  • Copy城獅日志坑小程序canvas的顯示層級(jí)問(wèn)題

    摘要:依舊是很簡(jiǎn)單的需求,但是對(duì)于資深的攻城獅來(lái)說(shuō),除了布局,其他的就只能去了。特別是真機(jī)跑的時(shí)候,問(wèn)題特別多。還是坑在基礎(chǔ)不牢固,文檔看得不深入,對(duì)小程序原生組件應(yīng)該注意的事項(xiàng)把握不準(zhǔn),才會(huì)掉入這個(gè)非?;A(chǔ)的坑。 Created 2019-4-3 18:29:53 by huqiUpdated 2019-4-3 19:12:22 by huqi showImg(https://segmen...

    Coly 評(píng)論0 收藏0
  • Copy城獅日志坑小程序can't read property 'of

    摘要:根據(jù)當(dāng)時(shí)的情境,是在微信開(kāi)發(fā)者工具中刪掉該小程序然后重新載入就解決了,大家給出的結(jié)論是微信小程序開(kāi)發(fā)者工具的。 Created 2019-4-2 22:17:34 by huqiUpdated 2019-4-2 23:17:34 by huqishowImg(https://segmentfault.com/img/bVbqOLH?w=1526&h=818); ↑開(kāi)局一張圖,故事全靠編...

    hsluoyz 評(píng)論0 收藏0
  • Copy城獅日志】CML5分鐘入門(mén)多端統(tǒng)一框架

    摘要:開(kāi)局一張圖,故事全靠編是啥變色龍又是啥自從有小程序以來(lái),小程序的第三方框架便孕育而生,從原始時(shí)代的只基于微信小程序多如今多端統(tǒng)一開(kāi)發(fā)框架,可以說(shuō)前端技術(shù)從年到年又發(fā)生了天翻地覆的變化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

    MycLambert 評(píng)論0 收藏0
  • Copy城獅日志】借助Taro暴改Nideshop實(shí)現(xiàn)電商支付寶小程序雛形

    摘要:接下來(lái),在支付寶小程序開(kāi)發(fā)者工具中打,不出意外能跑起來(lái)一個(gè)電商支付寶小程序雛形。地址以上是我這個(gè)攻城獅對(duì)使用轉(zhuǎn)換原生微信小程序?yàn)橹Ц秾毿〕绦虻囊淮挝⒉蛔愕赖膶?shí)踐。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑開(kāi)局一張圖,故事全靠編↑ 從一個(gè)需求說(shuō)起 作為底層的程序猿,哦不,我連猿都算不上,混的好的叫碼神,混得一...

    gnehc 評(píng)論0 收藏0
  • Copy城獅日志】Node.jshttp下載圖片失敗

    摘要:當(dāng)用戶(hù)或搜索引擎向網(wǎng)站服務(wù)器發(fā)出瀏覽請(qǐng)求時(shí),服務(wù)器返回的數(shù)據(jù)流中頭信息中的狀態(tài)碼的一種,表示本網(wǎng)頁(yè)永久性轉(zhuǎn)移到另一個(gè)地址。通過(guò)在源代碼中添加日志輸出,我們也能清楚地看到的狀態(tài)碼。 Created 2019-4-5 22:24:33 by huqi Updated 2019-4-5 23:23:56 by huqi showImg(https://segmentfault.com/...

    darkbaby123 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Miracle_lihb

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<