終于還是進入到了微信小程序開發的行列,雖然相對很多人來說有些晚了,但是終究還是開始了不是。
首先,不得不說微信小程序的開發文檔確實寫得不錯(\贊)
作為一個微信小程序開發的新手來說,其實入門也就只需要看官方的開發文檔就足夠了。
中文文檔,通俗易懂,有代碼片段示例,也可以直接在微信開發者工具上瀏覽相關示例的完整代碼。
這估計也是我為什么在網上沒有找到其他微信小程序入門教程的原因了。
其次,微信開發者工具還有巨大的進步空間(\奮斗)
目前最新的微信開發者工具可以編寫調試微信小程序的代碼,也可以編寫調試公眾號的代碼。
做過公眾號的都知道,公眾號里最難調試的是微信的授權那一塊的東西。
微信開發者工具里面也不能直接調試,除非你自己的微信被授權為該公眾號的開發者。
如果公眾號沒有授權,比較好的做法就是去申請兩個公眾號主體,專門拿一個公眾號來進行測試。
在開發微信小程序的時候,微信開發者工具最大的欠缺是在代碼提示上。
目前微信開發者工具對它自己的API的提示是做得很好了,但是對開發者自己寫的js代碼以及css樣式的智能提示就顯得比較乏力了。
然后,再來說說微信小程序開發本身
微信小程序的開發語言總的來說和vue很像,和ionic3也很像。
可以通過類比vue和ionic3來學習微信小程序的開發,所以說微信小程序開發入門和上手都是比較容易的。
雖然入門相對比較容易,但是在編寫Demo的時候還是遇到了幾個相對有價值的問題。
第一,padding引發寬度高度的變化
在標準的HTML開發時,如果給一個div標簽加上"width"和""height,然后再添加"padding",這個時候div的寬度和高度是不會改變的,只會去壓縮div內部的空間。
但是在小程序上,如果給一個view標簽加上"width"和""height,然后再加上"padding",這個時候view的寬度會變成"width"+"padding-left"+"padding-right",,高度會變成"height"+"padding-top"+"padding-bottom"。
第二,動態加載樣式
在ionic上動態加載樣式有兩種方式:ngClass和ngStyle。
但是在微信小程序中并沒有類似的屬性可以動態加載樣式,它的做法感覺更加直接。
<!-- 動態加載class -->
<view class='{{index==selectedIndex?"my-class-sel":"my-class"}}'></view>
<!-- 動態加載頁面上data的myColor -->
<view style='{{myColor}}'></view>
第三,頁面禁止滾動
眾所周知,在iOS設備上,滾動的頁面都有彈簧(橡皮筋)效果。
但是有時候我們并不想要這種效果,比如類似京東小程序里面的商品分類頁面。整個最外層的view不能進行滾動,內部有兩個可以滑動的菜單欄,相互之間各不影響。
在仔細閱讀了文檔之后終于找打了答案:{"disableScroll": true}。
在頁面的josn配置文件里把"disableScroll"設置為"true",即可禁止頁面滾動,也就去掉了iOS上頁面的彈簧(橡皮筋)效果。