|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要介紹了微信小程序 less文件編譯成微信小程序wxss文件實現辦法的相關資料,這里給出具體實現方法,需要的朋友可以參考下less文件編譯成微信小程序wxss文件 2016年9月21日,微信小程序正式開啟內測。在微信生態下,觸手可及、用完即走的微信小程序引起廣泛關注,刷爆朋友圈子。在這樣的火爆氛圍中,作為一個前端開發者的我,也悄悄地去嘗鮮。 在做demo小示例的過程中,我發現了一個極為讓人為難的事兒:**如何讓 less/sass 文件轉成小程序的 wxss 文件**。</font> 對于基本不使用原生css,而習慣編寫less的我,這個事兒讓我的樣式編寫相當的吃力。 在嘗試配置koala (一個可以編譯less/sass的工具)以及搜索各種資料后,終于找到了一個可行的方法。我以less為示例,和大家分享下。sass也是可行的。 環境要求: - webstrom 具體步驟 1.使用 nodejs 命令安裝 less。 在 nodejs命令窗口輸入:npm install less -g,然后回車安裝。如下圖:
2.webstrom 配置 1).打開webstrom的設置,File —> Settings。 2).展開左邊列表最后一項,找到File Watchers。我們可以看到右側的白色方框,再點擊添加圖標,選擇less。如圖所示:
3).在打開的的方框中,我們可以看到一些相關的配置。其他的我們不用管,我們只要關注兩個地方:程序的路徑和輸出路徑。 程序路徑是我前面安裝的 less路徑,輸出路徑這個地方修改一下,將原來默認的.css改成.wxss。如下圖:
4).保存確認。 3.驗證 1).我們在編輯器中驗證下是否生效。添加一個less文件,我們會發現編輯器自動給我添加了一個相應的wxss文件。 2).編寫less文件,然后保存,再打開wxss文件,發現編譯成功,那我們大功告成了。
等會!我們的 wxss 看起來效果很差! 大家不慌,有解決辦法: 1).打開webstrom的 設置,找到Editor下的File anb Code Templates. 如圖:
2).點擊添加圖標,在拓展名輸入框輸入wxss,點擊Apply.
3).在彈出的文件類型框中,選擇css。
4).打開我們的wxss,發現它和css是一樣的。
這里我只是用less作為示例,sass大同小異,大家如果有需要,可以自己弄一下。 以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 以上就是微信小程序 less文件編譯成wxss文件的實現的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!