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