总结开发过程踩到的坑（五）（小程序篇）

2024年5月24日 150次阅读来源: 水杯中的大海


最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。不得不说，微信的野心真是越来越大了，但是它超高的流量注定了它有这个资本。

原文地址：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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网