项目是老项目之前上线在浙政钉上的现在老板说要在浙里办也上线一版刚转正的前端就开始一脸懵逼得瞎搞现在整差不多了复盘一下

政务中台debug工具测试

下载及登录绑定

查看日志

调试工具

浙里办工具引入

单点登录

个人登录

法人登录

获取登录信息（回调地址页）

单点登录避坑

埋点

zwlog.js埋点方案

埋点自查

适老化

政务中台debug工具测试

下载及登录绑定

debug工具安装包在钉钉对接群中有，下载解压后双击安装即可。

登录需要使用政府组织易和账号，可参考钉钉群文档《政府组织易和账号》或者问业主要。

登录之后会显示设备绑定二维码，开发人员只需使用浙里办app扫码即可绑定，注意，debug工具使用过程中浙里办要在手机保持运行状态。

查看日志

debug工具的日志功能可以记录浙里办的操作过程，包括事件、执行的方法、请求等，具体使用可以查看政务中台debug工具-查看日志

调试工具

使用调试工具可模拟浙里办环境进行本地预览，将调试地址写入目标url地址栏即可，可以查看页面布局、控制中心等。调试地址一般可以使用irs发布平台 - 发布管理-服务测名称管理 - 部署发布 - 联调中的调试地址。也可以使用本地前端地址，但是单点登录的回调地址白名单可能配置不了，所以就只能测试单点登录的功能

浙里办工具引入

<script type="text/javascript"  src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script>
<script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>

在项目的index.html文件中引入以上两个工具，其中ZWJSBridge.js是浙里办的对接工具，zwlog.js是浙里办埋点工具

单点登录

浙里办单点登录：进入应用前，使用浙里办的登录信息对接应用，使用户无需在应用内进行登录操作。

单点登录一般需要一个中间页用来跳转浙里办此项目中该页面为/blank页，进入应用时路由默认进入/blank。浙里办的登录权限有个人登录和法人登录。有登录需求的应用，个人登录是必做的，法人登录可根据需求添加。前端编写单点登录代码之前，需要业主在工作台上申请对应的单点登录组件，获取accessKey 和SecretKey。

用户进入/blank之后，判断用户是否已登（可用多种方式做判断，也可不判断直接调用单点登录组件）

如果用户信息已存在，则直接跳转应用内部页面；

未登录情况下调用ZWJSBridge的getUserType方法（获取用户类型_IRS）判断浙里办环境为个人登录还是法人登录

个人登录

