学习微信小程序day03

  1. 前边有说到在js中Page中定义了一些关于用户行为的函数,这里详细了解一下。
  • 下拉刷新onPullDownRefresh,需要在app.json中windows选项或者page.json设置enablePullDownRefresh为true。当处理完数据刷新之后可以使用wx.stopPullDownRefresh停止当前页面的下拉刷新。 image.png image.png
  • 上拉触底onReachBottom,监听用户上拉触底事件,同样可以在app.json或者对应页面的json文件中配置onReachBottomDistance滑动距离。
  • 页面滚动onPageScroll,监听用户滑动页面事件,参数为Object,包含scroll字段,表示页面在垂直方向已滚动的距离。 image.png
  • 用户转发,onShareAppMessage,只有定义了此事件处理函数,右上角才会显示转发按钮,这个函数需要返回一个Object,包含title和path字段。用户点击右上角转发按钮之后可以根据返回的title和path来自定义转发页面。 image.png
  1. 页面跳转和路由,一个小程序有多个页面,可以通过wx.navigateTo推入一个新的页面,每使用一次页面就会多一个层级,这里把多个层级称为页面栈。
  • 小程序宿主环境限制了最多有十个层级,使用wx.navigateTo会多一个层级,使用wx.navigateBack可以退出最上面的层级,会使层级减少一个。当达到十个层级之后就无法完成页面的跳转。只能使用wx.redirectTo进行页面跳转,它是将最上面的一层级变成wx.redirectTo跳转的层级。
  • 在我们使用微信小程序的时候会发现有些微信小程序底部会有一些tab,这个可以在app.json使用tabbar字段来定义Tabbar,当在Pages中使用wx.switchTab可以跳转到已经定义为tabbar的页面,只有使用该方法才能跳转到称为tabbar的页面,并且使用该方法之后,原先wx.navigateTo产生的页面栈会消失除了已经称为tabbar的页面。当用户通过点击底部tab完成页面的切换的时候,并不会触发onLoad方法,因为成为tabbar的页面不会被销毁。 image.png image.png
  • 重启小程序,使用wx.reLaunch({url:"PageA"}),小程序完成重启并打开PageA,此时的页面栈之后PageA image.png
  • 页面路由之后触发的生命周期函数 image.png
  1. 小程序的组件,组件就是一组一组的标签,这些标签会有自己特有的属性,根据这些属性来描述这个组件
  • 这就是一个图片组件,当然组件内也可以嵌套组件。 image.png
  • 其他组件的属性可以在微信官方文档中查询到
  1. 微信小程序的API使用
  • 微信客户端内置了很多API,一般都是使用wx.调用。
  • wx.on*一般是监听某个事件发生的接口,它的参数是一个callback函数,当这个时间发生之后会调用callback函数。
  • API一般都会接受一个Object作为参数,而且都会有success,fail,complete这个三个函数。
  • wx.get*一般都是获取宿主环境数据的接口
  • wx.set*一般都是设置宿主环境数据的接口
  • 使用wx.request发起网络请求,有点类似于html中的ajax。 image.png
  • url是发起请求的地址,data是携带的参数,header定义了数据类型,当请求成功之后会调用success函数,当请求失败会调用fail函数,不管请求成功还是失败都会调用complete函数。
  1. 小程序的事件,事件就是用户触发了一个逻辑,然后这个逻辑会调用其他的逻辑。比如说用户触发了长按这个事件,然后这个事件可能会调用一个函数并且执行这个函数。
  • 使用bindtap事件绑定一个函数,并定义这个函数 image.png image.png
  • 在这个view标签中使用了data-x属性,这是自定义属性,可以给其赋值,通过打印eve可以看到这个值。 image.png
  • 这里列举一下常用的事件 image.png
  • 当这个事件触发之后会传递给绑定函数一个参数,这个参数在上边截图中我打印了一下,对应的字段以及作用列举一下,通过调用这些字段可以获取到一些值 image.png

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×