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

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這樣的小程序數據分析平臺來作小程序的基礎和精細化運營仍是很不錯的，期待有更多用戶洞察的功能以及對小程序開發者和運營者更有價值的功能推出。