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

騰訊移動分析_MTA發表於2019-03-04
微信小程式

一、微信小程式簡介

微信小程式是騰訊微信團隊推出的基於微信生態的應用號，是一種跨平臺，媲美原生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，接下來就針對M他的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小程式中，搜尋圖書這個按鈕的點選量（搜尋圖書這個事件的事件發生次數），並且我想知道每次使用者都輸入了什麼值來搜尋圖書，我用M他的自定義事件，並配置了對應的事件id和引數

mta.Event.stat(`btn_search`,{search:`使用者輸入的值`})複製程式碼

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

6、實時訪客軌跡，實時透視使用者行為的鷹眼

這個功能是我覺著幫助透視小程式運營資料很有特色的一個功能，可以幫助開發者實時的檢視當前應用的活躍使用者的行為軌跡，並且提供了當前使用者的一些基本屬性：第一次訪問小程式的時間，使用者型別，地域，受訪頁面url等，很清晰，有種坐在monitor螢幕後面窺視使用者的感覺：

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

目前利用諸如MTA這樣的小程式資料分析平臺來做小程式的基礎和精細化運營還是很不錯的，期待有更多使用者洞察的功能以及對小程式開發者和運營者更有價值的功能推出。

相關文章