uni-app学习笔记

vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。

• onLoad: 页面加载
  一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
• onShow: 页面显示
  每次打开页面都会调用一次。
• onReady: 页面初次渲染完成
  一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
  对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
• onHide: 页面隐藏
  当navigateTo或底部tab切换时调用。
• onUnload: 页面卸载
  当redirectTo或navigateBack的时候调用。

• 数据请求

  在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。

关于uni-app的路由跳转的两种方式

1.navigator  标签

<navigator url="demo">  //跳转地址
    <view class="xixi">标签跳转</view>
</navigator>

2.通过@tap时间绑定方法

<view class="menu-item" @tap="toDemo">
    <image src="/static/xixi.png"></image>
    <view class="title">嘻嘻嘻</view>
</view>

methods:{
　　toDemo() {
    　　uni.navigateTo({
  　　  // url: 'new-page/new-vue-page-1?data=Hello'
  　　     url: 'demo' //跳转地址
  　　  })
　　}
}

生命周期函数

 

 

三、生命周期总结

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容