总结开发过程踩到的坑(五)(小程序篇)

cc工作学习有感 2019-06-27

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

原文地址:mini programs


目录

  1. scroll-view 的使用
  2. 关于 Swiper 的使用
  3. 下拉刷新与上拉加载
  4. web-view 的使用
  5. 其它涉及到的内容

1. scroll-view 的使用

官方提供了 scroll-view(可滚动视图区域)组件,开发者可以很方便对其进行配置。
在使用过程中,必须要指定 scroll-view 的一个固定高度,所以在某些情况下需要动态为该组件添加高度.

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

参考文献

微信小程序开发者文档

相关推荐

戴翔的技术 / 0评论 2020-02-03