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


1、上拉加載失效

問題背景:部分頁面上拉加載失效。當使用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>

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

3、在 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組件。如果想將圖片作為背景,而且上面排列其他的一些組件的話,需要使用定位布局了。

  解決方案:1、圖片轉為base64;2、使用image組件,然后使用定位布局

4、wxml中不能直接插入轉義字符,比如 \n,需要使用在 text 組件中使用。

5、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 所在頁面就可以了。

6、自定義組件里面無法使用icon,需要用image

7、文本實現兩端對齊

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

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

8、域名不在配置的白名單里的問題

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM