微信小程序開發(fā)是騰訊微信團隊推出的基于微信生態(tài)的應(yīng)用號，是一種跨平臺，媲美原生App操作體驗的web應(yīng)用，它擁有，即用即走、離線存儲、跨平臺等特點，我們今天聊一聊小程序開發(fā)和運營需要懂得掌握哪些知識。

Page Frame

Web應(yīng)用在微信下實現(xiàn)如原生應(yīng)用般順滑的體驗，主要靠Page Frame，Native會預(yù)先加載一個WebView，當(dāng)打開小程序落地頁面的時候，就直接通過下載CDN上的資源以及數(shù)據(jù)渲染頁面，請求數(shù)據(jù)則局部刷新，頁面返回直接history彈棧，退出小程序，View狀態(tài)并不會銷毀。

MVVM

微信小程序的前端架構(gòu)設(shè)計，以及開發(fā)模式，充分參考了Vue、React這一類MV*的前端開發(fā)框架，我們簡單舉幾個例子：比如通過{{data-bind}}進行數(shù)據(jù)雙像綁定，就像極了Vue的設(shè)計風(fēng)格；再比如一些標(biāo)簽語法糖，列表循環(huán)：

<!--wxml-->
<view?wx:for="{{array}}">?{{item}}?</view>

相信寫過AngularJS 和 Vue的同學(xué)都不會陌生；再比如，事件綁定：

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

如果你開發(fā)過React，那么其里面有一個setState的方法可以用來改變狀態(tài)的值，這里的setDate也是一樣的，通過綁定的add方法來改變視圖中count的值。模塊化思想這些都是現(xiàn)在前端框架必備基礎(chǔ)。

組件

微信小程序框架與其他開發(fā)框架不同，比如vue react都是只管安心做好框架，UE層面的套件庫都由各路使用者來貢獻，比如餓了么的element，螞蟻的ant-design，微信小程序直接提供了在小程序開發(fā)過程中常用的UE組件，小程序的組件遵循web component標(biāo)準(zhǔn)，并使用polymer框架實現(xiàn)web component。視圖容器、表單組件、導(dǎo)航、媒體組件、地圖組件、畫布這些基礎(chǔ)的元素級組件分享、登錄、支付這些功能性組件

API

在appservice層，微信提供了N多API，其實就是jsbridge，用于提供js訪問native的能力和通道，像：wx.*storage* 訪問存儲相關(guān)接口wx.*file* 文件操作相關(guān)apiwx.*systeminfo* 獲取機型wx.*network* 獲取聯(lián)網(wǎng)狀態(tài)還有更多媒體、界面的操作api不一一列舉，可以直接參考文檔-開發(fā)-API部分

利用分析工具透視微信小程序

當(dāng)簡單了解了小程序是什么之后，我們摸索著做了一個小程序的demo，利用豆瓣圖書的api（做完了才發(fā)現(xiàn)git上已經(jīng)有無數(shù)這樣的demo），成功運行小程序之后，我們又有了對小程序做數(shù)據(jù)透視的想法，官方的數(shù)據(jù)分析模塊有提供，但及其簡單，只是基礎(chǔ)的運營指標(biāo)+自定義事件（自定義事件功能還是蠻屌的，實現(xiàn)了無埋點），業(yè)界搜索了一下，有微信小程序分析相關(guān)的平臺or產(chǎn)品并不多，talkding data，hotapp，騰訊移動分析(MTA)，這里，我們選擇了MTA，接下來就針對MTA的sdk代碼和功能，來看看如何利用數(shù)據(jù)分析工具運營小程序。

數(shù)據(jù)分析SDK源碼解讀

整個SDK對外暴露了三個對象App、Page、Event

mta.App.init({config_obj});

做統(tǒng)計信息的初始化，在應(yīng)用入口app.js App.onLaunch方法中調(diào)用，很顯然是做一些統(tǒng)計信息初始化的工作，其中除了常規(guī)的統(tǒng)計ID的初始化，我們發(fā)現(xiàn)有對使用分析統(tǒng)計功能的開關(guān)設(shè)計，通過反混淆源碼發(fā)現(xiàn)，以統(tǒng)計分享為例：

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)
?}
?}?()

獲取當(dāng)前頁面的對象，重載頁面對象的share event對應(yīng)的handler方法，在執(zhí)行框架方法之前，做統(tǒng)計平臺的event統(tǒng)計上報，是個不錯的好方法。

