(仅前端)使用uniapp框架接入浙政钉H5应用(免登、埋点)

1,657 阅读3分钟

本文为作者接入浙政钉的过程,记录一下~

搭建环境

因浙政钉H5应用需要安装一些npm包以及现在的irs项目都需要前端项目可build,故使用uniapp框架vue-cli命令行搭建项目

image.png

进入正题-获取免登码,进行浙政钉免登

专有钉钉

  • 专有钉钉作为开发浙政钉的一个测试环境,里面包含了很多jsapi,请需要的小伙伴仔细去看专有钉钉的开发指南~

专有钉钉门户 (dg-work.cn)

    1. 浙政钉省级以及各地市应用技术支持群号
    1. 浙政钉省级以及各地市应用技术支持钉钉群号
    1. 省本级:群号:31431551
    1. 杭州:群号:34302232(1群) 35426643(2群)
    1. 嘉兴:群号:33291068
    1. 湖州:群号:35381358
    1. 绍兴:群号:34829275
    1. 金华:群号:35984633
    1. 宁波:群号:34049171
    1. 舟山:群号:34049228
    1. 温州:群号:31376536
    1. 台州:群号:34504434
    1. 衢州:群号:34286499
    1. 丽水:群号:33869997
    1. 按照官方文档中的教程配置
  • 安装钉钉jsapi npm install gdt-jsapi 在页面引用,这段代码只要在专有钉钉下才生效,需要测试的话将res显示到页面之后部署到线上之后通过手机版专有钉钉访问才能拿到免登授权码
import dd from 'gdt-jsapi';

dd.getAuthCode({}).then(res =>{
    console.log(res)
}).
catch(err =>{})
  • 前端获取到免登码发送给后端,后端再返回给前端token即可实现免登

image.png

浙政钉埋点

浙政钉埋点分为稳定性埋点、流量分析埋点

稳定性埋点

因现在浙政钉不需要开发人员进行稳定性埋点,所以我也没有具体实践,扒一下官方的吧 官方文档链接:浙政钉-H5&小程序应用采集开发手册 (yuque.com)

<script
src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js'
crossorigin='true'></script>
<script>
try{
constconfig={
bid:'************',
signkey:'1234567890abcdef',
gateway:'https://wpk-gate.zjzwfw.gov.cn'
};
constwpk=newwpkReporter(config);
wpk.installAll();
window._wpk=wpk;
}catch(err){
console.error('WpkReporterinitfail',err);
}
</script>

流量分析埋点

  • 流量分析埋点需要每个页面都要进行引入,所以我们需要把这部分代码抽成单独的js,然后在每个页面引入即可
//接收3个参数:page_id,page_name,page_url
export function queue(metaId, metaName, metaPath) {
	(function(w, d, s, q, i) {
		w[q] = w[q] || [];
		var f = d.getElementsByTagName(s)[0],
			j = d.createElement(s);
		j.async = true;
		j.id = 'beacon-aplus';
		j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
		f.parentNode.insertBefore(j, f);
	})(window, document, 'script', 'aplus_queue');

	aplus_queue.push({
		action: 'aplus.setMetaInfo',
		arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
	});
	aplus_queue.push({
		action: 'aplus.setMetaInfo',
		arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
	});
	var u = navigator.userAgent
	var isAndroid = u.indexOf('Android') > -1
	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
	aplus_queue.push({
		action: 'aplus.setMetaInfo',
		arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293']
	});

	//单页应用或“单个页面”需异步补充PV日志参数还需进行如下埋点:
	//console.log('执行埋点')  
	//基础埋点      
	// 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点:
	aplus_queue.push({
		action: 'aplus.setMetaInfo',
		arguments: ['aplus-waiting', 'MAN']
	}); //
	// 单页应用路由切换后 或 在异步获取到pv日志所需的参数后再执行sendPV:
	aplus_queue.push({
		'action': 'aplus.sendPV',
		'arguments': [{
			is_auto: false
		}, {
			// 当前你的应用信息,此两行请勿修改
			sapp_id: '', // 浙政钉到时候会给开发商的
			sapp_name: '', // 浙政钉到时候会给开发商的
			// 自定义PV参数key-value键值对(只能是这种平铺的json,不能做多层嵌套),如:
			page_id: metaId, //'页面ID,与page 参数配合使用,保证唯一性',
			page_name: metaName, //'页面中文名称'
			page_url: metaPath
		}]
	})

	// 用户信息埋点
	// 如采集用户信息是异步行为需要先执行这个BLOCK埋点
	aplus_queue.push({
		action: 'aplus.setMetaInfo',
		arguments: ['_hold', 'BLOCK']
	});
	// 设置会员昵称
	aplus_queue.push({
		action: "aplus.setMetaInfo",
		arguments: ["_user_nick", uni.getStorageSync("clientInfo").name]
	});
	// 设置会员ID
	aplus_queue.push({
		action: "aplus.setMetaInfo",
		arguments: ["_user_id", uni.getStorageSync("clientInfo").accountID]
	});
	aplus_queue.push({
		action: "aplus.setMetaInfo",
		arguments: ["_dev_id", "yourDeviceId"]
	});

	// 如采集用户信息是异步行为,需要先设置完用户信息后再执行这个START埋点
	// 此时被block住的日志会携带上用户信息逐条发出
	aplus_queue.push({
		action: 'aplus.setMetaInfo',
		arguments: ['_hold', 'START']
	});
};

在main.js中引入

image.png 然后在每个页面中调用该方法即可

image.png