小程序 ----踩坑 ---安卓iOS兼容等


關於小程序一些小功能的代碼都在這個GitHub上,感興趣的可以去看看,
https://github.com/huihuijiang/miniProgram 目前有:列表左滑刪除,拖拽浮標

 

一、小程序坑
1.scroll-view橫向滾動的時候,包含文字圖片等,元素錯位,第二個元素掉下去;
hack:給子元素添加 vertical-align:top;

當使用scroll-view橫向滾動時要注意幾點:
父元素設置寬度,加上這兩個樣式overflow: hidden; white-space: nowrap;自元素設置成display: inline-block;vertical-align:top;

二、android 和 ios 兼容
1.不定寬高元素使用全鋪背景圖片,ios沒有問題,安卓手機背景圖片顯示空白
hack: background-size:cover;(元素加上這一屬性) 

2.安卓手機緩存嚴重問題

hack:在圖片后再加上一串隨機數

在wxs中:(有些iOS手機不能識別小數的隨機數,所以最好用整數  var random = Math.floor(Math.random() * 10 + 1) * 9;

3.ios不支持默認最小定時時間(0或不寫)

4.截取字符串遇到表情,安卓沒問題,ios會報錯;
hack:(判斷是否有表情)

      var reg = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;
      var re = new RegExp(reg);
      var en = str.slice(27, 29);
      if (re.test(en)) {
        title = str.slice(0, 27)
      } else {
        title =str.slice(0, 28)
      }
5.getTime()時候,iOS必須把時間格式00-00-00轉換成00/00/00

6.小程序獲取膠囊按鈕返回值(一直在變,目前的兼容代碼

const self = this;
wx.getSystemInfo({
success: function (res) {
self.globalData.phonexh = res.model.indexOf("iPhone X");
var menuButton = wx.getMenuButtonBoundingClientRect();
//導航欄高度
self.globalData.totalTopHeight =
menuButton.height == menuButton.bottom ?
menuButton.height :
res.model.indexOf("iPhone") == 0 || (res.platform == 'android' && res.version == '7.0.3') ?
menuButton.top + menuButton.height + (menuButton.top - res.statusBarHeight) :
menuButton.top + menuButton.height + menuButton.top + res.statusBarHeight
//狀態欄高度
self.globalData.statusBarHeight = res.statusBarHeight;
//標題欄高度
self.globalData.titleBarHeight = self.globalData.totalTopHeight - res.statusBarHeight;

}
})

7.iOS使用overflow:auto;滾動會卡頓

hack:
-webkit-overflow-scrolling: touch

8.轉發到微信列表的轉發信息卡片圖,iOS當圖片尺寸不對時,會出現空白,安卓會自動截取左上角

9.iOS橡皮筋事件
hack:在page.json文件中
"disableScroll": true

10.iOS短時間多次掃碼進入不會執行onload

11.new number()強制轉換結果為undefined
hack:用parsefloat
12.iOS圖片加上阿里雲編輯參數加載失敗
Hack:binderror事件中對src重新復制,記得帶上隨機數,不然會因為路徑一樣不請求,有時候不是一次就能重新請求成功的,所以下一次獲取的時候記得去掉隨機數

loadimgerror: function (e) {
console.log("圖片加載失敗")
this.setData({
Src: e.target.dataset.src.split("?")[0] + '?' + Math.floor(Math.random() * 10 + 1) * 9
})
},

 

 


免責聲明!

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



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