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

简介

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

功能介绍

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

快速接入SDK

  • 下载extend-sdk-config.jsextend-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,建议继续优化下。

回到顶部