我的小程序筆記 - 持續收錄本身一年的小程序開發注意事項

記錄小程序常見問題

組件(標籤)問題

textarea

表單頁面常常遇到ios和andriod表現出來的邊距不一樣問題

Q: textarea自帶padding - 多端不統一
wxml: 
<textarea style="{{system=='ios'? 'margin-top: 14rpx;':'margin-top: 28rpx;'}}"></textarea>

js: 
wx.getSystemInfo({
    success: function (res) {
        that.globalData.system = !!~res.system.indexOf('Android') ? 'android' : 'ios';
    }
})

☆ 注意： wx:if和hidden 與 textarea的focus、auto-focus (會有不自動彈起) 還有 ios，android之間的表現形式 結合view組件(標籤)處理
wx:if - ios正常隱藏顯示自動聚焦
placeholder位置錯亂, 穿透彈窗或遮罩層
☆ 儘量說服產品和ui, 在長表單頁面中, 最好不要以下圖同樣的設計
textarea(②)從超過一屏幕的下方出現, 且頁面有提交懸浮塊③的設計, 在滾動(①)時會出現textarea內容層級問題.

• 表單通常都是從上而下填寫的, 懸浮設計爲非必要. 因筆主說不過, 只能麻煩的隱藏顯示, ios沒事,但安卓切換顯示錶現不友好.

textarea 在 position:fixed的元素中時要給 textarea 增長屬性 fixed：<textarea fixed>

小程序js問題

小程序IOS不支持1970-01-01格式的時間

let time1 = '1970-01-01 11:00:00'; 
// ios須要替換掉'-'改成'/'
mydata = data.replace(/-/g, '/');
console.log("返回時間：" + mydata);

異步請求, onLaunch,onLoad執行問題

因爲異步異步, 頁面的onLoad的一些內容可能會先於onLaunch的(異步回調)內容執行執行

web-view 有時須要跳轉前將參數轉義，而後使用前在從新轉義

傳參

toUrl(event) {
    // 打開頁面(只能打開白名單的域名)
    var url = event.target.dataset.url;
    if(!url){
      return;
    }
    url = encodeURIComponent(url);
    url = '/pages/web/web?url=' + url;
    wx.navigateTo({
      url: url
    })
}

收參

onLoad: function (options) {
    // 頁面渲染後 執行
    var page = this;
    var url = options.url;
    url = decodeURIComponent(url);
    
    // 頁面初始化 options爲頁面
    var newUrl = "https://www.yugi.com";
    if (url.indexOf('http://yugi.com')>-1){
      url = url.replace('http://yugi.com', newUrl);
    } else if (url.indexOf('http://www.yugi.com')>-1) {
      url = url.replace('http://www.yugi.com', newUrl);
    }
    //isPassArea=1&xcx=1
    if (url.indexOf('isPassArea')<0) {
      url = url +'&isPassArea=1';// 二級域名不過濾
    }
    if (url.indexOf('xcx') < 0) {
      url = url + '&xcx=1';// 小程序標識，若是有須要特殊處理，能夠用此判斷
    }
    if (url.indexOf('flag=1') < 0) {
      url = url.replace('flag=1','flag=2');
    }
    if (url.indexOf('flag') < 0) {
      url = url + '&flag=2';// 取消一鍵下載
    }
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    this.setData({
      url: url
    }) 
  }