原生小程序生命周期，路由跳转，本地存储等详解

原生小程序生命周期，路由跳转，本地存储等详解

生命周期，路由跳转，本地存储等API详解
原生小程序（Native Mini Program）是一种在微信小程序平台上开发的小程序类型，与传统的小程序开发方式（基于小程序框架）不同，原生小程序更加灵活，但也需要开发者自行处理更多的细节和逻辑。下面是一些原生小程序的常用API和功能的详解总结：

小程序api - 生命周期

1.应用生命周期

1. onLaunch

在小程序初始化时，会触发onLaunch生命周期函数。一般用于进行全局数据的初始化和获取，例如获取用户信息、检查登录状态等。

App({
  onLaunch: function () {
    // 小程序初始化时触发
    // 进行全局数据的初始化和获取
  }
})

2. onShow - 小程序启动或切换到前台

当小程序启动或从后台切换到前台时，会触发onShow生命周期函数。在这个阶段，可以执行一些需要实时更新的操作，比如获取用户位置、更新数据等。

App({
  onShow: function () {
    // 小程序启动或切换到前台时触发
    // 执行一些需要实时更新的操作
  }
})

3. onHide - 小程序切换到后台

当小程序切换到后台时，会触发onHide生命周期函数。在这个阶段，可以进行一些清理操作，比如保存用户数据、停止定时器等。

App({
  onHide: function () {
    // 小程序切换到后台时触发
    // 进行一些清理操作
  }
})

4. onError - 小程序发生错误

当小程序发生错误时，会触发onError生命周期函数。一般用于捕捉并处理小程序运行时的异常情况，例如网络请求失败、数据解析错误等。

App({
  onError: function (error) {
    // 小程序发生错误时触发
    // 处理小程序运行时的异常情况
  }
})

2.页面生命周期

1. onLoad

当页面加载时，会触发onLoad生命周期函数。一般在这个阶段进行页面初始化和数据加载的操作，例如请求数据、初始化参数等。

参数可以获取 wx.navigateTo 和 wx.redirectTo 及 <navigator/> 中的 query

Page({
  onLoad: function (options) {
    // 页面加载时触发
    // 进行页面初始化和数据加载的操作
  }
})
 // options：页面跳转过来携带的参数对象
 onLoad(options) {
    console.log('App onLoad');
  },

2. onShow

当页面显示时，会触发onShow生命周期函数。一般用于执行一些需要实时更新的操作，比如更新数据、刷新界面等。

页面显示。每次打开页面都会调用一次。

Page({
  onShow: function () {
    // 页面显示时触发
    // 执行一些需要实时更新的操作
  }
})

3. onReady

当页面初次渲染完成时，会触发onReady生命周期函数。一般用于执行一些只能在页面初次渲染完成后才能进行的操作，比如操作 DOM 元素、绑定事件等。

对界面的设置如 wx.setNavigationBarTitle 请在 onReady 之后设置

Page({
  onReady: function () {
    // 页面初次渲染完成时触发
    // 执行一些只能在页面初次渲染完成后才能进行的操作
  }
})

6. onHide

当页面隐藏时，会触发onHide生命周期函数。一般用于执行一些页面隐藏时需要处理的操作，比如停止动画、清除定时器等。

当 navigateTo 或底部 tab 切换时调用。

Page({
  onHide: function () {
    // 页面隐藏时触发
    // 执行一些页面隐藏时需要处理的操作
  }
})

7. onUnload 页面卸载

当页面被卸载时，会触发onUnload生命周期函数。一般用于执行一些页面卸载时需要处理的操作，比如释放资源、取消订阅等。

当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用

Page({
  onUnload: function () {
    // 页面卸载时触发
    // 执行一些页面卸载时需要处理的操作
  }
})

3.组件生命周期

组件生命周期指的是小程序中自定义组件从创建到销毁的整个过程。小程序的组件生命周期主要包含以下几个关键阶段：

1. created

当组件实例被创建时，会触发created生命周期函数。在这个阶段，可以进行一些组件实例的初始化操作。

Component({
  created: function () {
    // 组件实例被创建时触发
    // 进行组件实例的初始化操作
  }
})

2. attached - 组件被添加到页面节点树

当组件被添加到页面节点树时，会触发attached生命周期函数。一般用于执行一些组件加载和渲染的操作。

Component({
  attached: function () {
    // 组件被添加到页面节点树时触发
    // 执行一些组件加载和渲染的操作
  }
})

3. ready - 组件初次渲染完成

当组件初次渲染完成时，会触发ready生命周期函数。一般用于执行一些只能在组件初次渲染完成后才能进行的操作。

Component({
  ready: function () {
    // 组件初次渲染完成时触发
    // 执行一些只能在组件初次渲染完成后才能进行的操作
  }
})

4. detached - 组件被从页面节点树移除

当组件被从页面节点树移除时，会触发detached生命周期函数。一般用于执行一些组件卸载和清理的操作。

Component({
  detached: function () {
    // 组件被从页面节点树移除时触发
    // 执行一些组件卸载和清理的操作
  }
})

小程序api -跳转页面

1. 标签跳转

   <navigator url="........"></navigator>
   

2. wx.navigateTo

跳转后左上角有返回小箭头,点击可返回原本页面.

 wx.navigateTo({
      url: '/pages/calculator/calculator',
    })

3. wx.redirectTo

关闭当前页面，跳转到应用内的某个页面、跳转后左上角没有返回小箭头

 wx.redirectTo({
      url: '/pages/calculator/calculator',
    })

4. wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转 tabbar 页面.

 wx.switchTab({
      url: '/pages/calculator/calculator',
    })

5. wx.reLaunch

关闭所有页面，打开到应用内的某个页面。左上角不会出现返回箭头

 wx.reLaunch({
      url: '/pages/calculator/calculator',
    })

微信小程序本地存储

• 异步存储：wx.setStorage

  • wx.setStorage({
      key:"key",
      data:"value",
      encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
      success() {
        //设置本地存储后的回调
      }
    }
    

• 同步存储：wx.setStorageSync 存入一个数据，复杂类型数据不需要 JSON.stringify 处理

• 异步获取：wx.getStorage

• 同步获取：wx.getStorageSync 读取本地key数据，复杂类型数据不需要 JSON.parse 处理

• wx.removeStorageSync(key) 删除本地key数据

• wx.clearStorageSync()清空本地全部数据

小结：
wx.setStorage 与 wx.setStorageSync的区别是：
wx.setStorage为异步存储–无论方法执行成功与否，都会继续向下执
wx.setStorageSync为同步存储–必须要同步方法处理完，程序才能继续向下执行
使用异步,性能会更好;而使用同步,数据会更安全。

以上就是原生小程序生命周期，路由跳转，本地存储等详解请求时感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…