体验Linux小程序小程序PC端访问https://tldr.linux.cn/体验文完成产品基础开发后，去下一步，我们需要做一些周边的工作，这些周边的工具会帮助下一步优化产品。为什么要添加应用统计和崩溃收集很多开发者在开发的时候很少意识到需要添加应用统计和崩溃收集。但是对于一个合格的应用程序来说，这些都是必要的。应用统计：应用统计会在后续的产品迭代中提供数据支持，明确为什么要更新，需要更新什么，为什么要做。崩溃合集：没有人是完美的，很难开发出完美的应用程序，应用程序错误随时都可能发生。报错后，由于用户层次不一，实际有效反馈的很少。Crash收集可以帮助收集必要的Crash信息，以便在后续的开发过程中有针对性地修复bug。应该使用哪些工具？在应用程序统计领域，有很多选择。大多数人使用谷歌分析。不过由于这款产品主要面向国内用户，所以我更倾向于选择加载速度较快的产品。最后我选择了腾讯的移动应用分析（MTA），在腾讯的移动应用分析中，提供了HTML5产品的访问，所以TLDR统计可以完成。在Crash收集方面，大家常用的是Sentry.io。但由于Linux中国没有足够多的产品和商家使用Sentry收集Crash，所以一直使用官网的免费版。也是因为网络加载速度，我选择了使用国内的竞品——FunDebug。接入工具腾讯移动应用分析腾讯移动应用分析的接入并不复杂。首先，你需要登录其官方网站并创建一个HTML5应用程序。并在创建完成后，根据自己的需求配置相应的能力。这里我启用了所有的数据统计，以支持后续的产品迭代决策。配置完成后，你会得到具体的统计代码，然后就可以访问了。比较简单的方法是直接将代码复制粘贴到public/index.html中实现统计。但是这种方式嵌入，如果需要自定义统计，会导致ESLint规则无法通过，所以我选择了第二种方式，使用Vue插件访问。使用vue插件访问时，需要使用mars-mta包。先使用npm安装依赖，然后在main.js中添加相应的统计代码，实现自动统计。importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importvuetifyfrom'./plugins/vuetify';//下面是新代码importMarsfrom'mars-mta'Vue.use(Mars,{open:true,//开关，如果为false，则不会发送报告config:{sid:'500710182',//必填，用于统计的appidcid:'500710183',//如果你enablecustomevents，此项必填，否则留空autoReport:1,//是否开启自动上报（1：init完成后上报一次，0：使用pgv方法后才上报）senseHash:1,//hashanchor点击是否进入url统计senseQuery:1,//url参数是否进入url统计performanceMonitor:1,//是否开启性能监控}})//以上为新代码newVue({router,vuetify,render:h=>h(App),beforeCreate:asyncfunction(){constauth=this.$tcb.auth({persistence:'local'});awaitauth.signInAnonymously();}}).$mount('#app')在我的代码中，sid和cida重新配置，需要在腾讯MTA的应用管理后台获取该信息。下面的配置，您可以根据自己的实际需要选择开启。对应COMMIT：https://github.com/LCTT/tldr....FunDebugFundebug是我在开发小程序时用到的一个Crash收集应用。正好这次用到了。因为预算问题，这里我用的是免费版。有几个tab看不到，不过基本的Debug就够了。Fundebug的安装也很简单。访问https://www.fundebug.com/，注册账号，创建项目。您将获得一个API密钥，稍后您可以使用它来初始化您的项目。执行以下命令安装依赖npminstallfundebug-javascriptfundebug-vue--save在main.js中添加如下代码（将API-KEY替换为自己的APIKEY）并保存，即可引入FundebugforCrash收集起来。从“fundebug-javascript”导入*作为fundebug；从“fundebug-vue”导入fundebugVue；fundebug.init({apikey:“API-KEY”})fundebugVue(fundebug,Vue);对应的COMMIT：https://github。com/LCTT/tldr....开发过程中经常出现优化错误，这是不可避免的。开启Crash收集后，这些ERROR也会被收集到Fundebug上，这样会浪费每月3000条的免费额度。因此，需要一种方法在开发环境中禁用这些扩展。同样，我们也不希望MTA统计本地开发的PageViews，这样会影响后续的数据分析。因此，我使用了一些方法来避免这个问题。if(process.env.NODE_ENV==='production'){Vue.use(Mars,{open:true,//开关，如果为false，则不会发送报告config:{sid:'xxx',//强制,appidforstatistics}})fundebug.apikey="xxx"fundebugVue(fundebug,Vue);}通过在环境的判断代码中包裹引用统计代码，可以实现只有生产环境才能对应的统计代码会被渲染，这样就不会在开发环境调用fundebug和mta统计，避免了开发环境的数据干扰。对应COMMIT：https://github.com/LCTT/tldr....总结这篇文章介绍了两个服务，分别是用于统计的TencentMobileAnalysisMTA和用于Crash收集的fundebug。介绍如何在Vue应用中访问这两个服务。另外，根据实际需要，对两个统计位置进行了优化，保证产品不会在开发环境下运行，从而避免影响我们统计数据的准确性。可以在https://github.com/LCTT/tldr...查看本文涉及的代码。
