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

young.li 發布于2019-08-29 15:38 / 469人閱讀

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

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

原文地址：mini programs

scroll-view 的使用

關于 Swiper 的使用

下拉刷新與上拉加載

web-view 的使用

其它涉及到的內容

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="i"。

參考文獻

微信小程序開發者文檔

GPU云服務器云服務器存儲過程總結小程序開發開發小程序開發開發制作小程序開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113455.html

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

摘要：最近開始接觸了小程序的開發，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁面跳轉，包括和，若要跳轉小程序應用內頁面，需要使用，詳見。參考文獻微信小程序開發者文檔最近開始接觸了小程序的開發，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。不得不說，微信的野心真是越來越大了，但是它超高的流量注定了它有這個資本。原文地址：mini programs 目...

Cympros 2019-08-26 12:00 評論0 收藏0
總結開發過程踩到的坑（二）

摘要：本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。本文章旨在總結開發過程中碰到的容易忘記或者比較重要的...

laznrbfe 2019-08-22 14:06 評論0 收藏0
總結開發過程踩到的坑（四）

摘要：本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對于該部分的理解，另一方面希望能夠分享給大家，知識在于分享，當然踩過的坑也不例外滑稽。在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑，...

terasum 2019-08-22 15:52 評論0 收藏0