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

1、微信小程序简介

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

一、系统架构

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

二、Page Frame：

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

三、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的值。
模块化思想这些都是如今前端框架必备基础。

四、组件

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

五、API

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

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

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

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

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

一、数据分析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等接口来上报环境、网络等信息

二、实时刷新的透视数据

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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