浙里办开发详细介绍（2023年底版）

浙里办开发介绍-简易版（不喜勿喷）

开发商工作台irs (互联网可进)：IRS-应用发布子系统 (zj.gov.cn)

业主方工作台irs （必须是政务网-vpn连接政务网也可）:https://irs.zj.gov.cn/home

工单地址：浙江省一体化数字资源系统 - 运营运维子系统

注意：

因为前端代码要上传到开发商平台，所以必须要支持 npm install ，npm build 等npm操作

所以，uniapp HBuilderX直接生成的代码结构不支持，要手动转成功vue的结构

这里就不做说明，相信这个能力还是有的

全局：

路径： build > index.html

引入：浙里办公共js库

<script src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script>
<script src="//assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>

app.vue

onLaunch方法 初始化 zwjsbridge，以便页面中调用公共js不会报错

			ZWJSBridge.onReady(() => {
				console.log("初始化完成后，执行bridge方法");
				// this.$isResolve();
			});

最好把 单点登录方法放在一个空白页中（page/index.vue），放在pages.json中的第一个，已进入就先调用单点登录

1.单点登录（page/index.vue）

业主方irs申请 统一单点登录组件 即可， 拿到ak和sk,给开发商人员

ticketid 从 ZWJSBridge.ssoTicket 方法中拿到，传给后端即可

//单点登录
			// 判断是否有ticketId
			if (ZWJSBridge.ssoTicket) {
				const ssoFlag = await ZWJSBridge.ssoTicket({});
				if (ssoFlag && ssoFlag.result === true) {
					if (ssoFlag.ticketId) {
						// ssoFlag.ticketId
						// 拿到ticketid,调用自己的业务接口
						
					}
				} else {
					uni.showModal({
						title: "提示",
						confirmText: "退出",
						showCancel: false,
						content: '当前环境不支持“浙里办”登录',
						success: function(res) {
							if (res.confirm) {
								ZWJSBridge.close();
							} else if (res.cancel) {}
						},
					});
				}
			} else {
				uni.showModal({
					title: "提示",
					confirmText: "退出",
					showCancel: false,
					content: '加载异常',
					success: function(res) {
						if (res.confirm) {
							ZWJSBridge.close();
						} else if (res.cancel) {}
					},
				});
			}

2.埋点

前置：

app.vue定义

初始化两个时间（开始时间）

然后在onLaunch中 定义开始时间

export default {
    globalData: {
	    startTime: '',
	    startTime2: '',
    },

    onLaunch() {
		// 埋点时间
		getApp().globalData.startTime = new Date().getTime();
		getApp().globalData.startTime2 = new Date().getTime();
	},
}

 然后在初始页面（也就是调用单点登录页面中）（page/index.vue）

//先定义两个时间
var endTime1 = "";
var time1 = "";
var endTime2 = "";
var time2 = "";


1.获取埋点 应用启动到加载时间
onLoad(){
    // 埋点加载时间
	endTime1 = new Date().getTime();
	time1 = endTime1 - getApp().globalData.startTime;
}

2.应用启动到响应时间
endTime2 = new Date().getTime();
time2 = endTime2 - getApp().globalData.startTime2;

这个放在获取完ticketId之后调用后端接口把ticketId传给后端成功的回调里

拿到两个时间，然后下面的就可以全部拿到了

var zwlog = new ZwLog({
	_user_id: res.zlb_user, //单点登录接口调用成功之后 后端返回的浙里办拿到的浙里办userid
	_user_nick: res.nick_name,//后端返回的昵称
});
zwlog.onReady(function() {
	zwlog.sendPV({
	miniAppId: "",//应用开发管理 自己的appid,可以在irs上拿到
	Page_duration: "5秒", //随机几秒内即可
	miniappname: "",//应用开发管理 平台应用名称 系统名称即可
	pageName: "", //应用页面名称  系统名称即可
	pageId: "1", //页面id，随机即可
	t2: Number(time1 / 1000).toFixed(2) + "秒", //页面加载时间  页面启动到加载完成 的时间
	t0: Number(time2 / 1000).toFixed(2) + "秒", //页面响应时间  页面启动到页面响应 完成的时间
	log_status: "02", //登录02 未登录01
	_user_id: "7879", //上面已经拿到 随机即可
	_user_nick: "debug_user_name", //上面已经拿到 随机即可
	});
});

