生命周期函数事件处理函数和API

Posted So istes immer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了生命周期函数事件处理函数和API相关的知识,希望对你有一定的参考价值。

目录

js文件中的Page接口,接收一个对象,永远存放页面的初始数据、生命周期回调、事件处理函数等

1.生命周期函数 

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  }
})

2.事件处理函数

有一些官方定义好的函数,你只需要给出触发这个函数时的行为即可,例如:监听用户下拉刷新事件onPullDownRefresh()、监听用户上拉触底事件onReachBottom()等等
也可以自己定义函数。

改变this.data中的值可以用 Page.prototype.setData(Object data, Function callback) 这个方法
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)

通过this.route可以获得当前页面的路径

标签中绑定一个事件处理函数使用bindtap属性

<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<view>{{object.text}}</view>
<button bindtap="changeItemInArray"> Change data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
Page({

  /**
   * 页面的初始数据
   */
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },

  changeText: function() {
    this.setData({
      text: 'changed data'
    })
  },

  changeItemInArray: function() {
    // 对于对象或数组字段,可以直接修改一个其下的子字段
    this.setData({
      'array[0].text':'changed data',
      'object.text': 'changed data'
    })
  },

  // 增加一个数据字段
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

在标签中也可以传值

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

传过来的值这样获取,具体可以自己将函数接收到的形参打印下来看看

tapName: function(event) {
    console.log(event.currentTarget.dataset.hi)
  }

3.API

常用的,比如说

wx.getSystemInfoSync().model

可以得到下面这样的设备型号

wx.showLoading(Object object)

用于显示loading提示框,wx.hideLoading(Object object)用于隐藏loading提示框。

wx.showLoading({
   title: "数据加载中..."
})
setTimeout(res => {
   x.hideLoading()
}, 1500)

 

wx.showToast(Object object)

显示消息提示框,这个提示框不仅可以显示文字,也可以显示图标

wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
})

④路由API

  • wx.switchTab(Object object)只能跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(也就是说跳转之后就不能返回了)
    参数有四个属性
    url(要跳转的 tabBar 页面的路径,但是路径不能携带参数)
    success(接口调用成功的回调函数)
    fail(接口调用失败的回调函数)
    complete(接口调用结束的回调函数)
  • wx.reLaunch(Object object):关闭所有页面,跳转到某个页面,可以是tabBar 页面参数也有上面四个属性,url属性能携带参数

  • wx.redirectTo(Object object):关闭当前页面,跳转到某个页面。不允许跳转到 tabbar 页面。参数也有上面四个属性,url属性不能携带参数

  • wx.navigateTo(Object object):保留当前页面,跳转到某个页面。不能跳到 tabbar 页面。参数也有上面四个属性,url属性能携带参数

之前我们使用navigator标签就能实现页面的跳转,url属性指定跳转路径,但是如果想跳转到 tabBar 页面,还需要修改open-type属性,不同的open-type属性其实就对应了上面的API,具体可查看官方文档。

除navigator标签以外的标签,如果也想实现路由跳转,可以自己给标签绑定事件,在事件中调用上面的API

⑤wx.request(Object object)发起 HTTPS 网络请求

对象参数的一些属性
url:服务器接口地址
data:请求的参数
method:HTTP 请求方法

<view wx:for="{{resData}}" wx:key="id">
    <view>{{item.title}}</view>
    <view>{{item.author}}</view>
</view>
<button bindtap="nextPage" type="primary">下一页</button>
Page({

    /**
     * 页面的初始数据
     */
    data: {
        pagenum: 1,
        resData: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        this.getList();
    },

    getList: function(page = 1) {
        wx.request({
          url: 'https://edu.newsight.cn/wxList.php',
          data: {
              num: 3,
              page: page
          },
          success: res => {
              this.setData({
                  resData: res.data
              })
          }
        })   
    },

    nextPage: function() {
        this.data.pagenum++
        this.getList(this.data.pagenum)
    }
})

以上是关于生命周期函数事件处理函数和API的主要内容,如果未能解决你的问题,请参考以下文章

如何让自定义视图观察包含片段的生命周期事件而不是活动?

关于片段生命周期

Unity---脚本事件函数和生命周期

在视图寻呼机中使用时的片段生命周期

(原创!)彻底理解JS中的事件,事件处理函数,钩子函数,回调函数。

如何修复('throw er; //未处理'错误'事件')代码生命周期?