總結開闢歷程踩到的坑（五）（小順序篇）


近來最先打仗了小順序的開闢，因為時間問題，文檔瀏覽的並不完整，也踩了許多坑。不得不說，微信的野心真是越來越大了，然則它超高的流量必定了它有這個資源。


原文地點：mini programs

1. scroll-view 的運用
2. 關於 Swiper 的運用
3. 下拉革新與上拉加載
4. web-view 的運用
5. 別的涉及到的內容

1. scroll-view 的運用

官方供應了 scroll-view（可轉動視圖地區）組件，開闢者能夠很輕易對其舉行設置。
在運用過程中，必需要指定 scroll-view 的一個牢固高度，所以在某些情況下須要動態為該組件增加高度.

//wxml

//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










//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


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


在現實體驗中，運用 scroll-view 的下拉革新，當頁面處於最頂端時，下拉沒法觸發該事宜，須要轉動頁面一段間隔再下拉才會觸發 bindscrolltoupper，體驗並不友愛，所以照樣發起運用小順序原生下拉革新。

另一個問題是，在上拉加載的時刻，經常會觸發屢次加載事宜，顯然是不符合需求的，解決方法能夠為加載事宜增加一個加載狀況，默許 true，觸發加載時置為 false，待事宜悉數實行終了后再修正為 true。

//wxml



4. web-view 的運用

微信小順序不支持原生頁面跳轉，包含 html 和 js，若要跳轉小順序運用內頁面，須要運用 wx.navigateTo(OBJECT)，詳見 wx.navigateTo API。若要跳轉 H5 頁面，就須要用到 web-view 組件了。
web-view 組件是一個能夠用來承載網頁的容器，會自動鋪滿全部小順序頁面。

web-view指向的 H5 鏈接必需要在小順序背景設置白名單。

若要完成動態跳轉，只須要動態傳參到 web-view 地點頁面就能夠了

//demo.wxml

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

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

5. 別的涉及到的內容

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

自定義輪迴變量運用 wx:for-item=&＃8221;i&＃8221;。

參考文獻

微信小順序開闢者文檔