微信小程序组件化埋点实践

// 监听的对象(组件内部需要使用组件的this属性)

context: {

type: Function,

value: null,

},

// 选择器

/**

selector类似于 CSS 的选择器，但仅支持下列语法。

ID选择器：#the-id

class选择器（可以连续指定多个）：.a-class.another-class

子元素选择器：.the-parent > .the-child

后代选择器：.the-ancestor .the-descendant

跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant

多选择器的并集：#a-node, .some-other-nodes

*/

selector: {

type: String,

},

// 相交区域，默认为页面显示区域

relativeTo: {

type: String,

value: null,

},

// 是否同时观测多个目标节点,动态列表不会自动增加

observeAll: {

type: Boolean,

value: false,

},

// 是否只观测一次

once: {

type: Boolean,

value: CONFIG.DEFAULT_EXPOSURE_ONCE,

},

// 曝光时长，满足此时长记为曝光一次，单位ms

exposureTime: {

type: Number,

value: CONFIG.DEFAULT_EXPOSURETIME,

},

// 成功曝光后间隔时长，在此时长内不进行观测，单位ms

interval: {

type: Number,

value: CONFIG.DEFAULT_EXPOSURE_INTERVAL,

},

},

lifetimes: {

ready: function () {

if (!this.data.selector) return;

this.ob = new IntersectionObserver({

context: this.data.context ? this.data.context() : null,

selector: this.data.selector,

relativeTo: this.data.relativeTo,

observeAll: this.data.observeAll,

once: this.data.once,

interval: this.data.interval,

exposureTime: this.data.exposureTime,

onFinal: (startTime, endTime) => {

const { event, project, properties } = this.data;

let time = formatDate(new Date(), ‘YYYY-MM-DD hh:mm:ss.S’);

time =

time.length >= 19

? time.slice(0, 19)

${time.slice(0, 17)}0${time.slice(17, 18)};

appendQueue(‘exposure’, {

time,

event,

project,

properties: {

…properties,

startTime,

endTime,<