小程序的一些东西

OVO
205 阅读5分钟

一、小程序的生命周期

小程序的生命周期分为 应用的生命周期 和 页面的生命周期

应用的生命周期：

生命周期说明
onLaunch小程序初始化完成时触发，全局只触发一次
onShow小程序启动，或从后台进入前台显示时触发
onHide小程序从前台进入后台时触发
onError小程序发生脚本错误或 API 调用报错时触发
onPageNotFound小程序要打开的页面不存在时触发
onUnhandledRejection()小程序有未处理的 Promise 拒绝时触发
onThemeChange系统切换主题时触发

页面的生命周期：

生命周期说明作用
onLoad生命周期回调—监听页面加载发送请求获取数据
onShow生命周期回调—监听页面显示请求数据
onReady生命周期回调—监听页面初次渲染完成获取页面元素（少用）
onHide生命周期回调—监听页面隐藏终止任务，如定时器或者播放音乐
onUnload生命周期回调—监听页面卸载终止任务
  • 下拉刷新：onPullDownRefresh
  • 上拉加载：onReachBottom
  • 点击右上角分享：onShareAppMessage
  • 分享朋友圈：onShareTimeline

组件生命周期：

生命周期说明
created生命周期回调—监听页面加载
attached生命周期回调—监听页面显示
ready生命周期回调—监听页面初次渲染完成
moved生命周期回调—监听页面隐藏
detached生命周期回调—监听页面卸载
error每当组件方法抛出错误时执行

注意：

  • 组件实例刚刚被创建好时， created 生命周期被触发，此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data ， 此时不能调用 setData

  • 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行

  • 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发

执行过程：

三、执行过程

应⽤的⽣命周期执行过程：

  • ⽤户⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
  • ⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显示
  • ⼩程序从前台进⼊后台，触发 onHide⽅法
  • ⼩程序从后台进⼊前台显示，触发 onShow⽅法
  • ⼩程序后台运⾏⼀定时间，或系统资源占⽤过⾼，会被销毁

⻚⾯⽣命周期的执行过程：

  • ⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
  • ⻚⾯载⼊后触发onShow⽅法，显示⻚⾯
  • ⾸次显示⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
  • 当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
  • 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
  • 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload

当存在也应用生命周期和页面周期的时候，相关的执行顺序如下：

  • 打开小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
  • 进入下一个页面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
  • 返回上一个页面：(curr)onUnload --> (pre)onShow
  • 离开小程序：(App)onHide
  • 再次进入：小程序未销毁 --> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.

二、小程序中父子组件互传

父传子

  1. 首先在父组件的子标签上声名一个自定义属性 属性值就是要传递的数据
  2. 在子组件的 properties 中进行接收

子传父

  1. 在子组件当中通过this.triggerEvent("自定义事件名"，要传递的数据)
  2. 在父组件的子标签中声名自定义事件 bind:自定义事件名="事件名"
  3. 在父组件的事件当中进行接收

三、类似于但是并不等于 ref 的方法

  1. 首先在父组件的子标签上起一个id名方便查找
<view>
  <first-component id="mycomp"/>
</view>
  1. 通过this.selectComponent方法查找子组件
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log(this);
	// 获取子组件的数据
    console.log(this.selectComponent("#mycomp").data);
	// 调用子组件的方法
    this.selectComponent("#mycomp").huanghaili()
    debugger
  }
})


调用子组件方法 this.selectComponent("#mycomp").huanghaili()  
查找子组件的属性 this.selectComponent("#mycomp").data

四、小程序使用内置的 weui 组件

  1. 通过 npm i weui-miniprogram 安装依赖

  2. 在工具中 构建npm

  3. 引入 全局样式

  4. 报错处理 project.config.json 中配置

      "setting": {
    "ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,
   }

  5. 页面中引入组件

  6. 使用组件

  7. 详情见： wechat-miniprogram.github.io/weui/docs/q…

五、小程序中的app.json全局配置

blog.csdn.net/weixin_3877…

六、小程序的路由跳转

方式解释
wx.navigateTo保留当前页面，跳转到应用内的某个页面 有返回键，不可以跳转到tabBar页面
wx.switchTab没有返回键，只能跳转到tabBar页面，不可以携带参数
wx.reLaunch跳转任意页面， 没有返回， 有 首页 按钮
wx.redirectTo只可以跳转tabBar 页面， 没有返回，但有首页按钮
wx.navigateBack应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级

跳转路由传递参数

通过 ？ 拼接的方式 多个的话就用 & 拼接

  1. url: '/pages/detail/detail?productId=12345'
  2. url: '/pages/detail/detail?infoStr='+infoStr

接收路由传递的参数

在跳转页面的 onLoad 生命周期里面进行接收

avatar
文章
阅读
粉丝