微信小程序从使用到分析快速解析

一、微信小程序简介

微信小程序是腾讯微信团队推出的基于微信生态的应用号，是一种跨平台，媲美原生App操作体验的web应用，它拥有，即用即走、离线存储、跨平台等特点。

1、系统架构

小程序大概的系统架构如下图所示：

2、Page Frame：

Web应用在微信下实现如原生应用般顺滑的体验，主要靠Page Frame，Native会预先加载一个WebView，当打开小程序落地页面的时候，就直接通过下载CDN上的资源以及数据渲染页面，请求数据则局部刷新，页面返回直接history弹栈，退出小程序，View状态并不会销毁。

3、MVVM

微信小程序的前端架构设计，以及开发模式，充分参考了Vue、React这一类MV*的前端开发框架，我们简单举几个例子：
比如通过{{data-bind}}进行数据双像绑定，就像极了Vue的设计风格；
再比如一些标签语法糖，列表循环：

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>复制代码

相信写过AngularJS 和 Vue的同学都不会陌生；
再比如，事件绑定：

    <view bindtap="add"> {{count}} </view>
Page({
    data: {
      count: 1
    },
    add: function(e) {
        this.setData({

 data: this.data.count + 1
        })
    }
})复制代码

如果你开发过React，那么其里面有一个setState的方法可以用来改变状态的值，这里的setDate也是一样的，通过绑定的add方法来改变视图中count的值。
模块化思想这些都是现在前端框架必备基础。

4、组件

微信小程序框架与其他开发框架不同，比如vue react都是只管安心做好框架，UE层面的套件库都由各路使用者来贡献，比如饿了么的element，蚂蚁的ant-design，微信小程序直接提供了在小程序开发过程中常用的UE组件，小程序的组件遵循web component标准，并使用polymer框架实现web component。
视图容器、表单组件、导航、媒体组件、地图组件、画布这些基础的元素级组件
分享、登录、支付这些功能性组件

5、API

在appservice层，微信提供了N多API，其实就是jsbridge，用于提供js访问native的能力和通道，像：

wx.*storage*访问存储相关接口
wx.*file* 文件操作相关api
wx.*systeminfo*获取机型
wx.*network* 获取联网状态

还有更多媒体、界面的操作api不一一列举，可以直接参考文档-开发-API部分

二、利用分析工具透视微信小程序

当简单了解了小程序是什么之后，我们摸索着做了一个小程序的demo，利用豆瓣图书的api（做完了才发现git上已经有无数这样的demo），成功运行小程序之后，我们又有了对小程序做数据透视的想法，官方的数据分析模块有提供，但及其简单，只是基础的运营指标+自定义事件（自定义事件功能还是蛮屌的，实现了无埋点），业界搜索了一下，有微信小程序分析相关的平台or产品并不多，talkding data，hotapp，腾讯移动分析(MTA)，本着对大公司的信赖，选择了MTA，接下来就针对MTA的sdk代码和功能，来看看如何利用数据分析工具运营小程序。

1、数据分析SDK源码解读：

整个SDK对外暴露了三个对象App、Page、Event

mta.App.init({config_obj});复制代码

做统计信息的初始化，在应用入口app.js App.onLaunch方法中调用，很显然是做一些统计信息初始化的工作，其中除了常规的统计ID的初始化，我们发现有对使用分析统计功能的开关设计，通过反混淆源码发现：
以统计分享为例：

var a = getCurrentPages()[getCurrentPages().length - 1];
MTA_CONFIG.stat_share_app && a.onShareAppMessage && !
            function() {
                var b = a.onShareAppMessage;
                a.onShareAppMessage = function() {
                    MTA.Event.stat(MTA_CONFIG.prefix + "shareapp", {
                        url: a.__route__
                    });
                    return b.call(this, arguments)
                }
            } ()复制代码

获取当前页面的对象，重载页面对象的share event对应的handler方法，在执行框架方法之前，做统计平台的event统计上报，是个不错的好方法。

Page.init()复制代码

具体页面的统计接口，可以看到，页面的访问统计是挂在框架对外暴露的Page.onShow的方法，onShow方法会在加载，返回，后台导前台等页面展示的任何时机都上报，所以统计口径可能与官方有差异

Event.stat(eventid, {params_obj})复制代码

自定义事件的上报接口，用户可以在管理台配置好自定义事件，拿到合法的统计id和事件id后，在任何需要统计的事件场景下进行统计
其他内部实现，多是利用框架提供的system/network等接口来上报环境、网络等信息

2、实时刷新的透视数据

MTA提供了访问次数、访问人数、应用打开次数等基础指标在各个分析模型下的组合、计算和应用，并且做到了几乎全站分析模型的实时化：

真正做到了所见即所得的运营数据

3、环境分析，让微信小程序开发者更了解运行环境

MTA提供了地域、运营商那个、机型、网络、操作系统、平台等一系列用户客户端环境分析的报表，可以很好的帮助开发者、运营者了解自己的小程序都运行在什么的宿主环境中，其中地域分析提供了各省份及其附属市区的覆盖数据，这些应该都是拿的用户ip，然后匹配腾讯公共的ip库做的映射：

而微信版本、网络连接类型、机型、操作系统等这些都是利用微信的getSysteminfo getNetworkType等接口取值上报进行了汇总、统计：

4、使用分析，特定场景下的用户行为分析

以上两个功能都是不需要用户参与的，MTA自动帮大家采集和计算的，而使用分析则不是，比如我们需要统计有多少用户分享了我的小程序、有多少用户触发了页面的下拉刷新等动作，如此精细化的用户行为分析，MTA这边也提供了配置化的上报接口：

在mta.App.init({
        "statPullDownFresh":true, 
      "statShareApp":true, 
          "statReachBottom":true
})复制代码

前提是已经获得并配置了合法的click_id
这样平台就会采集这样的用户行为数据，并进行计算

举例分享分析，还提供了具体的分享页面列表，让开发者了解自己的小程序哪些页面的内容质量更高。

5、自定义分析，给用户行为洞察更多的灵活性

有很多场景，比如我想统计demo小程序中，搜索图书这个按钮的点击量（搜索图书这个事件的事件发生次数），并且我想知道每次用户都输入了什么值来搜索图书，我用MTA的自定义事件，并配置了对应的事件id和参数

mta.Event.stat('btn_search',{search:'用户输入的值'})复制代码

6、实时访客轨迹，实时透视用户行为的鹰眼

这个功能是我觉着帮助透视小程序运营数据很有特色的一个功能，可以帮助开发者实时的查看当前应用的活跃用户的行为轨迹，并且提供了当前用户的一些基本属性：第一次访问小程序的时间，用户类型，地域，受访页面url等，很清晰，有种坐在monitor屏幕后面窥视用户的感觉：

目前利用诸如MTA这样的小程序数据分析平台来做小程序的基础和精细化运营还是很不错的，期待有更多用户洞察的功能以及对小程序开发者和运营者更有价值的功能推出。