置顶extend-sdk文档精选热门

2020-09-14

6470浏览

1评论

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

简介

小程序扩展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)
        });
    }
})

最后一次编辑于 2020-09-14

分享评论

1 个评论

Kindear
2020-09-14
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
good，建议继续优化下。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2020-09-14
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

请登录后发表内容

作者介绍

文章标签

AppsdkComponent定时器管理库Page

置顶extend-sdk文档精选热门

简介

功能介绍

快速接入SDK

验证是否接入成功

功能介绍

新增页面生命周期(Page)

新增组件生命周期(Component)

新增应用生命周期（App）

页面新增对象

组件新增对象

管理定时器

配置分享兜底数据

额外功能

节流

抖动

自定义事件

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号