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

Posted 2021-11-24 So istes immer

目录

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)
    }
})