extend-sdk文档
发布于 4 年前 作者 zqiao 3062 次浏览 来自 分享

简介

小程序扩展SDK是使用装饰器模式扩展生命周期，接入后，自动扩展小程序App、Page、Component的生命周期，提供更加丰富的生命周期扩展的工具。

功能介绍

  • 新增已登录的页面生命周期
  • 新增分享完成的回调
  • 新增组件已登录生命周期
  • 新增App生命周期，监听来自页面的onLoad，onShow，onHide，onUnload等
  • 页面自动加上分享（含朋友圈）、并支持分享的兜底配置
  • 获取当前页面显示/隐藏状态
  • 获取页面展示次数（onShow调用次数）
  • 小程序定时器管理
  • 节流抖动观察者模式

快速接入SDK

  • 下载extend-sdk-config.js、extend-sdk.js，并放在utils目录下

  • 在app.js里引用sdk

    import {
  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)
});
}
})

1 回复

good，建议继续优化下。

回到顶部