總結開發過程踩到的坑（五）（小程序篇）

最近開始接觸了小程序的開發，因爲時間問題，文檔閱讀的並不完備，也踩了不少坑。不得不說，微信的野心真是愈來愈大了，可是它超高的流量註定了它有這個資本。

原文地址：mini programs

---

目錄

1. scroll-view 的使用
2. 關於 Swiper 的使用
3. 下拉刷新與上拉加載
4. web-view 的使用
5. 其它涉及到的內容

1. scroll-view 的使用

官方提供了 scroll-view（可滾動視圖區域）組件，開發者能夠很方便對其進行配置。
在使用過程當中，必需要指定 scroll-view 的一個固定高度，因此在某些狀況下須要動態爲該組件添加高度.

//wxml
<scroll-view style="height:{{scrollHeight}}px;"></scroll-view>

//js
data: {
    scrollHeight: 500
},
onShow: function() {
    var that = this
    wx.getSystemInfo({
        success: function(res) {
            that.setData({
                scrollHeight: res.windowHeight
            })
        }
    })
}

注：使用 scroll-view 時會阻止頁面回彈，因此在 scroll-view 中滾動，沒法觸發 onPullDownRefresh

2. 關於 Swiper 的使用

官方一樣提供了 swiper 組件，只需簡單進行配置便可實現輪播圖，可是對於輪播圖的指示點來講，並無提供過多的配置，因此若要修改指示點，須要禁用默認自行進行模擬。

//wxml
<swiper class='swiper' autoplay circular interval='2000' bindchange="swiperChange">
    <swiper-item>
        <image src="{{imageUrl}}"/>
    </swiper-item>
</swiper>
<view class="dots">     
    <block wx:for="{{imgUrls}}"> 
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> 
    </block> 
</view>

//js
data: {
    swiperCurrent : 0
},
swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
},

3.下拉刷新與上拉加載

在小程序中，官方爲咱們提供了原生的下拉刷新和上拉加載，只須要進行簡單的配置便可實現下拉刷新的功能

//app.json
"window": {
    "backgroundTextStyle": "dark",//若是下拉未呈現加載中圖標，將 light 改成 dark
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50//頁面上拉觸底事件觸發時距頁面底部距離，單位爲px
    }
    
//js
onPullDownRefresh: function() {
    //標題顯示加載 gif
    wx.showNavigationBarLoading()
    //執行完成後，中止下拉刷新和加載 gif
    wx.stopPullDownRefresh()
    wx.hideNavigationBarLoading()
}，
onReachBottom: function() {
    //your code
    
}

除此以外，還可使用 scroll-view 組件來實現這兩個功能

//wxml
<scroll-view style="height: {{scrollHeight}}px;" enable-back-to-top bindscrolltolower="loadMore" bindscrolltoupper="refreshData">
</scroll-view>

//js
loadMore: function() {
    //your code
},
refreshData: function() {
    //your code
}

在實際體驗中，使用 scroll-view 的下拉刷新，當頁面處於最頂端時，下拉沒法觸發該事件，須要滾動頁面一段距離再下拉纔會觸發 bindscrolltoupper，體驗並不友好，因此仍是建議使用小程序原生下拉刷新。

另外一個問題是，在上拉加載的時候，常常會觸發屢次加載事件，顯然是不符合需求的，解決方法能夠爲加載事件添加一個加載狀態，默認 true，觸發加載時置爲 false，待事件所有執行完畢後再修改成 true。

//wxml
<scroll-view style="height: {{scrollHeight}}px;" enable-back-to-top bindscrolltolower="{{loadMore? 'loadMore' : ''}}">

</scroll-view>

4. 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 所在頁面就能夠了

//demo.wxml
<view class='search-right' data-url='{{url}}' bindtap='toPage'></view>

//demo.js
data: {
    url: 'https://www.google.com'
},
toPage: function(e) {
    wx.navigateTo({
        url: 'pages/webView?url=' + e.currentTarget.dataset.url
    })
}

//webView.wxml
<web-view src="{{url}}"></web-view>

//webView.js
data: {
    url: ''
},
onLoad: function(options) {
    options.url? this.setData({ url: options.url }) : wx.navigateBack()
}

5. 其它涉及到的內容

小程序不能使用層級選擇器。
在 wxss 不能使用背景圖片，須要使用 image 組件引入圖片。
wxml中不能直接插入轉義字符，須要使用在 text 組件中使用。

<text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>

自定義循環變量使用 wx:for-item="i"。

參考文獻

微信小程序開發者文檔