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

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

原文地址：mini programs

scroll-view 的使用

關(guān)于 Swiper 的使用

下拉刷新與上拉加載

web-view 的使用

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

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

//wxml


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

注：使用 scroll-view 時(shí)會(huì)阻止頁(yè)面回彈，所以在 scroll-view 中滾動(dòng)，無(wú)法觸發(fā) onPullDownRefresh

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

//wxml

    
        
    

     
     
       
     


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

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

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

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

//wxml



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

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

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

//wxml

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

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

若要實(shí)現(xiàn)動(dòng)態(tài)跳轉(zhuǎn)，只需要?jiǎng)討B(tài)傳參到 web-view 所在頁(yè)面就可以了

//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()
}

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

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

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