小程序開發知識點及坑點總結

知識點

1.小程序裏面，點擊頁面頂部的返回按鈕的時候，返回的那個頁面不會刷新。頁面直接跳轉返回均可以傳參跳轉。須要作處理的時候，在onshow的時候接收參數並處理便可。

2.  頁面有彈層時，阻止下面的頁面滾動。

這個只能是用「曲線救國」來形容了。由於不能直接操做dom。就要經過class控制。經過設置外層的dom爲fixed，寬度高度爲100%；

.tripFix_root{
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: 0;
}

 <view class="wx_wrap recharge {{fixflag?'tripFix_root':''}}"></view>

若是，你是index頁面中用了組件，而後組件裏有彈窗，這個時候要阻止的是index裏面的最外層dom。這就要組件事件（https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html）來處理了。

3.小程序樣式單位rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。有時候會出如今大屏手機上顯示太小的狀況。

4.  小程序中的數據改變須要調用setData去設置。若是想改變數組中的某一項的某個值，能夠這樣設置：

Page({
  data: {
    array: [{text: 'init data'}],
  },
  changeItemInArray: function() {
    this.setData({
      'array[0].text':'changed data'
    })
  }
})

動態設置某個值的時候能夠這樣設置

var param = {};
var string = "array["+index+"].text;
param[string] = 'changed data';
that.setData(param);

5.wx:if的使用，跟vue中的v-if原理同樣， 若是不符合渲染條件，它不會渲染相應部分；  小程序中有元素顯示頻繁切換的需求，例如選中與不選中這樣。建議使用 display: hidden，經過class控制。這樣可以提升用戶體驗。

6. 名稱以 bind 開頭的事件不阻止冒泡，名稱以 catch 開頭的事件冒泡是阻止的。如 bindTap 和 catchTab。

7.在 WXML 中，可使用 dataset 定義 data 中的數據，會經過事件傳遞。它的事件以 data- 開頭，多個單詞以 - 連接，如 data-a-b。也能夠整個對象一塊兒傳，如data-item="{{item}}"，須要注意的是，使用這種方式定義的變量不能有大寫。它會自動轉成駝峯命名，調取的時候去駝峯命名的名字。

8.block標籤，<block/> 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性。

由於 wx:if 是一個控制屬性，須要將它添加到一個標籤上。若是要一次性判斷多個組件標籤，可使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。這樣能夠減小標籤的使用。

<block wx:if="{{true}}">
             <view> view1 </view>
            <view> view2 </view>
        </block>

 9.輸入框Input坑點

1）鍵盤彈起，頁面自動上推。。可是目前，沒有用戶到達此版本，

2) 輸入框輸入號碼時，按照344格式化，直接return字符串並不生效。用setData設置則生效，但ios下能夠明顯看到有間隔，安卓下實際上有間隔，可是必須輸入框失焦纔會顯示出來。

3) 不能在bindinput事件中setData，不然ios下有一個嚴重的bug。具體表現爲，輸入事，光標移至中間輸入或刪除，光標會自動跳到最後。

10.<block/> 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性。

由於 wx:if 是一個控制屬性，須要將它添加到一個標籤上。若是要一次性判斷多個組件標籤，可使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

        <block wx:if="{{true}}">

             <view> view1 </view>

            <view> view2 </view>

        </block>

11.小程序中picker-view中bindchange方法會在滑動結束後點肯定才觸發，若是我隨手一滑，還沒等他停下就就按肯定按鈕或者跳轉頁面，那麼bindchange沒觸發就不能獲取到滑動後改變的值

12.開發者工具斷點有bug，對象爲undefined，對象裏面的值倒是有東西的。