微信小程序“无埋点”式封装上报

无论什么业务，c端产品的数据统计、埋点上报是很重要的，它可以帮助产品人更好地了解用户行为，以快速响应迭代。

所谓“无埋点”式是指不在业务代码里插入上报代码，将业务代码与上报代码分开，提高项目可维护性和可读性。

除用户点击等行为外，数据上报最常见的可能是页面跳转uv、pv了。
小程序的页面跳转有两种方式实现：1、api，如wx.navigateTo等 2、navigator组件，以下降分别阐述实现方案和目前的结论。

封装api式上报

用到的方法：Object.defineProperty
该方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

事实上vue.js的mvvm双向绑定就是依赖这个方法实现的，有兴趣的同学可以移步剖析Vue原理&实现双向绑定MVVM这篇文章。

我们可以用这个方法来修改全局对象wx下的属性（方法），来实现只要调用wx的方法，即可统一处理需要的目的。
以下是一段实例代码：
/utils/hack.js

const utils = require("./util");
const event = require("./event");

module.exports = () => {
	// 保存原始方法，因为我们不需要修改它的原始跳转逻辑
    const originNavigateTo = wx.navigateTo;
    const originRedirectTo = wx.redirectTo;
    const originSwitchTab = wx.switchTab;
    const originNavigateToMiniProgram = wx.navigateToMiniProgram;

    Object.defineProperty(wx, "navigateTo", {
        configurable: true, // 是否可以配置
        enumerable: true, // 是否可迭代
        writable: true, // 是否可重写
        value: function() {
            const config = arguments[0] || {}; // 获取
            const url = config.url;
            event.navToPage(url); // 上报跳转的url,此处是自己封装的方法，根据个人需要自定义
            return originNavigateTo.apply(this, arguments); // 原样移交函数参数和this
        }
    });

    Object.defineProperty(wx, "redirect", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {};
            const url = config.url;
            event.navToPage(url);
            return originRedirectTo.apply(this, arguments);
        }
    });

    Object.defineProperty(wx, "switchTab", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {};
            const url = config.url;
            event.navToPage(url);
            return originSwitchTab.apply(this, arguments);
        }
    });
    Object.defineProperty(wx, "navigateToMiniProgram", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {};
            const originSuccess = config.success || function(){};
            const originFail = config.fail || function(){};
            config.success = function() {
                Object.assign(config, {
                    result: "success"
                });
                event.navToMp(config);
                originSuccess.apply(this, arguments);
            };
            config.fail = function(res) {
                Object.assign(config, {
                    result: "fail",
                    // errMsg:res.errMsg
                });
                event.navToMp(config);
                originFail.apply(this, arguments);
            };
            return originNavigateToMiniProgram.apply(this, arguments);
        }
    });
};

在app.js中引入运行：

require("./utils/hack.js")()

至此，即可实现使用api跳转页面或小程序时，无埋点上报数据的目的。

navigator

因为是项目做了一半才想要统一无埋点上报的，因此有许多入口是通过navigator组件跳转的。起初为了减少工作量，想对navigator再封装一层，做成自定义组件。

封装很简单，无非是将navigator支持的属性们在自定义组件里写一遍罢了，至多加上自定义class，原样赋其上，再在组件内的navigator上添加bindtap方法做数据上报。

但做了一半才发现遇到了大坑：封装后的自定义组件和navigator对不同style的样式展示不一样，而我又不想一个个去适配他们（多了自定义组件这一层，实际上并不好适配）。

因此最终决定将已有的所有navigator替换成view，以api调用的方式实现跳转，并且navigator组件以后也不再使用，均以api代替。

更新 2019年05月15日10:55:29
小明反馈：使用方法不清楚，遂补充说明：
1、上文的event.navToPage(url);就是自己封装的一个上报请求的方法，原理还是使用wx.request调用后端接口
2、使用方法就是没有使用方法，因为捆绑了wx的api，在调用特定api时就会上报，所以不需要调另外的方法上报