Page.init()

具體頁面的統(tǒng)計接口，可以看到，頁面的訪問統(tǒng)計是掛在框架對外暴露的Page.onShow的方法，onShow方法會在加載，返回，后臺導(dǎo)前臺等頁面展示的任何時機都上報，所以統(tǒng)計口徑可能與官方有差異

Event.stat(eventid,?{params_obj})

自定義事件的上報接口，用戶可以在管理臺配置好自定義事件，拿到合法的統(tǒng)計id和事件id后，在任何需要統(tǒng)計的事件場景下進行統(tǒng)計其他內(nèi)部實現(xiàn)，多是利用框架提供的system/network等接口來上報環(huán)境、網(wǎng)絡(luò)等信息

實時刷新的透視數(shù)據(jù)

MTA提供了訪問次數(shù)、訪問人數(shù)、應(yīng)用打開次數(shù)等基礎(chǔ)指標(biāo)在各個分析模型下的組合、計算和應(yīng)用，并且做到了幾乎全站分析模型的實時化：

真正做到了所見即所得的運營數(shù)據(jù)

環(huán)境分析，讓微信小程序開發(fā)者更了解運行環(huán)境

MTA提供了地域、運營商那個、機型、網(wǎng)絡(luò)、操作系統(tǒng)、平臺等一系列用戶客戶端環(huán)境分析的報表，可以很好的幫助開發(fā)者、運營者了解自己的小程序都運行在什么的宿主環(huán)境中，其中地域分析提供了各省份及其附屬市區(qū)的覆蓋數(shù)據(jù)，這些應(yīng)該都是拿的用戶ip，然后匹配騰訊公共的ip庫做的映射：

而微信版本、網(wǎng)絡(luò)連接類型、機型、操作系統(tǒng)等這些都是利用微信的getSysteminfo getNetworkType等接口取值上報進行了匯總、統(tǒng)計：

使用分析，特定場景下的用戶行為分析

以上兩個功能都是不需要用戶參與的，MTA自動幫大家采集和計算的，而使用分析則不是，比如我們需要統(tǒng)計有多少用戶分享了我的小程序、有多少用戶觸發(fā)了頁面的下拉刷新等動作，如此精細(xì)化的用戶行為分析，MTA這邊也提供了配置化的上報接口：

mta.App.init({
"statPullDownFresh":true,
?"statShareApp":true,
?"statReachBottom":true
})

前提是已經(jīng)獲得并配置了合法的click_id這樣平臺就會采集這樣的用戶行為數(shù)據(jù)，并進行計算

舉例分享分析，還提供了具體的分享頁面列表，讓開發(fā)者了解自己的小程序哪些頁面的內(nèi)容質(zhì)量更高。

自定義分析，給用戶行為洞察更多的靈活性

有很多場景，比如我想統(tǒng)計demo小程序中，搜索圖書這個按鈕的點擊量（搜索圖書這個事件的事件發(fā)生次數(shù)），并且我想知道每次用戶都輸入了什么值來搜索圖書，我用MTA的自定義事件，并配置了對應(yīng)的事件id和參數(shù)

mta.Event.stat('btn_search',{search:'用戶輸入的值'})

實時訪客軌跡，實時透視用戶行為的鷹眼

這個功能是我覺著幫助透視小程序運營數(shù)據(jù)很有特色的一個功能，可以幫助開發(fā)者實時的查看當(dāng)前應(yīng)用的活躍用戶的行為軌跡，并且提供了當(dāng)前用戶的一些基本屬性：第一次訪問小程序的時間，用戶類型，地域，受訪頁面url等，很清晰，有種坐在monitor屏幕后面窺視用戶的感覺：

目前利用諸如MTA這樣的小程序數(shù)據(jù)分析平臺來做小程序的基礎(chǔ)和精細(xì)化運營，摸索小程序發(fā)展的未來方向，也期待有更多用戶洞察的功能以及對小程序開發(fā)者和運營者更有價值的功能推出。

姓名 *

請輸入姓名或昵稱

姓名 需要咨詢的內(nèi)容 驗證碼

手機號 *

需要咨詢的內(nèi)容 *

如果您有任何疑問、需要更多信息或希望與我們建立合作請留言

驗證碼 *

=

提交留言