uniapp（H5）接入浙里办埋点+单点登录+适老化

直接开始：

1：埋点要求

2：使用方式

3：代码

3.1：引入埋点js文件（放到index.html）

<!-- 浙里办js -->
		<script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js">
		</script>
		<!-- 埋点js -->
		<script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>

3.2：实列化Zwlog（我选择的是封装起来进行全局调用，现在只是描述下流程等下会详细说明）

zwlog = new ZwLog({
			_user_id: userinfo.account
		})

3.3：开始埋点

let pvParams = {
				miniAppId: "应用id",
				miniAppName: "应用名称",
				page_start: "", //参数固定，用户进入当前页面时上报
				t2: t2 / 1000 + "秒", //页面加载时间
				t0: t0 / 1000 + "秒", //页面响应时间
				log_status: userinfo.openid ? '02' : '01',
				miniapp_first_user: "0", //是否首次访问微应用
				userType: userinfo.openid ? "legal" : document
					.cookie, //用户类型，个人(person)/企业(legal)  用户登录则采集，若未登陆则上传当前浏览器cookeid
				pageId: path,
				pageName: pageName,
			};
			zwlog.onReady(function() {
				zwlog.sendPV(pvParams);
				delete pageLogMap[path];
			});

4：实施步骤

4.1：index.html引入两个js文件

4.2：创建 zwUtil.js文件

// 埋点对象
let zwlog;
// 页面埋点数据
let pageLogMap = {};
// 不参加埋点的白名单
const White_List = [
	// 测试页面的登录
	"/pages/login/login"
]
/*
 * *******用户信息采集，同时声明 Zwlog 对象实例
 * uerId 用户 ID  没登录就非必填，登录了必填
 */
export function initZwlog() {
	let userinfo = uni.getStorageSync('userinfo');
	userinfo = sessionStorage.getItem('userinfo')
	userinfo = JSON.parse(userinfo)
	console.log(userinfo, 'userinfo');
        //判断是否存在登录
	if (userinfo) {
		zwlog = new ZwLog({
			_user_id: '单点登录返回的用户id'
		})
	}
}
/*
 * *******PV 日志参数
 * url 页面路径 【选填】（未传参默认获取当前路由地址）
 * enterPageTime 【必填】（默认在路由改变的时候自动获取时间） 进入页面的时间 new Date()
 * leavePageTime 【必填】（默认在路由改变的时候自动获取时间） 离开页面的时间 new Date()
 * loadTime【必填】（页面onShow中获取当前时间） 加载完的时间 new Date()
 * responseTime 【必填】（页面onShow的nextTick中获取当前时间） 响应完的时间 new Date()
 */

export function zwlogPvGlobal({
	url = null,
	enterPageTime = null,
	leavePageTime = null,
	loadTime = null,
	responseTime = null,
	pageName = ""
} = {}) {
	let path = url
	let flag = false
	for (let i = 0; i < White_List.length; i++) {
		const ele = White_List[i];
		let reg = new RegExp('^' + ele + '$', "g")
		let _f = reg.test(path)
		if (_f) {
			flag = true
		}
	}
	if (flag) return
	if (!zwlog) initZwlog();
	if (!zwlog) return
	if (!pageLogMap.hasOwnProperty(path))
		pageLogMap[path] = {
			enterPageTime: null,
			leavePageTime: null,
			loadTime: null,
			responseTime: null,
		};
	if (enterPageTime) pageLogMap[path].enterPageTime = enterPageTime;
	if (leavePageTime) pageLogMap[path].leavePageTime = leavePageTime;
	if (loadTime) pageLogMap[path].loadTime = loadTime;
	if (responseTime) pageLogMap[path].responseTime = responseTime;
	if (
		pageLogMap[path].enterPageTime &&
		pageLogMap[path].leavePageTime &&
		pageLogMap[path].loadTime &&
		pageLogMap[path].responseTime
	) {
		/*
		 * miniAppId 应用开发管理 平台 appId
		 * miniAppName 应用开发管理 平台应用名称
		 * log_status 用户登录状态 （01:未登录/ 02:单点登录）
		 * Page_duration 浏览时长  用户从进入到离开当 前页面的时长
		 * t2 页面加载时间  页面启动到加载完成 的时间
		 * t0  页面响应时间  页面启动到页面响应 完成的时间
		 * pageId  应用页面 ID
		 * pageName  应用页面名称
		 */
		let t2 =
			pageLogMap[path].loadTime.getTime() -
			pageLogMap[path].enterPageTime.getTime();
		let t0 =
			pageLogMap[path].responseTime.getTime() -
			pageLogMap[path].enterPageTime.getTime();
		setTimeout(() => {
			let userinfo = uni.getStorageSync('userinfo');
			userinfo = sessionStorage.getItem('userinfo')
			userinfo = JSON.parse(userinfo)
			let pvParams = {
				miniAppId: "平台 appId",
				miniAppName: "平台应用名称",
				page_start: "", //参数固定，用户进入当前页面时上报
				t2: t2 / 1000 + "秒", //页面加载时间
				t0: t0 / 1000 + "秒", //页面响应时间
				log_status: userinfo.openid ? '02' : '01',
				miniapp_first_user: "0", //是否首次访问微应用
				userType: userinfo.openid ? "legal" : document
					.cookie, //用户类型，个人(person)/企业(legal)  用户登录则采集，若未登陆则上传当前浏览器cookeid
				pageId: path,
				pageName: pageName,
			};
			zwlog.onReady(function() {
				zwlog.sendPV(pvParams);
				delete pageLogMap[path];
			});
		}, 500);
	}
}

