微信小程序開發注意事項總結：上拉加載失效、轉義字符等

一、上拉加載失效

問題背景：部分頁面上拉加載失效。當使用flex佈局，底部固定，中間採用自適應撐滿全屏實現滾動時，發現上拉加載失效，不知道是什麼緣由。

解決問題：

　　在小程序中，官方爲咱們提供了原生的下拉刷新和上拉加載，只須要進行簡單的配置便可實現下拉刷新的功：onPullDownRefresh、onReachBottom

　　除此以外，還可使用 scroll-view 組件來實現這兩個功能，利用scroll-view的bindscrolltolower、bindscrolltoupper事件

<scroll-view
style="height: {{scrollHeight}}px;"
enable-back-to-top
bindscrolltolower="loadMore"
bindscrolltoupper="refreshData"> </scroll-view>

二、小程序不能使用層級選擇器。

三、在 wxss 不能使用背景圖片，須要使用 image 組件引入圖片。

　　微信小程序css設置本地背景圖片

　　微信小程序中，直接在css中直接使用本地圖片爲view設置背景圖片，如

.box1{ 　　background-image: url(../../image/alltest_bag.jpg); }

　　會出現以下問題，會報錯：pages/allTest/allTest.wxss 中的本地資源圖片沒法經過 WXSS 獲取，可使用網絡圖片，或者 base64，或者使用<image/>標籤。

　　微信小程序不能用CSS的方法加載本地圖片，好比background-url()，除非你把本地圖片base64化，不然只可以用image組件。若是想將圖片做爲背景，並且上面排列其餘的一些組件的話，須要使用定位佈局了。

　　解決方案：一、圖片轉爲base64；二、使用image組件，而後使用定位佈局

四、wxml中不能直接插入轉義字符，好比 \n，須要使用在 text 組件中使用。

五、web-view的使用

　　微信小程序不支持原生頁面跳轉，包括 html 和 js，

　　若要跳轉小程序應用內頁面，須要使用 wx.navigateTo(OBJECT)，詳見 wx.navigateTo API。

　　若要跳轉 H5 頁面，就須要用到 web-view 組件了。web-view 組件是一個能夠用來承載網頁的容器，會自動鋪滿整個小程序頁面。

<web-view src="{{url}}"></web-view>

　　web-view指向的 H5 連接必需要在小程序後臺配置白名單。若要實現動態跳轉，只須要動態傳參到 web-view 所在頁面就能夠了。

六、自定義組件裏面沒法使用icon，須要用image

七、文本實現兩端對齊

　　文本實現兩端對齊，大多人都知道text-align:justify;實際上，寫這句在小程序端真的沒有兩端對齊的效果。

　　須要加上：text-align-last: justify;才能實現兩端對齊

八、域名不在配置的白名單裏的問題

　　開發者工具——詳情——本地配置——不校驗合法域名...HTTPS證書勾選上便可