前言

在上一期推文中【Demo發佈- ClkLog客户端集成-React Native】，我們與大家分享了 React Native 的集成 demo。本期，我們將繼續介紹 ClkLog 集成 uni-app 的 demo。 uni-app 允許開發者編寫一套代碼，然後可以編譯到 iOS、Android、H5 以及各種小程序等多個平台。因此，本次 demo 中將涵蓋上述所有平台，並且我們會詳細説明集成過程中遇到的難點及解決方案。

uni-app-demo説明

本demo支持IOS、Android、h5、微信小程序，並實現了相關功能點的示例。
●示例包含的內容：
1、uni-app在h5、微信小程序、Android/iOS端的sdk集成和初始化
2、會話的實現與接入示例
3、瀏覽頁面事件的手動接入示例
4、頁面標題的手動接入示例
●其他更多內容的接入請參考神策 uni-app sdk 官方文檔。

在集成神策 uni-app 相關 sdk 之前，請根據以下情況進行 sdk 的選擇

1、如果打包包含 h5 ，由於 uni-app-js 會話未實現需要自己實現，建議採用神策 web js sdk 的方式引入 sa-sdk-javascript 插件。
2、如果打包包含 微信小程序 ，需要引入 uni-app-js 插件。
3、如果打包包含 Android/iOS ，需要引入 uni-app-native(Android & iOS) 插件, 插件集成過程中建議使用離線打包模式（雲打包在測試中無法正常採集數據）。

在使用 ClkLog 作為 uni-app 的數據採集服務端時，需要要注意以下內容

1、ClkLog的統計數據基於神策 sdk 的瀏覽頁面事件和會話ID（$event_session_id）, 由於神策 uni-app sdk 的會話未實現，所以需要自己實現會話ID並配置為全局屬性，同時關閉全埋點的瀏覽頁面事件並手動跟蹤瀏覽頁面事件。
2、神策web、小程序、iOS、Android端的sdk瀏覽頁面事件名稱不同，請根據uni-app打包的版本去跟蹤瀏覽頁面事件，各端的瀏覽頁面事件如下：
Web：$pageview
Android&iOS：$AppViewScreen
微信小程序：$MPViewScreen。
3、由於 uni-app 屬於單頁面應用，開啓自動採集瀏覽頁面事件會出現頁面標題和頁面URL不匹配的問題，在各端的瀏覽頁面事件註冊時請根據實際情況手動採集頁面標題。
4、demo中分別使用App.h5.vue、App.minprogram.vue、App.androd-ios.vue三個文件對web端、小程序端和移動端做了sdk的引用、初始化和自定義集成示例，請根據實際情況選擇對應集成參考示例在App.vue入口頁進行sdk的初始化。

demo源碼地址

我們分別在gitee和github中上傳了demo，歡迎大家前來圍觀。
https://gitee.com/clklog/clklog-uniapp-demo
https://github.com/clklog/clklog-uniapp-demo

如果您有更多的建議或經驗可以在社羣中與我們分享
讓我們一起共建社區
添加ClkLog微信好友 加入社羣