ZWJSBridge.getUserType().then((data: any) => {if (data.userType != 2){console.log('个人登录');// 正式版跳转地址let redirectUrl = encodeURIComponent('https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/${appId}/reserved/index.html#/login') // 测试版跳转地址let redirectUrl = encodeURIComponent('https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/${appId}/lastTest/index.html#/login?debug=true')let sUserAgent = window.navigator.userAgent.toLowerCase()let isZlbEvn = sUserAgent.indexOf("dtdreamweb") > -1let isAliPay = sUserAgent.indexOf("miniprogram") > -1 && sUserAgent.indexOf("alipay") > -1;let isWxPro = sUserAgent.indexOf('micromessenger') > -1if (isZlbEvn) {console.log('浙里办App');location.href = =`https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=${accessKey}&redirectUrl=${redirectUrl}`} else if (isAliPay) {console.log('支付宝小程序');location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=${accessKey}&redirectUrl=${encodeURIComponent(redirectUrl)}`} else if (isWxPro) {console.log('微信小程序');// 微信单点登录不需要跳转地址，而是直接使用ZWJSBridge的API就行getTicket() }}
})

接入码 即申请单点登录组件时的accessKey。

回调地址 建议使用 IRS 开发商工作台线上环境地址（IRS 开发商工作台-发布管理-访问地址）作为单点登录回调地址，保障回调地址持续可用。不建议使用 IRS 开发商工作台测试环境地址与非 IRS 开发商工作台地址作为单点登录回调地址，因无法保障地址持续稳定可用。不加&redirectUrl 字段，则跳转默认正式配置的单点登录回调地址。

个人票据 在跳转回调地址时，会在回调地址后拼接?ticket(支付宝小程序参数名为ticketId)，在回调地址页可以用此票据向后端请求用户信息并保存登录权限，也可根据参数名称判断用户登录的环境。至此个人单点登录完成。

法人登录

ZWJSBridge.getUserType().then((data: any) => {if (data.userType == 2) {console.log('法人登录');let spappUrl = axios.defaults.baseURL +`${loginUrl}`location.href = "https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=" + spappUrl}
})

回调地址 建议使用后端线上地址，浙里办完成单点登录之后直接调用后端接口，并将后端获取法人信息所需的ssotoken拼接至?ssotoken，后端可直接获取ssotoken用以查询法人信息。前端需要将前端跳转页面地址告知后端，后端获取到企业信息之后将所需信息拼接至地址上后重定向到前端地址，前端跳转页面地址的要求同个人登录的回调地址。

获取登录信息（回调地址页）

onActivated(() => {if (loginStore().state == true) {ZWJSBridge.close();} else {Toast.loading({duration: 0,forbidClick: true,message: '登录中',});console.log('route', route);const ticket = route.query.ticketconst ticketId = route.query.ticketId as stringconst role = route.query.roleif (role) { //法人登录console.log('有role:', role, '准备存入法人信息');(axios.defaults.headers as any).zlbtoken = route.query.zlbtokenloginStore().setUserInfo({state: true,id: route.query.userid,name: route.query.username,role: 'company',tyshxydm: route.query.tyshxydm})Toast.clear()console.log('法人登录成功');router.push('/monitor')}else if (ticket) { //浙里办个人console.log('有ticket:', ticket, '准备发送请求')login(ticket).then((res: any) => {console.log('登录成功，数据为', res);if (res.data.result == 'success') {console.log('登录成功，数据为', res);(axios.defaults.headers as any).zlbtoken = res.headers['zlbtoken'];loginStore().setUserInfo({state: true,id: res.data.userid,name: res.data.username,role: 'parsonal'})router.push('/monitor')} else {router.push({name: 'forbid',params: {tip: res.data.tip}})}}).catch((err: any) => {router.push({name: 'forbid',params: {tip: err.message}})}).finally(() => {Toast.clear()})} else if (ticketId) { // 微信个人console.log('有ticketId:', ticketId, '准备发送请求')wxLogin(ticketId).then((res: any) => {console.log('登录成功，数据为', res);if (res.data.result == 'success') {console.log('登录成功，数据为', res);(axios.defaults.headers as any).zlbtoken = res.headers['zlbtoken'];loginStore().setUserInfo({state: true,id: res.data.userid,name: res.data.username,role: 'parsonal'})router.push('/monitor')} else {router.push({name: 'forbid',params: {tip: res.data.tip}})}}).catch((err) => {router.push({name: 'forbid',params: {tip: err.message}})})}}})

单点登录避坑

1. 浙里办为防止攻击，单点登录跳转的回调地址在开发测试阶段需要配置白名单，个人登录和法人登录都需要在钉钉对接群中@专人配置。单点登录和法人登录需要分别配置 ,配置信息如下

ak:你的单点登录组件的accessKey

sk:你的单点登录组件的secretKey

回调地址：个人登录或者法人登录的回调地址

正式地址：正式地址可以先不进行配置

2. 登录后如果需要在请求头中加入用户权限信息，则需要后端将权限标志返回

个人登录，因为用户信息是前端发起请求的，所以只需与后端商定将权限标志以何种方式返回即可

法人登录，用户信息是通过后端携带参数重定向的，前端只能拿到query上的信息，所以权限标志需要通过拼接query至前端地址，这样前端才能拿到并保存到请求头里。

3. 注意区分跨域出现是前端请求的跨域，还是浙里办跳转的跨域

如果是前端请求的跨域，则需要前后端配合处理跨域问题，可能是请求头未配置，可能是代理未实现等。如果是浙里办跳转的跨域，则需要检查配置的白名单回调地址与实际跳转地址是否有出入，后端是否完成nginx代理，检查回调地址的拼写，检查请求的地址(请求地址必须是https并申请域名）等。

埋点

zwlog.js埋点方案

埋点文档要求有许多必填的字段，所以最好统一封装成一个js文件（zwlog.js），在需要的地方调用。

定义一个全局的log对象并初始化

zwlog = new ZwLog({ // 应用需要登录的，需要在初始化对象时加入用户id和用户名// 应用无需登录的，则可以不写参数_user_id: userId, _user_nick: luserName
});

封装PV埋点

这里我只写了一些项目需要的，另有一些埋点数据可以根据需求修改，主要是Zwlog的sendPv()方法、埋点前的数据处理，埋点后清空暂存数据。

var pageLogMap: any = {}; //埋点参数集合
export function zwlogPvGlobal({url = null, //页面地址pagename = null, //页面名称enterPageTime = null, //页面进入时间leavePageTime = null, //页面离开时间
} = {}) {if (!zwlog) initZwlog();let path = url || '';if (!pageLogMap.hasOwnProperty(path))pageLogMap[path] = {enterPageTime: null,leavePageTime: null,};if (enterPageTime) pageLogMap[path].enterPageTime = enterPageTime;if (leavePageTime) pageLogMap[path].leavePageTime = leavePageTime;if (pageLogMap[path].enterPageTime && pageLogMap[path].leavePageTime ) {/** miniAppId 应用开发管理平台 appId* miniAppName 应用开发管理平台 应用名称* log_status 用户登录状态 （01:未登录/ 02:单点登录）* Page_duration 浏览时长  用户从进入到离开当前页面的时长* pageId  应用页面ID* pageName  应用页面名称*/let Page_duration = pageLogMap[path].leavePageTime.getTime() -pageLogMap[path].enterPageTime.getTime();let pvParams = {miniAppId: 'appid请从irs工作台获取', miniAppName: '应用名称', log_status: '标记登录状态'Page_duration: Page_duration / 1000 + "秒",pageId: path,pageName: pagename};zwlog.onReady(function () {console.log('zwlog准备');zwlog.sendPV(pvParams) //发送埋点信息console.log('zwlog已发送',pvParams);delete pageLogMap[path]; 清空埋点集合 避免重复});} else {let result = "";for (let k in pageLogMap[path]) {if (!pageLogMap[path][k]) result += k + "，";}console.warn("埋点缺少参数=>>", result);}
}

事件埋点

事件埋点在这次项目里没有涉及，但网上大部分关于事件埋点的文档，介绍的事件埋点主要信息即埋点事件代码trackerEventCode(字符串)、触发事件代码eventType(字符串)、事件传递的信息eventParams(对象)。具体可以参考浙里办新版埋点方案-CSDN

埋点自查

埋点自查方式可以查看钉钉群文档《对接中应用自查埋点方法》，需要注意的是，在debug工具上调试本地地址，是查看不了埋点是否成功的，将代码上传irs测试环境，然后将线上测试地址在debug工具进行调试，就可以对应查看埋点是否成功了。测试成功之后，可以在钉钉群里@专门的老师帮你查看埋点是否埋成功了。

适老化

适老化就是根据标准版还是长辈版切换页面的样式，方便长辈使用。

长辈版的主要原则就是字体不小于18px,按钮不小于44px,简化操作流程和数据显示。

在进入应用时，要先判断浙里办是长辈版还是标准版，这里用到的方法是ZWJSBridge.getUiStyle()获取用户当前UI风格，另外浙里办要求应用内部要有长辈版切换功能，比较推荐在浙里办接入之前先将应用内的UI切换测试完成，这样方便直接在浏览器进行测试。

UI切换的一种思路是，准备两套样式代码,分别对应标准版和长辈版，在进行UI切换时根据变量使用对应的样式文件即可。

这里我们用的是另一种SCSS变量的形式，前端编写SCSS代码时需要变化的部分都使用变量，UI风格变化的时候，只需改变对应SCSS变量即可。

浙里办前端H5对接小结（复盘自用)相关推荐

浙里办接入 H5应用使用说明
参考官网链接: https://www.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050 说明接入方式有两种: 1.使用Rax框架并 ...
浙里办前端上传部署报错
1 因为本地node版本跟浙里办的版本不一样 2先去node官网下载和浙里办一样的node 14 3 对vue工程进行清理操作 npm cache clean --forcerm -rf node_ ...
H5浙里办对接流程和问题记录
使用框架介绍:vue3 + vite + vant 前端对接流程总结 1.环境准备 1.1 引入JSBridge 1.2 更改打包目录 2.单点登录 3.适老化(浙里办上架h5硬性要求) 4.MGOP ...
浙里办完整开发流程（仅前端）
开发之前一定要作的几点 1.添加浙里办钉钉对接群群号 34143965(有什么不定的地方就大胆问群里的几个负责人) 2.问钉钉群里面得的老师要开发流程相关文件和开发注意事项(浙里办适老化对ui有 ...
新手小白H5微应用接入浙里办流程指南
第一步:前期准备工作 1.联系业主单位于irs业主-工作台(操作角色:业主单位-IRS 应用管理员,操作平台:irs.zj.gov.cn)创建H5微应用,相应资料填写,开发商可协助. 2.由业主单位[ ...
【浙里办】浙里办开发上架指南北西东，指乱七八糟。避坑手册Cookbook
注:你现在看到的写于2022-12-08,有效期不确定.毕竟你不知道浙里办侧还会搞出什么花样来. 自己看吧,不用逐行读下去,按需跳转你们能看到这篇乐色的原因主要流程应用编目(开发灾难的开始) 组 ...
浙里办对接H5微应用遇到的问题
最近在搞浙里办对接,在这个对接中遇到了以下问题,单点登录.埋点.二次回退问题 "浙里办"H5微应用接入文档:语雀注意:我们做的是app对接单点登录由于浙里办微应用需要对支付宝 ...
浙里办APP对接常见问题
浙里办文档先看文档,文档很重要. https://odynww.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050#OieFC 发布 ...
浙里办H5微应用开发流程
一.代码开发 1. 源代码准备: 由于源代码需要能够部署到政务中台,即要支持npm run build构建源码.(解释:把源代码上传政务中台后,它会后台自动编译构建项目并取build文件夹下的产物 ...

浙里办前端H5对接小结（复盘自用)

政务中台debug工具测试

下载及登录绑定

查看日志

调试工具

浙里办工具引入

单点登录

个人登录

法人登录

获取登录信息（回调地址页）

单点登录避坑

埋点

zwlog.js埋点方案

埋点自查

适老化

浙里办前端H5对接小结（复盘自用)相关推荐

最新文章

热门文章