完整代码（page/index.vue）onLoad方法

            //单点登录
			// 判断是否有ticketId
			if (ZWJSBridge.ssoTicket) {
				const ssoFlag = await ZWJSBridge.ssoTicket({});
				if (ssoFlag && ssoFlag.result === true) {
					if (ssoFlag.ticketId) {
						// ssoFlag.ticketId
						// 拿到ticketid,调用自己的业务接口
						接口方法名（）.then(res=>{
                            endTime2 = new Date().getTime();
							time2 = endTime2 - getApp().globalData.startTime2;
                            var zwlog = new ZwLog({
	                            _user_id: res.zlb_user, //单点登录接口调用成功之后 后端返回的浙里办拿到的浙里办userid
	                            _user_nick: res.nick_name,//后端返回的昵称
                            });
                            zwlog.onReady(function() {
	                            zwlog.sendPV({
	                            miniAppId: "",//应用开发管理 自己的appid,可以在irs上拿到
	                            Page_duration: "5秒", //随机几秒内即可
	                            miniappname: "",//应用开发管理 平台应用名称 系统名称即可
	                            pageName: "", //应用页面名称  系统名称即可
	                            pageId: "1", //页面id，随机即可
	                            t2: Number(time1 / 1000).toFixed(2) + "秒", //页面加载时间  页面启动到加载完成 的时间
	                            t0: Number(time2 / 1000).toFixed(2) + "秒", //页面响应时间  页面启动到页面响应 完成的时间
	                            log_status: "02", //登录02 未登录01
	                            _user_id: "7879", //上面已经拿到 随机即可
	                            _user_nick: "debug_user_name", //上面已经拿到 随机即可
	                            });
                            });


                        })
					}
				} else {
					uni.showModal({
						title: "提示",
						confirmText: "退出",
						showCancel: false,
						content: '当前环境不支持“浙里办”登录',
						success: function(res) {
							if (res.confirm) {
								ZWJSBridge.close();
							} else if (res.cancel) {}
						},
					});
				}
			} else {
				uni.showModal({
					title: "提示",
					confirmText: "退出",
					showCancel: false,
					content: '加载异常',
					success: function(res) {
						if (res.confirm) {
							ZWJSBridge.close();
						} else if (res.cancel) {}
					},
				});
			}

3.适老化模式（page/index.vue）onLoad方法中，可以放在获取单点登录的上面

判断浙里办中的字体模式，然后系统中做出对应的切换

app.vue中css定义全局的css样式，以便切换

在定义一个全局的状态，存放是适老化的状态

每个页面根据状态在最大的盒子中绑定：class就行了

ZWJSBridge.getUiStyle()
				.then((res) => {
					if (res.uiStyle == "elder") {
						console.log("适老");
					} else {
						console.log("标准");
					}
				})
				.catch((err) => {
					console.log("getUiStyle--err", err);
				});

4. 浙里办页面title

未找到更好的办法，如果有可以分享一下哈

每个页面的onShow方法中，这样做的确很麻烦

ZWJSBridge.setTitle({
	title: "xxx",//要显示的页面title
}).then((result) => {
	console.log(result);
}).catch((error) => {
	console.log(error);
});

注意注意注意

备注：因为获取单点登录放在了空白页中，所以在获取调用单点登录成功执行完全部代码之后，要跳转到首页，用 uni.redirectTo 跳转方法，删除这个空白页，以免回退返回的时候又一次跳转到这个页面，也就是避免二次回退的问题

自己开发时遇到的问题：

1.静态资源文件（图片和文档）不能是中文命名,上传会报错

2.代码内不能有外链，也可能会上传成功，但不建议，浙里办禁止外链（a标签和ifream）

3.调试时ticketid  报无效的ticketid等问题，跟后端pick就行，ticketid只能用一次且时间很短，

而且只能浙里办（政务网）测试环境中调试，线下（互联网）测试环境目前我是没找到方法，

或者是服务器中的时间，是不是及时更新的等等，实在找不到办法就提个工单

4.最新的浙里办方法不支持老版本浙里版app（上线之后遇到，浙里办那边给的解释就是 浙里办app会强制更新到最新版本，不会有这个问题，笑死）

......

完结  撒花