1. 程式人生 > >開發小程式時遇到的坑

開發小程式時遇到的坑

一.關於頁面tab
  方法1,使用小程式封裝好的tab配置方法,配置在app.json檔案中,適用於全域性,該方法優化了頁面切換時候,資料預載入的問題,不會出現切換速度遲緩的問題。缺陷,tab組建部分樣式不可控制,只可以控制tab背景顏色,還限制了只能黑白兩色,tab的配置中不可省略tab的文字(不想要文字的可以用‘’代替,但是會影響佈局的美觀性)tab icon只能使用圖片,不支援圖示字型。tab icon的圖片只能存在本地,不支援雲資源管理。
  方法2,首頁tab,但是新頁面載入資料的方法不能寫在onload裡面,寫在onload裡面會導致頁面載入遲緩。官方推薦寫在onshow方法裡,做個頁面載入的預處理。


二.關於引用圖片,視訊,音訊等資源
  1.單頁面的資源支援且僅支援線上連結,全域性圖片僅支援本地伺服器資源。
  2.video組建在移動端屬於系統原生組建,層級最高且無法改變,z-index失效,不建議視訊組建上面直接覆蓋蒙板。
  3.建議壓縮圖片資源,若圖片體積過大,載入時候會出現閃屏現象。


三.關於外鏈和內鏈
  1.不支援引用外鏈,寫了外鏈,小程式會在連結前面自動加上相對地址,導致外鏈失效。
  2.內部連結分為跳轉後關閉上一級的頁面和跳轉後保留上一級的頁面,保留上一級的那種連結,有頁面層級限制,目前是不超過5層,超過五層連結會失效,需要保留上一級頁面的時候用wx.navigateTo({url:'../index/index'}),不需要保留上一級頁面的時候用wx.redirectTo({url:'../index/index'})。


四.關於canvas的應用
  1.canvas支援畫文字,但是不支援改變文字顏色
  2.支援canvas內容轉成圖片,會返回一個臨時圖片地址
  3.canvas標籤內部的view等標籤不會被canvas識別,但是也能正常的在頁面中顯示效果。


五.關於頁面傳值
  1.http://www.jianshu.com/p/0135769db89c
  2.data-xxx的方法傳值很簡單也很方便
  3.如果一層for迴圈,不必指定index,預設用index就可以,若多層for迴圈巢狀,需要指定不同的for-index,否則,每個for迴圈的index都是預設的index,會產生js中的重名問題。


六.關於選單欄的設定
  1.可以設定分享,在app.json檔案中window選項中開啟分享許可權,在每個需要有分享功能的頁面,單獨呼叫分享的方法。
  2.若是觸發分享事件的是頁面中的按鈕,注意在button組建上加上open-type="share"屬性,否則不生效。


七.關於頁面的滾動
  1.小程式提供了onscroll的方法實現頁面的橫向和豎向滾動,一般豎向的滾動比較常用,常見的回到頂部,點選頁面內部tab跳到頁面指定位置,需要注意的是,要用<scroll-view scroll-y bindscroll="mainScroll" class="vh-100">標籤將頁面的全部內容包裹,其中,scroll-view的高度不可省略,方向設定不可省略,若要指定滾動高度,加上scroll-into-view="{{runTo}}"屬性,runTo是要滾到位置的id值。
  2.小程式提供了swiper組建實現橫向豎向的輪播,滾動,不支援修改樣式,不支援修改滾動方式,儘可以修改變換間隔,時常和是否迴圈播放,是否有指示點。
  3.<scroll-view scroll-x="true" style="white-space: nowrap;">橫向滾動這樣就好,按照官方文件上的寫法,會在移動端上滾不動。且該組建內部的多個元素不能有overflow:hidden屬性。


八.關於es6寫法
  1.方法回撥事件中,成功,失敗,完成回撥事件中程式碼格式success: (res) => {}按照官方文件的寫法,會導致方法內部setData({})方法失效。


九.關於隱藏組建下拉顯示的實現
  1.<scroll-view scroll-y bindscroll="mainScroll" class="vh-100" upper-threshold="200px" bindscrolltoupper="toupper">組建包起整個頁面,upper-threshold是下拉顯示的邊界位置,bindscrolltoupper是下拉事件,同樣,頁面高度不可缺,滾動方向不可缺。


十.關於頁面的即時重新整理
  1.實現類似電視劇選集效果,不要想著每個劇集跳轉到一個單獨的頁面,小程式只支援五層頁面啊,用點選每個劇集重新整理頁面資料的思路才能實現。


十一.關於表單元素
  1.textarea的placeholder文字改不掉屬性。