摘要：最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁面跳轉(zhuǎn)，包括和，若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁面，需要使用，詳見。參考文獻(xiàn)微信小程序開發(fā)者文檔

最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。不得不說，微信的野心真是越來越大了，但是它超高的流量注定了它有這個資本。

原文地址：mini programs

scroll-view 的使用

關(guān)于 Swiper 的使用

下拉刷新與上拉加載

web-view 的使用

其它涉及到的內(nèi)容

官方提供了 scroll-view（可滾動視圖區(qū)域）組件，開發(fā)者可以很方便對其進(jìn)行配置。
在使用過程中，必須要指定 scroll-view 的一個固定高度，所以在某些情況下需要動態(tài)為該組件添加高度.

//wxml


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

注：使用 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，無法觸發(fā) onPullDownRefresh

官方同樣提供了 swiper 組件，只需簡單進(jìn)行配置即可實(shí)現(xiàn)輪播圖，但是對于輪播圖的指示點(diǎn)來說，并沒有提供過多的配置，所以若要修改指示點(diǎn)，需要禁用默認(rèn)自行進(jìn)行模擬。

//wxml

    
        
    

     
     
       
     


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

在小程序中，官方為我們提供了原生的下拉刷新和上拉加載，只需要進(jìn)行簡單的配置即可實(shí)現(xiàn)下拉刷新的功能

//app.json
"window": {
    "backgroundTextStyle": "dark",//如果下拉未呈現(xiàn)加載中圖標(biāo)，將 light 改為 dark
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50//頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px
    }
    
//js
onPullDownRefresh: function() {
    //標(biāo)題顯示加載 gif
    wx.showNavigationBarLoading()
    //執(zhí)行完成后，停止下拉刷新和加載 gif
    wx.stopPullDownRefresh()
    wx.hideNavigationBarLoading()
}，
onReachBottom: function() {
    //your code
    
}

除此之外，還可以使用 scroll-view 組件來實(shí)現(xiàn)這兩個功能

//wxml



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

在實(shí)際體驗(yàn)中，使用 scroll-view 的下拉刷新，當(dāng)頁面處于最頂端時，下拉無法觸發(fā)該事件，需要滾動頁面一段距離再下拉才會觸發(fā) bindscrolltoupper，體驗(yàn)并不友好，所以還是建議使用小程序原生下拉刷新。

另一個問題是，在上拉加載的時候，經(jīng)常會觸發(fā)多次加載事件，顯然是不符合需求的，解決方法可以為加載事件添加一個加載狀態(tài)，默認(rèn) true，觸發(fā)加載時置為 false，待事件全部執(zhí)行完畢后再修改為 true。

//wxml

微信小程序不支持原生頁面跳轉(zhuǎn)，包括 html 和 js，若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁面，需要使用 wx.navigateTo(OBJECT)，詳見 wx.navigateTo API。若要跳轉(zhuǎn) H5 頁面，就需要用到 web-view 組件了。
web-view 組件是一個可以用來承載網(wǎng)頁的容器，會自動鋪滿整個小程序頁面。

web-view指向的 H5 鏈接必須要在小程序后臺配置白名單。

若要實(shí)現(xiàn)動態(tài)跳轉(zhuǎn)，只需要動態(tài)傳參到 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()
}

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

自定義循環(huán)變量使用 wx:for-item="i"。

微信小程序開發(fā)者文檔