insight 后台性能监控小程序开发手记

 

项目概述

---

基于微信小程序研发一款产品运营监控平台，提供一个能够直观、全面、多元化展示监控信息的平台，使用户能够快速便捷地获取关键的有价值的监控信息，掌握应用运营情况；
同时在应用出现异常状态时，用户能够在第一时间、实时地接收到推送通知，以达到能够及时对异常情况作出响应处理。

 

项目源码

---

项目地址： https://github.com/EmiyaYang/insight
 

开发工具使用

---

在项目开发过程中我们使用了许多工具，本文将从如下几个方面介绍各个工具的使用。 

原型设计

---

工具：墨刀（MockingBot）

介绍： 墨刀是一款国人自研的原型设计工具，它提供了简易快速的上手体验，能满足小程序应用设计的基本需求。不过这款软件也跟绝大部分原型设计软件一样需要付费使用。

需求出发点：小程序原型设计

 

编码调试

---

工具： 微信开发者工具、WebStorm

需求出发点： 代码编辑、程序调试与预览

这里之所以使用两个 IDE 的原因是微信开发者工具尚不成熟，在代码编辑方面用着很不方便。而 Webstorm 作为一款成熟的专门为 Web 开发而打造的 IDE 除了提供良好的代码编辑体验之外，也能让开发者享受到诸如内置命令行、文件监听器等便利。但由于 WebStorm 不支持微信小程序预览，所以只能将二者搭配使用。简要来讲便是使用 WebStorm 进行代码编辑，使用微信开发者工具来预览、调试。

 

项目自动化构建

---

工具： gulp.js

介绍： gulp 是一款基于 nodejs 流的前端自动化构建工具。它的 API 很简单，拥有大量的插件，能帮助开发者完成诸如代码压缩、文件格式转换等任务。与其他同类工具相比，上手较为容易。

需求出发点： 将项目各个 page 目录下的 scss 文件转译成对应的 wxss 文件，并在生产环境中将 scss 删除。

项目开发过程中我们引入了 sass 作为小程序的 wxss （类 css）的预处理器。因为项目使用的是原生开发方式，并没有用到 wepy 或是 mpvue 等主流开发框架，所以这个转译的动作得自己来完成。最初的做法是利用 WebStorm 的文件监听器将 page 目录下的 scss 文件进行转译，这样一来一个 page 目录就存在两个样式文件了，而且 WebStorm 似乎并不能帮我们逐个扫描目录删除 scss 文件。但最终的生产环境肯定是要这样做的。于是我们就引入了 gulp 来帮助我们进行这些机械性的工作。

既然使用了 gulp，那也不需要使用 WebStorm 的功能了，gulp 可以帮助我们自动转译项目中的 scss 文件为 wxss 文件到新的目录中