Demo发布- ClkLog客户端集成 uni-app

本文涉及的产品
云原生数据库 PolarDB 分布式版,标准版 2核8GB
云原生数据库 PolarDB PostgreSQL 版,标准版 2核4GB 50GB
云原生数据库 PolarDB MySQL 版,通用型 2核4GB 50GB
简介: 在上一期推文中,我们与大家分享了 React Native 的集成 demo。本期,我们将继续介绍 ClkLog 集成 uni-app 的 demo。 uni-app 允许开发者编写一套代码,然后可以编译到 iOS、Android、H5 以及各种小程序等多个平台。因此,本次 demo 中将涵盖上述所有平台,并且我们会详细说明集成过程中遇到的难点及解决方案。

前言
在上一期推文中【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
结束语.png


相关文章
|
7月前
|
移动开发 小程序 JavaScript
uni-app 跨端开发注意事项
uni-app 跨端开发注意事项
328 0
|
5月前
|
JSON JavaScript 小程序
|
5月前
|
前端开发
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
1354 1
|
7月前
|
移动开发 自然语言处理 小程序
miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)
miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)
544 1
|
7月前
|
移动开发 小程序 前端开发
使用uni-app开发(h5、小程序、app)步骤
使用uni-app开发(h5、小程序、app)步骤
|
7月前
|
API
uni-app 139发布朋友圈api开发(一)
uni-app 139发布朋友圈api开发(一)
26 0
|
7月前
|
API
uni-app 141发布朋友圈api开发(三)
uni-app 141发布朋友圈api开发(三)
34 0
|
7月前
|
API
uni-app 140发布朋友圈api开发(二)
uni-app 140发布朋友圈api开发(二)
50 0
|
小程序 前端开发 JavaScript
uni-app框架看这五款组件库就够了
uni-app框架看这五款组件库就够了
3213 0
|
存储 移动开发 小程序
小程序-uniapp:uni-app-base 项目基础配置及使用,开箱可用(二)
小程序-uniapp:uni-app-base 项目基础配置及使用,开箱可用(二)
571 0