(三)小程序学习笔记——生命周期、API

1、小程序的启动:

冷启动: 如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。

热启动: 如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。

从小程序生命周期的角度来看,我们一般讲的「启动」专指冷启动,热启动一般被称为后台切前台

2、小程序的更新机制:

在访问小程序时,微信会将小程序的代码包缓存到本地。
小程序的更新机有两种:启动时 同步更新,和 启动时 异步更新。
启动时同步更新:微信运行时,会定期检查最近使用的小程序是否有更新,如果有更新,下次小程序启动时会同步进行更新,更新到最新版本后再打开小程序。如果用户长时间未使用小程序,会强制同步检查版本更新。
启动时异步更新:在启动前没有发现更新,小程序每次冷启动时,都会异步检查是否更新版本。如果发现有新版本,将会异步下载新版本的代码包,将新版本的小程序在下一次冷启动进行使用,当前访问使用的依然是本地的旧版本代码。
onLaunch: 是小程序的钩子函数,这个钩子函数在冷启动时肯定会执行,自动向微信后台请求版本信息,如有新版本,会进行立即下载。

3、小程序的生命周期:
一个小程序的生命周期由 应用生命周期、页面生命周期和组件生命周期三部分来组成。
(1) 应用生命周期:指 小程序从 启动 -> 运行 ->销毁 的整个过程
·app.js——应用生命周期函数:onLaunch(小程序初始化)、onShow(小程序启动或切前台)、onHide(小程序切后台)

(2)页面的生命周期:指 页面从 加载-> 运行 ->销毁 的整个过程

页面的js——页面的生命周期函数:onLoad(监听页面加载)、onShow(监听页面展示)、onReady(监听页面渲染完成)、onUnload(监听页面卸载)、onHide(监听页面隐藏)

注意:1、tabBar页面之间相互切换,页面不会被销毁。2、点击左上角返回上一个页面,会销毁当前页面。

4、小程序API:

(1)分类:
  • 异步API:通常接收一个object类型的参数,例如:wx.request({})
  • 同步API:约定以Sync结尾,例如wx.setStorageSync()
  • 时间监听API:约定以on开头,例如onAppHide()

异步API支持callback&Promise两种调用方式:
1、当接口参数Object对象中不包含success、fall、complete时将默认返回Promise

2、部分接口如request、uploadFile本身就有返回值,因此不支持Promise风格调用方式,他们的promisify需要开发者自行封装。

(2)列举介绍:

a、wx.request()发起网络请求; wx.request请求域名必须在微信公众平台进行配置。
b、用于页面交互的api:
wx.showLoading() :显示loading提示框
wx.hideLoading():关闭loading提示框
wx.showToast():消息提示框,根据用户的某些操作来告知操作的结果,例如退出成功给用户提示;提示删除成功等。
wx.showModal():模态对话框(消息确认框),用于询问用户是否执行一些操作。例如:询问用户是否退出登录,是否删除等。
c、小程序 本地 存储API:
同步API:
存储:wx.setStorageSync(key,value) 获取:wx.getStorageSync(key) 删除:wx.removeStorageSync(key) 清空:wx.clearStorageSync()
异步API:
存储:wx.setStorage({key:“”,data:value}) 获取:wx.getStorage({key:“”}) 删除:wx.removeStorage({key:“”}) 清空:wx.clearStorage()
注意:对象类型的数据,直接进行存储,不需要使用JOSN.stringify()、JOSN.parse()转换。
d、编程式导航:
小程序页面跳转的的两种方式:
(1)声明式导航:navigator组件
(2)编程式导航:使用小程序提供的API
在这里插入图片描述

e、页面处理函数:
上拉加载:
(1)在app.json或者page.json中配置举例页面底部距离:onreachBottomDistance
(2)在页面.js中定义onReachBottom事件监听用户上拉加载

下拉刷新:
(1)在app.json或者page.json中开启允许下拉,同事可以配置窗口、loading样式。
(2)在页面.js中定义onPullDownRefresh事件监听用户下拉刷新。
f、scroll-view:实现上拉加载更多和下拉刷新功能。
scroll-view文档说明

<scroll-view scroll-y

 class="scroll-y" 

 lower-threshold="100"   //距离底部/右边多远时,触发scrolltolower事件

 bindscrolltolower="getMore"  //上拉加载更多 滚动到底部/右边时触发

 enable-back-to-top="true"   //iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向

 refresher-enabled="true" //开启下拉刷新

 refresher-default-style="black"  //设置自定义下拉刷新的默认样式,支持设置 black | white | none 

 refresher-background="#f7f7f8" //设置自定义下拉刷新区域背景颜色,默认为透明

 bindrefresherrefresh="refreshHandle"   //下拉刷新触发事件

 refresher-triggered="{{istriggred}}" //设置下拉刷新是否触发,true表示下拉已经被触发,false表示下拉刷新未被触发。(进而可以设置请求成功后关闭下拉状态)
>
  • 30
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值