資訊專欄INFORMATION COLUMN
摘要：本文主要針對(duì)小程序無(wú)聊廣場(chǎng)的前端開(kāi)發(fā)內(nèi)容做總結(jié)，記錄常見(jiàn)的一些老生常談的進(jìn)階手法，對(duì)小程序中的動(dòng)畫音頻等踩坑做出解決方案。
背景
一個(gè)交互不復(fù)雜，對(duì)刷新頻率和動(dòng)畫效果要求不高的小游戲，不需要使用canvas主導(dǎo)的解決方案，使用dom操作一樣可以完成。節(jié)省了cocos creater的學(xué)習(xí)成本，值得一試。本文主要針對(duì)小程序“無(wú)聊廣場(chǎng)”的前端開(kāi)發(fā)內(nèi)容做總結(jié)，記錄常見(jiàn)的一些老生常談的進(jìn)階手法，對(duì)小程序中的動(dòng)畫音頻等踩坑做出解決方案。
按鈕與字體優(yōu)化 雪碧圖歷史在早期雪碧圖盛行的年代，推崇切圖大法好的時(shí)期，我們通常把按鈕的選中與普通狀態(tài)切圖，但由于多張圖片http請(qǐng)求消耗太大，故切在一張圖用css sprite騷操作完成圖標(biāo)顯示。
雪碧圖優(yōu)缺點(diǎn)| 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|
| 減少服務(wù)器請(qǐng)求次數(shù) | 無(wú)用空白占用內(nèi)存 |
| 提高頁(yè)面的加載速度 | 使CSS的編寫變得困難 |
| 減少鼠標(biāo)滑過(guò)的一些bug | 拼圖維護(hù)比較麻煩 |
現(xiàn)如今使用工具將單一顏色的圖標(biāo)做成字體庫(kù)，諸如font awesome 等優(yōu)秀的圖標(biāo)庫(kù)有很多。字體文件只需要考慮瀏覽器兼容問(wèn)題，在顏色大小上都可以根據(jù)項(xiàng)目?jī)?nèi)容自定義，相比切圖的局限性要優(yōu)雅很多。
交互中有中文字體怎么破通過(guò)壓縮字庫(kù)，提煉個(gè)別需要用到的按鈕標(biāo)題等，這樣既解決了樣式大小顏色自定義的問(wèn)題，修改字操作也不用重新切圖修改大小。（例如下圖在“無(wú)聊廣場(chǎng)中用到的字體”）
在小程序中字體文件上傳不了，怎么辦在開(kāi)發(fā)小程序時(shí)，開(kāi)發(fā)工具告訴你那個(gè)字體文件忽略沒(méi)有上傳。解決方案是轉(zhuǎn)成base64硬編碼到css文件中。
字體壓縮工具字蛛
壓縮效果 font-face就沒(méi)有缺點(diǎn)了嗎| 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|
| 開(kāi)發(fā)速度快 | 大量中文字不如單圖 |
| 縮放不失真，顏色可自定義 | 不支持彩色細(xì)節(jié)的圖案 |
| 內(nèi)存占用小 | 復(fù)雜樣式排版耗費(fèi)人力 |
可以看到早在css2中就有偽元素了，然而學(xué)術(shù)尚淺的開(kāi)發(fā)者只會(huì)div。上圖列舉了常用的偽元素。本文以:before,after為例帶你優(yōu)雅布局。
原來(lái)點(diǎn)也也可以這么寫
如上圖中的游戲規(guī)則，左右各有1個(gè)黑點(diǎn)，布局的時(shí)候如何優(yōu)雅的在前后畫圓呢？用border-radius:50%當(dāng)然可以。那用字符●也未嘗不可。代碼如圖。
如上圖的文字氣泡，只需要一個(gè)45°旋轉(zhuǎn)的正方形和一個(gè)圓角矩形拼接就可以了，代碼就自己腦補(bǔ)一下。
如圖列表左側(cè)有獎(jiǎng)牌形狀的圖標(biāo)，按常理切圖也是可以的，但用css實(shí)現(xiàn)既可以控制顏色又可以放大不失真，一勞永逸。實(shí)現(xiàn)方式也很簡(jiǎn)單。
通過(guò)上圖可以看到，先類選擇器寫通用的灰色索引。再用before+after畫出兩個(gè)三角形。最后用nth-child選擇對(duì)應(yīng)的金銀銅獎(jiǎng)牌自定義，完美。
用盒模型啊，給你張圖自己體會(huì)。
黑白柵格實(shí)現(xiàn) 音頻兼容問(wèn)題小程序兼容方案
SysModel=="iphone"?"aac":"ogg"
在“無(wú)聊廣場(chǎng)”小程序中，擼禿頭的素材拼接在1張圖上，在超過(guò)4k*4k后發(fā)現(xiàn)會(huì)出現(xiàn)跳幀，閃爍，背景消失等情況。
最終的解決方案是：壓縮到4K*4K以下。
小圖片壓成css不用放cdn服務(wù)器
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95857.html
摘要：側(cè)邊欄選用提到的。將改成來(lái)訪問(wèn)的形式組織代碼出現(xiàn)循環(huán)的問(wèn)題往往意味著代碼的布局有問(wèn)題，可以合并或者分離競(jìng)爭(zhēng)資源。分離的話就是把需要的資源提取到一個(gè)第三方文件去?？傊褪菍⒀h(huán)變成單向。對(duì)于周期性任務(wù)缺一不可。其他任務(wù)可僅運(yùn)行。 1、bootstrap代碼片段： 如果你沒(méi)有藝術(shù)細(xì)胞，偷懶的方法就是到這上面去找，比如登錄框界面等。側(cè)邊欄選用：http://www.designerslib....
摘要：側(cè)邊欄選用提到的。將改成來(lái)訪問(wèn)的形式組織代碼出現(xiàn)循環(huán)的問(wèn)題往往意味著代碼的布局有問(wèn)題，可以合并或者分離競(jìng)爭(zhēng)資源。分離的話就是把需要的資源提取到一個(gè)第三方文件去?？傊褪菍⒀h(huán)變成單向。對(duì)于周期性任務(wù)缺一不可。其他任務(wù)可僅運(yùn)行。 1、bootstrap代碼片段： 如果你沒(méi)有藝術(shù)細(xì)胞，偷懶的方法就是到這上面去找，比如登錄框界面等。側(cè)邊欄選用：http://www.designerslib....
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
閱讀 3007·2023-04-26 02:22
閱讀 2355·2021-11-17 09:33
閱讀 3251·2021-09-22 16:06
閱讀 1164·2021-09-22 15:54
閱讀 3599·2019-08-29 13:44
閱讀 2021·2019-08-29 12:37
閱讀 1376·2019-08-26 14:04
閱讀 1977·2019-08-26 11:57
