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

2023年2月7日 107次阅读来源: 水杯中的大海


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

原文地點：mini programs

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

參考文獻

微信小順序開闢者文檔

    原文作者：水杯中的大海
    原文地址: https://segmentfault.com/a/1190000015195451
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网