@tmsfe/tms-core 0.0.100 → 0.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmsfe/tms-core",
-  "version": "0.0.100",
+  "version": "0.0.102",
   "description": "tms运行时框架",
   "repository": {
     "type": "git",

package/src/report/clone.ts

@@ -86,32 +86,6 @@ function deepClone(obj: any, depth = 0, maxDepth = 2): any {
   return newObj;
 }
 
-/**
- * 获取触发绑定事件的携带数据
- * @param event
- */
-function getEventExtra(event: any): any {
-  if (!event) {
-    return '';
-  }
-  const { currentTarget, mark, detail } = event;
-  const obj = {};
-  // 一般把数据放在dataset或者mark中
-  const dataset = currentTarget?.dataset;
-  if (dataset && Object.keys(dataset).length) {
-    Object.assign(obj, { dataset });
-  }
-  if (mark && Object.keys(mark).length) {
-    Object.assign(obj, { mark });
-  }
-  // 如果以上都没有，那可能就是在detail中
-  if (detail && Object.keys(obj).length === 0) {
-    Object.assign(obj, { detail });
-  }
-  return deepClone(obj);
-}
-
 export default {
   deepClone,
-  getEventExtra,
 };

package/src/report/proxy/component.ts

@@ -5,10 +5,6 @@
 
 // / <reference path='./types.ts'/>
 
-// uniapp转换工具执行之后会打开这句注释
-// import Vue from 'vue';
-
-import clone from '../clone';
 import helper from './helper';
 
 // 劫持Component的生命周期
@@ -21,17 +17,20 @@ function proxyLifeMethod(componentName: string, componentOptions: any, methodNam
   let original = obj[methodName] || helper.emptyFunc;
   obj[methodName] = function (...args: any[]): any {
     // 生命周期函数先发埋点，避免次过程用户退出而丢失埋点
-    const data = clone.deepClone(this.data);
-    // vue下组件ready事件名是mounted，这里统一改为跟小程序一样用ready
-    const funcName = methodName === 'mounted' ? 'ready' : methodName;
-    const eventName = `Component_${componentName}_${funcName}`;
-    helper.reportData(eventName, data);
+    reportLifeEvent(this, componentName, methodName);
     // 执行原函数
     return helper.executeFunc(this, original, args, helper.emptyFunc);
   }
   /* eslint-enable */
 }
 
+// 上报生命周期事件
+function reportLifeEvent(instance: any, componentName: string, methodName: string): void {
+  const data = helper.cloneData(instance);
+  const eventName = `Component_${componentName}_${methodName}`;
+  helper.reportData(eventName, data);
+}
+
 // 劫持绑定事件
 function proxyBindEvent(componentName: string, methods: any, methodName: string, bindType: string): void {
   const original = methods[methodName];
@@ -42,8 +41,8 @@ function proxyBindEvent(componentName: string, methods: any, methodName: string,
   methods[methodName] = function (...args: any[]): any {
     // 执行原函数之后再发埋点
     return helper.executeFunc(this, original, args, () => {
-      const extra = clone.getEventExtra(args[0]) ; // 把触发事件附加数据也带上
-      const data = clone.deepClone(this.data);
+      const extra = helper.getEventExtra(args[0]) ; // 把触发事件附加数据也带上
+      const data = helper.cloneData(this);
       const eventName = `Component_${componentName}_${methodName}`;
       helper.setLastBindEvent({ eventName, data, extra, bindType });
       helper.reportData(eventName, data, extra, bindType);
@@ -72,22 +71,39 @@ function proxyMpComponent(): void {
 
 // 劫持vue的Component
 function proxyVueComponent(): void {
+  const isComponent = function (options): boolean {
+    // options可能为空
+    // uniapp转换之后，Component的tmsAutoReport被放在组件属性中，而Page的被放在data中
+    return options?.tmsAutoReport;
+  };
+
+  // uniapp转换工具之后后会插入import Vue的
   // @ts-ignore
   Vue.mixin({
     beforeCreate() {
       const options = this.$options;
-      // 有组件名则不是页面
-      if (!options.tmsAutoReport || !options.tmsComponentName) {
+      if (!isComponent(options)) {
         return;
       }
 
       const { methods } = options;
+      if (methods.tmsReportBinded) {
+        return;
+      }
+      // 加个标记，避免二次挂载时重复劫持
+      methods.tmsReportBinded = () => {};
+
       for (const event of options.tmsReportEvents) {
         const { name, type } = event;
         proxyBindEvent(options.tmsComponentName, methods, name, type);
       }
+    },
 
-      proxyLifeMethod(options.tmsComponentName, options, 'mounted');
+    mounted() {
+      const options = this.$options;
+      if (isComponent(options)) {
+        reportLifeEvent(this, options.tmsComponentName, 'ready');
+      }
     },
   });
 }

package/src/report/proxy/helper.ts

@@ -5,6 +5,8 @@
 
 // / <reference path='./types.ts'/>
 
+import clone from '../clone';
+
 function getReporter(): any {
   // 如果是在app.js的onLaunch中调用，则没有getApp().tms为空
   const tms = getApp()?.tms || (wx as any).tms;
@@ -97,12 +99,55 @@ function executeFunc(context: any, func: Function, args: any[], callback: Functi
   });
 }
 
+/**
+ * 复制组件的data
+ * @param instance 组件实例
+ */
+function cloneData(instance: any): any {
+  if (!wx.isH5) {
+    return clone.deepClone(instance.data);
+  }
+
+  // 取出vue的props跟data
+  const data = { ...instance.$options.propsData };
+  if (instance.$options.data) {
+    Object.assign(data, instance.$options.data());
+  }
+  return clone.deepClone(data);
+}
+
+/**
+ * 获取触发绑定事件的携带数据
+ */
+function getEventExtra(event: any): any {
+  if (!event) {
+    return '';
+  }
+  const { currentTarget, mark, detail } = event;
+  const obj = {};
+  // 一般把数据放在dataset或者mark中
+  const dataset = currentTarget?.dataset;
+  if (dataset && Object.keys(dataset).length) {
+    Object.assign(obj, { dataset });
+  }
+  if (mark && Object.keys(mark).length) {
+    Object.assign(obj, { mark });
+  }
+  // 如果以上都没有，那可能就是在detail中
+  if (detail && Object.keys(obj).length === 0) {
+    Object.assign(obj, { detail });
+  }
+  return clone.deepClone(obj);
+}
+
 export default {
   emptyFunc,
+  cloneData,
   reportData,
-  fastReportData,
   executeFunc,
   getSystemInfo,
+  getEventExtra,
+  fastReportData,
   getLastBindEvent,
   setLastBindEvent,
 };

package/src/report/proxy/page.ts

@@ -5,10 +5,6 @@
 
 // / <reference path='./types.ts'/>
 
-// uniapp转换工具执行之后会打开这句注释
-// import Vue from 'vue';
-
-import clone from '../clone';
 import helper from './helper';
 
 // 工具为页面根节点插入的触摸事件
@@ -31,14 +27,19 @@ function proxyLifeMethod(pageOptions: any, methodName: string): void {
   // eslint-disable-next-line no-param-reassign
   pageOptions[methodName] = function (...args: any[]): any {
     // 生命周期函数先发埋点，避免次过程用户退出而丢失埋点
-    const extra = getPageLifeExtra(this, methodName, args);
-    helper.reportData(`Page_${methodName}`, extra);
+    reportLifeEvent(this, methodName, args);
 
     // 执行原函数
     return helper.executeFunc(this, original, args, helper.emptyFunc);
   };
 }
 
+// 上报生命周期事件
+function reportLifeEvent(instance: any, methodName: string, args: any[]): void {
+  const extra = getPageLifeExtra(instance, methodName, args);
+  helper.reportData(`Page_${methodName}`, extra);
+}
+
 // 获取生命周期函数上报时的附加信息
 function getPageLifeExtra(page: any, methodName: string, args: any[]): IPageLifeExtra | IPageTouchExtra {
   /* eslint-disable */
@@ -94,10 +95,10 @@ function proxyBindEvent(pageOptions: any, methodName: string, bindType: string):
   }
   // eslint-disable-next-line no-param-reassign
   pageOptions[methodName] = function (...args: any[]): any {
-    const extra = clone.getEventExtra(args[0]) ; // 把触发事件附加数据也带上
+    const extra = helper.getEventExtra(args[0]) ; // 把触发事件附加数据也带上
     // 执行原函数之后再发埋点
     return helper.executeFunc(this, original, args, () => {
-      const data = clone.deepClone(this.data);
+      const data = helper.cloneData(this);
       const eventName = `Page_${methodName}`;
       helper.setLastBindEvent({ eventName, data, extra, bindType });
       helper.reportData(eventName, data, extra, bindType);
@@ -126,24 +127,54 @@ function proxyMpPage(): void {
 
 // 劫持vue的Page
 function proxyVuePage(): void {
-  // @ts-ignore
-  Vue.mixin({
+  const isPage = (options): boolean => {
+    // options可能为空
+    // uniapp转换之后，Component的tmsAutoReport被放在组件属性中，而Page的被放在data中
+    if (!options?.data) {
+      return false;
+    }
+
+    // todo: 不知为啥非我们自定义页面或组件这里会报错
+    try {
+      return options.data().tmsAutoReport;
+    } catch {
+      return false;
+    }
+  };
+
+  const mixinObj = {
     beforeCreate() {
       const options = this.$options;
-      // 有组件名则不是页面
-      if (!options.tmsAutoReport || options.tmsComponentName) {
+      if (!isPage(options)) {
         return;
       }
 
-      for (const methodName of lifeMethods) {
-        proxyLifeMethod(options, methodName);
+      const { methods } = options;
+      if (methods.tmsReportBinded) {
+        return;
       }
-      for (const event of options.tmsReportEvents) {
+      // 加个标记，避免二次挂载时重复劫持
+      methods.tmsReportBinded = () => {};
+
+      const { tmsReportEvents } = options.data();
+      for (const event of tmsReportEvents) {
         const { name, type } = event;
-        proxyBindEvent(options.methods, name, type);
+        proxyBindEvent(methods, name, type);
       }
     },
-  });
+  };
+
+  for (const methodName of mustLifeMethods) {
+    mixinObj[methodName] = function (...args: any[]) {
+      if (isPage(this.$options)) {
+        reportLifeEvent(this, methodName, args);
+      }
+    };
+  }
+
+  // uniapp转换工具之后后会插入import Vue的
+  // @ts-ignore
+  Vue.mixin(mixinObj);
 }
 
 // 劫持Page