简介
小程序扩展SDK是使用装饰器模式扩展生命周期,接入后,自动扩展小程序App
、Page
、Component
的生命周期,提供更加丰富的生命周期扩展的工具。
功能介绍
- 新增已登录的页面生命周期
- 新增分享完成的回调
- 新增组件已登录生命周期
- 新增App生命周期,监听来自页面的onLoad,onShow,onHide,onUnload等
- 页面自动加上分享(含朋友圈)、并支持分享的兜底配置
- 获取当前页面显示/隐藏状态
- 获取页面展示次数(onShow调用次数)
- 小程序定时器管理
- 节流抖动观察者模式
快速接入SDK
-
下载extend-sdk-config.js、extend-sdk.js,并放在utils目录下
-
在
app.js
里引用sdkimport { es_event } from './utils/extend-sdk.js';
-
登陆完成后触发
es_event.emit('es_login');
// 例如 App({ onLaunch(){ this.login(); }, login(){ wx.login({ success: (res) => { wx.request({ url:"你的登陆URL", methon:"POST", data:{code:res.code}, success(res){ // 登陆成功 es_event.emit('es_login') } }) }); } })
-
若不需要接入登陆事件,可在onLaunch直接触发事件
import { es_event } from './utils/extend-sdk.js';
App({ onLaunch(){ es_event.emit(‘es_login’); } })
验证是否接入成功
-
在页面
onShow
打印es_pageShowCount
Page({ onShow(){ console.log("=== es_pageShowCount ===",this.es_pageShowCount) } })
- 若
es_pageShowCount
打印结果是1,则说明extend-sdk.js
引入成功
- 若
-
在页面监听
es_onShow
Page({ es_onShow(){ console.log("=== 当前已登陆,并且页面显示 ===") } })
- 若打印出
=== 当前已登陆,并且页面显示 ===
,则代表sdk成功接收到登陆事件,恭喜你,已全部接入完成
- 若打印出
-
若没有打印出预期,请重新检查接入步骤
功能介绍
新增页面生命周期(Page)
-
es_onLoad(Object query)
- 页面加载且已登录时触发;
- 一个页面只会调用一次;
- query:打开当前页面路径中的参数
// 应用场景:不用手动判断用户是否已登录 Page({ es_onLoad(){ // 获取我的优惠券 this.getCoupon(); }, getCoupon(){ // 用户已登陆,直接请求服务端获取优惠券列表 } })
-
es_onShow()
-
页面显示/切入前台且已登录时触发
Page({ es_onShow(){ // 刷新最新邀请进度 this.getInviteInfo(); }, getInviteInfo(){ // 用户已登录,直接请求获取邀请进度数据 } })
-
-
es_onHide()
- 页面隐藏/切入后台且已登录时触发
-
es_onUnload
- 页面卸载且已登录时触发
-
es_onShareAppMessage
-
页面完成分享,回到页面时触发
// 应用场景 Page({ es_onShareAppMessage(){ // 完成分享后奖励逻辑、比如赠送积分 } })
-
-
es_onShareTimeline
-
页面完成分享到朋友圈,回到页面时触发
// 应用场景 Page({ es_onShareAppMessage(){ // 完成分享到朋友圈后奖励逻辑、比如赠送积分 } })
-
新增组件生命周期(Component)
-
es_onLoad
-
当页面加载,并且已登陆时触发
// 应用场景:保证用户已登录再发起 Component({ methods(){ es_onLoad(){ this.getCollectProduct(); }, getCollectProduct(){ // 发起请求,获取用户收藏的商品列表 } } })
-
-
es_onShow
-
当页面加载,并且已登陆时触发
// 应用场景:保证用户已登录再发起 Component({ methods(){ es_onShow(){ this.getCollectProduct(); }, getCollectProduct(){ // 发起请求,获取用户收藏的商品列表 } } })
-
-
es_onReachBottom
-
当页面触底时,触发组件里的es_onReachBottom方法
// 应用场景:在自定义组件,实现列表分页功能
Component({ pageIndex:1, // 当前分页页码 pageSize:10, // 每次分页数量 methods(){ es_onReachBottom(){ this.getList(); }, getList(){ wx.request({ url:“获取列表URL”, data:{ pageIndex, pageSize }, success:(res)=>{ // 请求结果 } }) } }, })
-
新增应用生命周期(App)
-
es_pageOnLoad(that)
-
每次页面进行onLoad且已登录时,都会调用全局es_pageOnLoad
-
query:打开当前页面路径中的参数
// 应用场景:自定义统计上报 App({ es_pageOnLoad(that){ console.log("页面加载"); console.log("获取页面打开参数:",that.options) // 上报页面加载事件 } })
-
-
es_pageOnShow(that)
-
每次页面进行onShow且已登录时,都会调用全局es_pageOnShow
// 应用场景:自定义统计上报 App({ es_pageOnLoad(){ console.log("页面显示"); // 上报页面显示事件 } })
-
-
es_pageOnHide(that)
-
每次页面进行onHide且已登录时,都会调用全局es_pageOnHide
// 应用场景:自定义统计上报 App({ es_pageOnLoad(){ console.log("页面隐藏"); // 上报页面隐藏事件 } })
-
-
es_pageOnUnload(that)
-
每次页面进行onUnload且已登录时,都会调用全局es_pageOnUnload
// 应用场景:自定义统计上报 App({ es_pageOnLoad(){ console.log("页面销毁"); // 上报页面销毁事件 } })
-
-
es_pageOnPageScroll(that)
-
监听页面滚动事件
-
可在配置文件关闭
// 应用场景: 处理收集曝光,比如上报商品曝光 App({ es_pageOnPageScroll(){ console.log("页面滚动"); // 上报商品曝光 } })
-
页面新增对象
-
es_pageShowCount
-
每次页面显示,都会自增
// 应用场景:刷新用户邀请进度 Page({ es_onLoad(){ wx.showLoading({ title:"加载数据中..." }) this.getInviteData(); }, es_onShow(){ if(this.es_pageShowCount>1){ this.getInviteData(); } }, getInviteData(){ // 获取邀请数据的逻辑 wx.request({ url:"邀请数据URL", success:(res)=>{ if(this.es_pageShowCount === 1){ wx.hideLoading(); } } }) } })
-
-
options
- 获取页面参数
Page({ onShow(){ console.log("页面参数 =",this.options) } })
-
es_pageShow
- 当前页面是显示,还是隐藏
Page({ onLoad(){ setInterval(()=>{ console.log(this.es_pageShow) },1000) } }) // 当页面在显示时,this.es_pageShow 为 true; // 当页面在后台时,this.es_pageShow 为 false;
-
es_allComponent
- 自动挂载页面使用到的组件对象,以ID选择器作为key
// 在index.wxml 引入自定义组件 Page({ onLoad(){ console.log(this.es_allComponent) } })
组件新增对象
-
es_page
- 当前页面对象
Component({ ready() { console.log("当前组件挂载的页面对象:", this.es_page); }, });
管理定时器
-
功能
- 解决:由于定时器是全局的,并不是跟页面绑定的,需要手动回收
-
自动回收定时器
- 实现定时器暂停和恢复
-
页面上使用
-
es_setInterval(fn,time)
- fn:代表定时器回调
- time:执行的频率(毫秒)
- 返回定时器ID
// 示例: Page({ onLoad(){ this.es_setInterval(()=>{ console.log("我是定时器") },1000) } })
// 执行后,点击模拟器Home,定时器会自动回收; // 显示页面时,定时器会重新启动
-
es_setTimeout(fn,time)
-
fn:回调函数
-
time:延时器时间(毫秒)
-
返回延时器ID
// 示例: Page({ onLoad(){ this.es_setTimeout(()=>{ console.log("我是延时器,5s后触发") },5000) } })
// 执行后,点击模拟器Home,延时器会自动暂停; // 显示页面时,延时器会自动重启
-
-
es_clearInterval(定时器ID)
- 主动清除定时器
- 备注:可不使用,页面隐藏、销毁sdk会自动回收
-
es_clearTimeout(延时器ID)
- 主动清除延时器
- 备注:可不使用,页面隐藏、销毁sdk会自动回收
-
-
组件里使用
Component({ ready(){ // 使用定时器 let intervalID = this.es_page.es_setInterval(()=>{ consol.log("定时器") },1000); // 使用延时器 let timeoutID = this.es_page.es_setTimeout(()=>{ consol.log("延时器") },1000); // 清除定时器 this.es_page.es_setInterval(intervalID); // 清除延时器 this.es_page.es_setTimeout(timeoutID); } })
配置分享兜底数据
-
分享给好友
onShareAppMessage() { return { title: "", // 分享标题 imageUrl: "", // 分享图片 path: "", // 分享路径 params: { key:"", // 自动添加到path的key、value }, }; },
// 例如分销功能,用户小程序分享时,别人从打开,成为分享者下级 // parmas: 所有页面分享时,都携带分享着openid onShareAppMessage() { return { title: “”, // 分享标题 imageUrl: “”, // 分享图片 path: “”, // 分享路径 params: { openid:getApp().userInfo.openid, }, }; },
-
分享到朋友圈
onShareTimeline() { return { imageUrl: "", title: "分享到朋友圈", query: "", params: { from: "来自朋友圈分享", }, }; }, // 当在页面里onShareTimeline不设置query时,query会自动获取页面onLoad的参数
额外功能
节流
-
介绍
- 规定在n秒内,只能触发一次函数。
-
应用场景
- 高频点击提交,表单重复提交
-
示例
import {es_throttle} from "../../utils/extend-sdk.js";
Page({ submitEvent(){ // 在3秒内,多次点击只发起一次请求 es_throttle(()=>{ this.submitData(); },3000) }, submitData(){ // 提交数据到服务端请求的逻辑实现 } })
抖动
-
介绍
- 高频触发时,n秒内只会执行一次,如果n秒内高频事件再次被触发,那么就会重新计算时间
-
应用场景
- 一般的输入框绑定输入事件,每次输入触发就要请求接口的话,会给服务器带来巨大的压力,可用防抖,当用户输入停下来时再发起请求。
-
示例
import {es_debounce} from "../../utils/extend-sdk.js";
Page({ inputEvent(){ // 当用户停止输入1秒后,再发起请求 es_debounce(()=>{ this.getData(); },1000) }, getData(){ // 从服务端获取数据的逻辑实现 } })
自定义事件
-
介绍
- 使用发布订阅模式,实现自定义事件功能
-
应用场景
- 不同组件间相互通信
-
示例
// 组件A import {es_event} from "../../utils/extend-sdk.js"; Component({ methods(){ sendData(){ // 点击组件A事件,触发发起sendData es_event.emit("sendData",{ from:"componentA" }) }, } })
// 组件B import {es_event} from “…/…/utils/extend-sdk.js”; Component({ ready(){ es_event.on(“sendData”,(data)=>{ console.log(“data =”,data) }); } })