微信小程序開(kāi)發(fā)是騰訊微信團(tuán)隊(duì)推出的基于微信生態(tài)的應(yīng)用號(hào)，是一種跨平臺(tái)，媲美原生App操作體驗(yàn)的web應(yīng)用，它擁有，即用即走、離線(xiàn)存儲(chǔ)、跨平臺(tái)等特點(diǎn)，我們今天聊一聊小程序開(kāi)發(fā)和運(yùn)營(yíng)需要懂得掌握哪些知識(shí)。
Page Frame
Web應(yīng)用在微信下實(shí)現(xiàn)如原生應(yīng)用般順滑的體驗(yàn)，主要靠Page Frame，Native會(huì)預(yù)先加載一個(gè)WebView，當(dāng)打開(kāi)小程序落地頁(yè)面的時(shí)候，就直接通過(guò)下載CDN上的資源以及數(shù)據(jù)渲染頁(yè)面，請(qǐng)求數(shù)據(jù)則局部刷新，頁(yè)面返回直接history彈棧，退出小程序，View狀態(tài)并不會(huì)銷(xiāo)毀。
MVVM
微信小程序的前端架構(gòu)設(shè)計(jì)，以及開(kāi)發(fā)模式，充分參考了Vue、React這一類(lèi)MV*的前端開(kāi)發(fā)框架，我們簡(jiǎn)單舉幾個(gè)例子：比如通過(guò){{data-bind}}進(jìn)行數(shù)據(jù)雙像綁定，就像極了Vue的設(shè)計(jì)風(fēng)格；再比如一些標(biāo)簽語(yǔ)法糖，列表循環(huán)：
<!--wxml-->
<view?wx:for="{{array}}">?{{item}}?</view>
相信寫(xiě)過(guò)AngularJS 和 Vue的同學(xué)都不會(huì)陌生；再比如，事件綁定：
<view?bindtap="add">?{{count}}?</view>
Page({
?data:?{
?count:?1
?},
?add:?function(e)?{
?this.setData({
?data:?this.data.count?+?1
?})
?}
})
如果你開(kāi)發(fā)過(guò)React，那么其里面有一個(gè)setState的方法可以用來(lái)改變狀態(tài)的值，這里的setDate也是一樣的，通過(guò)綁定的add方法來(lái)改變視圖中count的值。模塊化思想這些都是現(xiàn)在前端框架必備基礎(chǔ)。
組件
微信小程序框架與其他開(kāi)發(fā)框架不同，比如vue react都是只管安心做好框架，UE層面的套件庫(kù)都由各路使用者來(lái)貢獻(xiàn)，比如餓了么的element，螞蟻的ant-design，微信小程序直接提供了在小程序開(kāi)發(fā)過(guò)程中常用的UE組件，小程序的組件遵循web component標(biāo)準(zhǔn)，并使用polymer框架實(shí)現(xiàn)web component。視圖容器、表單組件、導(dǎo)航、媒體組件、地圖組件、畫(huà)布這些基礎(chǔ)的元素級(jí)組件分享、登錄、支付這些功能性組件
API
在appservice層，微信提供了N多API，其實(shí)就是jsbridge，用于提供js訪問(wèn)native的能力和通道，像：wx.*storage* 訪問(wèn)存儲(chǔ)相關(guān)接口wx.*file* 文件操作相關(guān)apiwx.*systeminfo* 獲取機(jī)型wx.*network* 獲取聯(lián)網(wǎng)狀態(tài)還有更多媒體、界面的操作api不一一列舉，可以直接參考文檔-開(kāi)發(fā)-API部分
利用分析工具透視微信小程序
當(dāng)簡(jiǎn)單了解了小程序是什么之后，我們摸索著做了一個(gè)小程序的demo，利用豆瓣圖書(shū)的api（做完了才發(fā)現(xiàn)git上已經(jīng)有無(wú)數(shù)這樣的demo），成功運(yùn)行小程序之后，我們又有了對(duì)小程序做數(shù)據(jù)透視的想法，官方的數(shù)據(jù)分析模塊有提供，但及其簡(jiǎn)單，只是基礎(chǔ)的運(yùn)營(yíng)指標(biāo)+自定義事件（自定義事件功能還是蠻屌的，實(shí)現(xiàn)了無(wú)埋點(diǎn)），業(yè)界搜索了一下，有微信小程序分析相關(guān)的平臺(tái)or產(chǎn)品并不多，talkding data，hotapp，騰訊移動(dòng)分析(MTA)，這里，我們選擇了MTA，接下來(lái)就針對(duì)MTA的sdk代碼和功能，來(lái)看看如何利用數(shù)據(jù)分析工具運(yùn)營(yíng)小程序。
數(shù)據(jù)分析SDK源碼解讀
整個(gè)SDK對(duì)外暴露了三個(gè)對(duì)象App、Page、Event
mta.App.init({config_obj});
做統(tǒng)計(jì)信息的初始化，在應(yīng)用入口app.js App.onLaunch方法中調(diào)用，很顯然是做一些統(tǒng)計(jì)信息初始化的工作，其中除了常規(guī)的統(tǒng)計(jì)ID的初始化，我們發(fā)現(xiàn)有對(duì)使用分析統(tǒng)計(jì)功能的開(kāi)關(guān)設(shè)計(jì)，通過(guò)反混淆源碼發(fā)現(xiàn)，以統(tǒng)計(jì)分享為例：
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)前頁(yè)面的對(duì)象，重載頁(yè)面對(duì)象的share event對(duì)應(yīng)的handler方法，在執(zhí)行框架方法之前，做統(tǒng)計(jì)平臺(tái)的event統(tǒng)計(jì)上報(bào)，是個(gè)不錯(cuò)的好方法。
Page.init()
具體頁(yè)面的統(tǒng)計(jì)接口，可以看到，頁(yè)面的訪問(wèn)統(tǒng)計(jì)是掛在框架對(duì)外暴露的Page.onShow的方法，onShow方法會(huì)在加載，返回，后臺(tái)導(dǎo)前臺(tái)等頁(yè)面展示的任何時(shí)機(jī)都上報(bào)，所以統(tǒng)計(jì)口徑可能與官方有差異
Event.stat(eventid,?{params_obj})
自定義事件的上報(bào)接口，用戶(hù)可以在管理臺(tái)配置好自定義事件，拿到合法的統(tǒng)計(jì)id和事件id后，在任何需要統(tǒng)計(jì)的事件場(chǎng)景下進(jìn)行統(tǒng)計(jì)其他內(nèi)部實(shí)現(xiàn)，多是利用框架提供的system/network等接口來(lái)上報(bào)環(huán)境、網(wǎng)絡(luò)等信息
實(shí)時(shí)刷新的透視數(shù)據(jù)
MTA提供了訪問(wèn)次數(shù)、訪問(wèn)人數(shù)、應(yīng)用打開(kāi)次數(shù)等基礎(chǔ)指標(biāo)在各個(gè)分析模型下的組合、計(jì)算和應(yīng)用，并且做到了幾乎全站分析模型的實(shí)時(shí)化：
真正做到了所見(jiàn)即所得的運(yùn)營(yíng)數(shù)據(jù)
環(huán)境分析，讓微信小程序開(kāi)發(fā)者更了解運(yùn)行環(huán)境
MTA提供了地域、運(yùn)營(yíng)商那個(gè)、機(jī)型、網(wǎng)絡(luò)、操作系統(tǒng)、平臺(tái)等一系列用戶(hù)客戶(hù)端環(huán)境分析的報(bào)表，可以很好的幫助開(kāi)發(fā)者、運(yùn)營(yíng)者了解自己的小程序都運(yùn)行在什么的宿主環(huán)境中，其中地域分析提供了各省份及其附屬市區(qū)的覆蓋數(shù)據(jù)，這些應(yīng)該都是拿的用戶(hù)ip，然后匹配騰訊公共的ip庫(kù)做的映射：
而微信版本、網(wǎng)絡(luò)連接類(lèi)型、機(jī)型、操作系統(tǒng)等這些都是利用微信的getSysteminfo getNetworkType等接口取值上報(bào)進(jìn)行了匯總、統(tǒng)計(jì)：
使用分析，特定場(chǎng)景下的用戶(hù)行為分析
以上兩個(gè)功能都是不需要用戶(hù)參與的，MTA自動(dòng)幫大家采集和計(jì)算的，而使用分析則不是，比如我們需要統(tǒng)計(jì)有多少用戶(hù)分享了我的小程序、有多少用戶(hù)觸發(fā)了頁(yè)面的下拉刷新等動(dòng)作，如此精細(xì)化的用戶(hù)行為分析，MTA這邊也提供了配置化的上報(bào)接口：
mta.App.init({
"statPullDownFresh":true,
?"statShareApp":true,
?"statReachBottom":true
})
前提是已經(jīng)獲得并配置了合法的click_id這樣平臺(tái)就會(huì)采集這樣的用戶(hù)行為數(shù)據(jù)，并進(jìn)行計(jì)算
舉例分享分析，還提供了具體的分享頁(yè)面列表，讓開(kāi)發(fā)者了解自己的小程序哪些頁(yè)面的內(nèi)容質(zhì)量更高。
自定義分析，給用戶(hù)行為洞察更多的靈活性
有很多場(chǎng)景，比如我想統(tǒng)計(jì)demo小程序中，搜索圖書(shū)這個(gè)按鈕的點(diǎn)擊量（搜索圖書(shū)這個(gè)事件的事件發(fā)生次數(shù)），并且我想知道每次用戶(hù)都輸入了什么值來(lái)搜索圖書(shū)，我用MTA的自定義事件，并配置了對(duì)應(yīng)的事件id和參數(shù)
mta.Event.stat('btn_search',{search:'用戶(hù)輸入的值'})
實(shí)時(shí)訪客軌跡，實(shí)時(shí)透視用戶(hù)行為的鷹眼
這個(gè)功能是我覺(jué)著幫助透視小程序運(yùn)營(yíng)數(shù)據(jù)很有特色的一個(gè)功能，可以幫助開(kāi)發(fā)者實(shí)時(shí)的查看當(dāng)前應(yīng)用的活躍用戶(hù)的行為軌跡，并且提供了當(dāng)前用戶(hù)的一些基本屬性：第一次訪問(wèn)小程序的時(shí)間，用戶(hù)類(lèi)型，地域，受訪頁(yè)面url等，很清晰，有種坐在monitor屏幕后面窺視用戶(hù)的感覺(jué)：
目前利用諸如MTA這樣的小程序數(shù)據(jù)分析平臺(tái)來(lái)做小程序的基礎(chǔ)和精細(xì)化運(yùn)營(yíng)，摸索小程序發(fā)展的未來(lái)方向，也期待有更多用戶(hù)洞察的功能以及對(duì)小程序開(kāi)發(fā)者和運(yùn)營(yíng)者更有價(jià)值的功能推出。
本文來(lái)自網(wǎng)絡(luò) 由藍(lán)暢整理，經(jīng)授權(quán)后發(fā)布，本文觀點(diǎn)不代表Infocode藍(lán)暢信息技術(shù)立場(chǎng)，轉(zhuǎn)載請(qǐng)聯(lián)系原作者。
