总结开发过程踩到的坑(五)(小程序篇)
最近开始接触了小程序的开发,由于时间问题,文档阅读的并不完备,也踩了很多坑。不得不说,微信的野心真是越来越大了,但是它超高的流量注定了它有这个资本。
原文地址:mini programs
目录
- scroll-view 的使用
- 关于 Swiper 的使用
- 下拉刷新与上拉加载
- web-view 的使用
- 其它涉及到的内容
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}}"> </text>
自定义循环变量使用 wx:for-item="i"。