微信小程序的那些「坑」

微信小程序藉助微信這個宇宙APP的平臺，一經面世便如火如荼地在各行各業蔓延開來，不少企業都利用小程序做爲一種有效的宣傳手段，而微信官方又開放了小程序的API供開發者們進行開發，因而在廣大的程序猿中又掀起了一場微信小程序的開發浪潮。

其實微信小程序的總體架構和代碼風格借鑑了當下很是流行的前端框架vue.js，可是它又有本身的一套文件格式，好比wxml和wxss，它們與html和css在結構和寫法上很是類似，可是機制卻又不同，若是你用html和css的習慣去開發就會引發一系列的問題。筆者在實踐過程當中總結了一些微信小程序開發遇到的「坑」，以避免重蹈覆轍，也給你們作一個借鑑。

1、引入fontawesome圖標

在作微信小程序的時候不免會要用到一些icon，這時若是你想用fontawesome圖標庫裏的圖標的話，就不能用傳統的方式去引入font0-awesome中的圖標了，如下是在微信小程序中引入font-awesome圖標的方法：

• 下載font-awesome字體包
• 打開Transfonter網站，上傳字體fontawesome-webfont.ttf(或者其餘字體)，選擇base64編碼，點「convert」
• convert完畢後點download下載轉換後的文件，解壓下載包中有stylesheet.css文件以下

注意：src後的那一串編碼就是字體文件轉化的base64編碼，把這個src拷貝到font-awesome.css對應的src中。由於font-awesome.css的src其實就是引用的咱們所轉換的字體文件，咱們只是把字體文件轉換爲base64編碼直接寫進文件裏了。

• 咱們將修改後的font-awesome.css中的內容拷貝到app.wxss中，就能夠愉快地使用font-awesome中的各類圖標了，例如：

<text class="fa fa-flag"></text>

2、設置啓動頁面

在微信小程序中你可能須要寫不止一個頁面，可是當你所寫的頁面嵌套層次很深的時候，你在邊寫邊調試頁面就須要點擊不少次才能夠從首頁進入到你所寫的頁面，這時候咱們但願啓動的時候就是咱們所寫的頁面，有兩種方法實現：

• app.json設置

在app.json文件中，pages數組，設置在第一個的頁面就是默認啓動頁面，因此你只須要調整你當前開發的頁面順序就行了。

• 編譯條件設置

在編譯的地方設置，你只須要設置頁面的路徑，勾選上「使用以上條件編譯」，若是頁面須要參數，那能夠把參數也傳上。這樣啓動的就是你設置的頁面。

3、背景圖片

微信小程序中不能用CSS的方法來加載本地圖片，好比background-url，除非你把本地圖片base64化，不然只可以用image組件。若是你想將圖片做爲背景，並且上面還排列其餘的一些組件的話，就須要採用「定位」的技術了：
xwml:

<view class="container">
    <image class="bgImg" src="/images/xxx.png"></image>
    <other-widget class="other-wigdget"></other-widget>  <!-- other widget但願是放在背景圖片之上的 -->
</view>

wxss:

.container{
    position: relative;
}
.other-widget{
    position: absolute;
}

若是不採用定位的方法，other-widget就會按照塊級元素排列在image的下邊，可是若是咱們採用絕對定位使other-widget脫離文檔流，它就會相對於container進行定位，也就實現了在背景圖片之上的效果。