4.3：页面使用

4.3.1：全局监听路由（APP.vue）主要是为了获取进入页面时间和离开页面时间

import {
		zwlogPvGlobal
	} from "@/utils/zwUtil.js";
        
watch: {
			$route(to, from) {
				console.log(to, from, '当前页面路由');
				zwlogPvGlobal({
					url: to.path,
					enterPageTime: new Date(),
					pageName: to.meta.navigationBar.titleText,
				});
				zwlogPvGlobal({
					url: from.path,
					leavePageTime: new Date(),
					pageName: from.meta?.navigationBar?.titleText,
				});
			}
		},

4.3.2：页面使用 获得页面初始化时间和加载完成时间

import {
		zwlogPvGlobal
	} from "@/utils/zwUtil.js";
        
        onLoad(() => {
		let sUserAgent = window.navigator.userAgent.toLowerCase()
		console.log(sUserAgent, '获取当前环境');
		let bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1;
                //bIsDtDreamApp如果存在则代表是浙里办环境
		if (bIsDtDreamApp) {
			let path = getCurrentPages();
			// 加载时间
			zwlogPvGlobal({
				url: path[path.length - 1].route,
				loadTime: new Date(),
			});
			// 相应时间
			nextTick(() => {
				console.log('埋点完成');
				zwlogPvGlobal({
					url: path[path.length - 1].route,
					responseTime: new Date(),
				});
			});
		}
                })

4.4：结果查看

打开网络，点击全部里面出现 xx.gifxxxx 代表成功

5：注意事项

5.1：浙里办不支持uniapp的uni.getStorageSync也不支持永久存储

ZWJSBridge.setLocalStorage({
			key: 'userinfo',
			value: JSON.stringify(obj)
		}).then(res => {
			console.log(res, '存储成功');
		})
 ZWJSBridge.getLocalStorage({
		 	key: 'userinfo'
		 }).then(res => {
		 	console.log(res, '读取成功');
		 	userinfo = res
		 })

5.2：浙里办方法调用需要在onReady(function() {});之后

5.3：浙里办获取地理位置需要使用它自己的方法

ZWJSBridge.onReady(() => {
			ZWJSBridge.getLocation().then((result) => {
				console.log('#### ZWJSBridge.getLocation() log. result:  ' + result);
				try {
					// 将对象转化为字符串
					var resultStr = JSON.stringify(result);
					console.log('#### transfer to String , resultStr：  ' + resultStr);
				} catch (error) {
					console.log('####  transfer failed. error:  ' + error);
				}
			}).catch((error) => {
				console.log('#### ZWJSBridge.getLocation() error:  ' + error);
			});
		})

5.4：环境判断

let sUserAgent = window.navigator.userAgent.toLowerCase()
let bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1 // 浙里办APP
let bIsAlipayMini = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1//支付宝浙里办小程序
let bIsWeixin = sUserAgent.indexOf("micromessenger") > -1//微信小程序

6：单点登录（这边思路还是比较简单的）

6.1：第一种情况，请求路由带ticketId

var urlsss = window.location.href// 获取页面路由
if (urlsss.indexOf('ticket') != -1) {
          console.log('denglu2');
		const regex = /[?&]ticketId=([^&#]+)/;
		const match = urlsss.match(regex);
		console.log(match[1])
                //请求后端接口，将match[1]传递过去
           }

6.2：第二种情况，请求路由不带ticketId

if (ZWJSBridge.ssoTicket) {
            const ssoFlag = await ZWJSBridge.ssoTicket({});
            if (ssoFlag && ssoFlag.result === true) {
		//使用 IRS“浙里办”统一单点登录组件
                if (ssoFlag.ticketId) {
                //请求后端接口，将ssoFlag.ticketId传递过去
                }
         }

7：适老化

这边就简单说下思路和方法，如果有人还不懂的话后续可以单独写下

思路：全局创建一个变量，这变量代表的是当前页面根元素的字体大小；uniapp里面存在一个 'page-meta'标签，H5的话可以直接来修改根元素文字大小

document.documentElement.style.fontSize

1：页面顶部标签

<page-meta :root-font-size="`${Fonsti}px`"></page-meta>

2：新建edition.js

import {
	identifyPinia
} from '@/store/identify.js';
const store = identifyPinia();
export function computingStyle() {
//edition是我存储的当前字体大小
	let edition = uni.getStorageSync('edition');
	// let fontsize = edition == '关怀版' ? 20.5 : 16
	let fontsize = edition ? edition : 16;
	console.log(fontsize);
	return fontsize * 1;
}

3：页面使用

import { computingStyle } from '@/utils/edition.js'

/** 根元素字体大小 */
	const Fonsti = ref<number>(16);
        
   onShow(() => {
		Fonsti.value = computingStyle();
	})
    onLoad(() => {
		Fonsti.value = computingStyle();
	})