微信小程序開發和運維需要懂得掌握哪些知識

微信小程序開發是騰訊微信團隊推出的基于微信生態的應用號，是一種跨平臺，媲美原生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* 文件操作相關apiwx.*systeminfo* 獲取機型wx.*network* 獲取聯網狀態還有更多媒體、界面的操作api不一一列舉，可以直接參考文檔-開發-API部分

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

當簡單了解了小程序是什么之后，我們摸索著做了一個小程序的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這樣的小程序數據分析平臺來做小程序的基礎和精細化運營，摸索小程序發展的未來方向，也期待有更多用戶洞察的功能以及對小程序開發者和運營者更有價值的功能推出。

驗證碼 姓名 手機號

姓名 *

請輸入姓名或昵稱

手機號 *

需要咨詢的內容 *

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

驗證碼 *

=

提交留言