小程序統(tǒng)計來源信息的方案與具體代碼
背景
從用戶認知的角度看,廣義的小程序啟動可以分為兩種情況,一種是冷啟動,一種是熱啟動。
- 冷啟動:如果用戶首次打開,或小程序銷毀后被用戶再次打開,此時小程序需要重新加載啟動,即冷啟動。
- 熱啟動:如果用戶已經(jīng)打開過某小程序,然后在一定時間內(nèi)再次打開該小程序,此時小程序并未被銷毀,只是從后臺狀態(tài)進入前臺狀態(tài),這個過程就是熱啟動。
統(tǒng)計小程序來源信息并不容易,為什么?
- 小程序初次啟動時,會調(diào)用App的onLaunch生命周期。里面有來源信息。
- 小程序有熱啟動和冷啟動機制。冷啟動時,并不會調(diào)用onLaunch這一生命周期,所以不能依賴onLoad做來源統(tǒng)計。
- 小程序每個頁面都有onLoad生命周期,但是無論內(nèi)部跳轉(zhuǎn)、還是外部跳轉(zhuǎn),都會執(zhí)行這一生命周期,我們無法區(qū)分,所以不能依賴onLoad做來源統(tǒng)計。
這樣看,統(tǒng)計來源似乎是不可能的事情。
但是,如果你閱讀過這篇文章《如何全局重寫小程序 Page函數(shù) wx對象?》和這篇文章《小程序安全指南:如何禁止外部直接跳轉(zhuǎn)到小程序某頁面》,也許你能自己想到最佳方案。
方案
區(qū)分「內(nèi)部跳轉(zhuǎn)」還是「外部跳轉(zhuǎn)」
先用一種方式,區(qū)分「內(nèi)部跳轉(zhuǎn)」還是「外部跳轉(zhuǎn)」。
具體方案:全局改寫內(nèi)部跳轉(zhuǎn)API(wx.redirectTo
、wx.navigateTo
),每次內(nèi)部跳轉(zhuǎn)時,都帶個特殊參數(shù)
,在onLoad中,判斷有沒有這個特殊參數(shù)
,就知道是來自內(nèi)部還是外部了。
來源信息如何獲得?
- 通過wx.getLaunchOptionsSync可以獲得。
- 可以在App.onShow時獲得。但這種方式需要把來源信息先保存到某個全局變量中(如app.globalData.xxx),才能方便的使用。
主要來源信息有什么?
在onLoad中統(tǒng)計來源
在每個頁面onLoad時,如果沒有特殊參數(shù)
,就上報來源信息。
但是不能傻乎乎的給所有頁面都手動加這些上報邏輯,我們要用《如何全局重寫小程序 Page函數(shù) wx對象?》的方法,一次性給所有頁面加上。
具體代碼
全局修改跳轉(zhuǎn)API增加特殊參數(shù)
function addFromInner(url) { const app = getApp(); const symbol = url.includes('?') ? '&' : '?'; return `${url}${symbol}fromInner=1`; } export function redirectToProxy(redirectTo) { return function (object) { return redirectTo({ ...object, url: addFromInner(object.url), }); }; } function wxProxy(wx) { const newWx = { ...wx }; newWx.navigateTo = redirectToProxy(wx.navigateTo); newWx.redirectTo = redirectToProxy(wx.redirectTo); return newWx; } wx = wxProxy(wx);
全局修改onLoad自動上報外部跳轉(zhuǎn)
function onLoadProxy(onLoad) { return function (options) { // 如果沒有參數(shù)fromInner,表明是外部跳轉(zhuǎn)來的,就上報一次來源 if (!options.fromInner) { const launchOptions = wx.getLaunchOptionsSync(); // 這里上報launchOptions // 可以通過this.route 獲得當前頁面的路由信息,一并上報 } if (onLoad) { return onLoad.call(this, options); } }; } const PageProxy = (Page) => function (options) { const newOptions = { ...options, onLoad: onLoadProxy(options.onLoad), }; Page(newOptions); }; Page = PageProxy(Page);
總結(jié)
到此這篇關于小程序統(tǒng)計來源信息的方案與具體代碼的文章就介紹到這了,更多相關小程序統(tǒng)計來源信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫
這篇文章主要介紹了如何用JavaScript實現(xiàn)一個數(shù)組惰性求值庫,對惰性求值感興趣的同學,可以參考下2021-05-05js實現(xiàn)點擊復制當前文本到剪貼板功能(兼容所有瀏覽器)
這篇文章主要介紹了js實現(xiàn)點擊復制當前文本到剪貼板功能,兼容所有瀏覽器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-12-12js中Object.defineProperty()方法的不詳解
這篇文章主要介紹了js中Object.defineProperty()方法的不詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07JavaScript中的惰性載入函數(shù)及優(yōu)勢
這篇文章主要介紹了JavaScript中的惰性載入函數(shù)及優(yōu)勢,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02