浙里办开发介绍-简易版(不喜勿喷)
开发商工作台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会强制更新到最新版本,不会有这个问题,笑死)
......
完结 撒花