开发之前一定要作的几点

1.添加浙里办钉钉对接群群号 34143965（有什么不定的地方就大胆问群里的几个负责人）
2.问钉钉群里面得的老师要开发流程相关文件和开发注意事项（浙里办适老化对ui有一定要求，要支持正常模式和适老化模式切换功能，所以得有两套ui。）

3.叫业主部门将IRS-应用发布子系统开一个账号给前端（给你注册一个浙政钉账号，属于业主政府部门下面），业主是irs主系统，开发商是子系统。

4.如果需要单点登录（一般都要）的话就要在业主的irs系统 http://irs.zj.gov.cn/workbench/myresource/applicationsystem 上提交获取用户信息的工单

这时候要看你开发的h5是针对这里办法人用户还是个人用户申请对应的工单就行。这一步是要业主去操作（内网系统）。

5下载这里办专用的开发测试工具（测试你开发的软件，该环境有一些api可供使用，需要使用你的浙政钉账号登录，然后使用浙里办app 手机和电脑处于同一个局域网扫码进行腰马合一测试） Windows版本https://gov-bus.oss-cn-hangzhou.aliyuncs.com/upload/MVPBuilder/ZWEuropeSetup.exehttps://gov-bus.oss-cn-hangzhou.aliyuncs.com/upload/MVPBuilder/ZWEuropeSetup.exe

6.在准备工作时就可以先进行代码开发（代码开发完成后再进行上线的相关配置）

7.一定要在 IRS-应用发布子系统上开发，不要用政务中台，那个已经弃用了，到时候没人给你上线。

准备工作完成

开发正式开始

1.环境准备

1.引入JSBridge

在浙里办的微应用中，很多地方需要使用到浙里办的一些封装API功能，也就是JSBridge，且所有JSBridgeAPI均支持Promise回调

在public/index.html中引入

<script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script>

在App.vue中进行全局初始化

onLaunch: function() {console.log('App Launch')ZWJSBridge.onReady(() => {console.log('初始化完成后，执行bridge方法')})
},

这样就可以使用这里办的一些api了，这些api只有在这里办专用的开发测试工具上和正式/测试环境才能使用

2.环境要求

开发商工作台支持基于类React语法的 Rax应用和自定义两种方式完成应用代码开发。

我用的是vue(也就是自定义开发)

由于浙里办的微应用是必须前后端分离，且前端文件需要部署到浙里办服务器上的，所以需要前端项目支持 rpm run build 命令，所以不能使用 Hbuilder X直接构建项目，需要如下命令构建

如果你是使用Hbuilder X编辑则需要在命令行创建应用

// 安装脚手架
npm install -g @vue/cli
// 新建项目
vue create -p dcloudio/uni-preset-vue 项目名字

3.更改打包目录

由于浙里办编译默认输出位置是build，但是uniapp的构建命令默认输出位置是dist；所以修改uniapp的构建命令输出位置，将pakeage.json中的scripts属性

UNI_OUTPUT_DIR='build'

由于前端项目部署在浙里办服务器上，所以还需要对manifest.json文件进行如下修改

"h5" : {"publicPath" : "./","router" : {"mode" : "hash","base" : "./"}}

2.单点登录

由于浙里办微应用需要对支付宝浙里办小程序与浙里办APP进行双端适配，而不同环境下的单点登录跳转链接也不同，所以需要进行应用环境的检测

1.判断当前是浙里办App还是支付宝浙里办小程序从而进行不同的回调地址登录

这里面的接入码是上面准备工作4 提到的单点登录工单返回材料

AKey是接入码

SKey是接入密码

这里只用到了AKey

单点登录工单可以看我另一篇文章（等我更新）

回调地址是要业主在IRS上创建应用并且上传代码后才能有

如果需要可看我另外一篇文章https://blog.csdn.net/qq_44766377/article/details/123481066https://blog.csdn.net/qq_44766377/article/details/123481066

isLoad: () => {
   if (bIsAlipayMini) {
       window.location.href = "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=接入代码&goto=附带跳转地址，以sp参数返回";
   } else {
       window.location.href = "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=接入代码&goto=附带跳转地址，以sp参数返回";
   }
}

我这里面的接入码和回调地址已经做过处理，没用的只是演示一下

回调地址第二个https就是每个应用唯一的回调地址分为测试地址和正式地址正式地址上线的时候要改为正式的

当你的应用版本发生变化或者变更到正式环境，就需要更改代码里面的回调地址和服务器端的回调地址两个地方的回调要统一才能正常访问

服务端回调地址更改找钉钉群里面的人修改

isLoad(){console.log('跳转了',this.bIsAlipayMini)if (this.bIsAlipayMini) {window.location.href = "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=99227ff499aa260aee23788b7522073f&goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/12345689/reserved/index.html";} else {window.location.href = "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=99227ff499aa260aee23788b7522073f&goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/123456789/reserved/index.html";}},

2.解决二次回退问题

// 浙里办APP判断页面进入状态watchApp(){window.onpageshow = (event) => {if (event.persisted || (window.performance && window.performance.navigation.type == 2)) {ZWJSBridge.close();}this.isLoad();}},
// 支付宝浙里办小程序判断页面进入状态watchApply(){window.onpageshow = (event) => {if (event.persisted || (window.performance && (window.performance.navigation.type == 1 || window.performance.navigation.type == 0))) {this.isLoad();} else {my.navigateBack();}}},

3.获取回调后的ticket参数

getQuery(name){let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");let r = window.location.search.substr(1).match(reg);if (r != null){console.log('ticket',r)return unescape(r[2]);}return null;},

4.调用上边的方法先获取到当前设备处于什么运行平台（支付宝 / 浙里办）然后再去判断是否处于登录状态执行第三步是否返回参数如果没有登录就执行登录第一步登录

登陆后会再次执行一次 init这个方法，这是候我们已经拿到 ticket参数了所以就进入第二步解决回退

这就是单点登录的基本过程

init(){this.sUserAgent = window.navigator.userAgent.toLowerCase();this.bIsDtDreamApp = this.sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APPthis.bIsAlipayMini = this.sUserAgent.indexOf('miniprogram') > -1 && this.sUserAgent.indexOf('alipay') > -1;if (this.getQuery('ticket') == null && this.ticket == "") {uni.showLoading({title: '登录中',mask: true});if (this.bIsAlipayMini) {this.watchApply();}else{this.watchApp();}} else {this.ticket = this.getQuery('ticket');uni.reLaunch({url: `./index?ticket=${this.ticket}`,})}},

3.获取用户信息

在获取用户信息之前还得先在IRS子系统上配置 RPC网关接口（这个接口适用于获取用户信息的）

api注册好之后我们就来调用

getTonkenAndUserInfo: (data) => {return new Promise((resolve, reject) => {that.$mgop({api: '刚刚注册api的名字',host: 'https://mapi.zjzwfw.gov.cn/', //固定地址data: data,dataType: 'JSON',type: 'POST',    //注册的方法appKey: '8864654654dfskglk', //appKEY要到irs上查看 这里我乱写的onSuccess: res => {if (res.data.result && res.data.result == 0) {resolve(res.data);}},onFail: err => {reject(err);}});})},getTonkenAndUserInfoParams: (method = 'ticketValidation', token = '') => {let mTime = that.$timeFormat(new Date(), 'yyyymmddhhMMss');let data = {method: method,servicecode: '接入码',  //就是上边提到的AKeytime: mTime,   //时间sign: md5Libs.md5(`接入码接入密码${mTime}`),  //接入码和接入密码不用分隔开 （这里是要用到md5加密）datatype: 'json'}if (token == '') {data.st = that.ticket;} else {data.token = token;}return data;},

时间格式化方法我是单独放一个js文件，注册到全局（这个方法要多次使用）

// 时间格式化
export const timeFormat = (dateTime = null, fmt = 'yyyy-mm-dd') => {// 如果为null,则格式化当前时间if (!dateTime) dateTime = Number(new Date());// 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式if (dateTime.toString().length == 10) dateTime *= 1000;let date = new Date(dateTime);let ret;let opt = {"y+": date.getFullYear().toString(), // 年"m+": (date.getMonth() + 1).toString(), // 月"d+": date.getDate().toString(), // 日"h+": date.getHours().toString(), // 时"M+": date.getMinutes().toString(), // 分"s+": date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加，必须转化成字符串};for (let k in opt) {ret = new RegExp("(" + k + ")").exec(fmt);if (ret) {fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))};};return fmt;}

调用获取信息方法

这里面包括了一点埋点的代码

this.getTonkenAndUserInfo(this.getTonkenAndUserInfoParams()).then(data => {return that.getTonkenAndUserInfo(that.getTonkenAndUserInfoParams('getUserInfo', data.token));}).then(data => {console.info(data);that.userInfo = data;// 保存到vuexthis.$store.state.userinfo.name = data.usernamethis.$store.state.userinfo.userId = data.useridthis.$store.state.userinfo.mobile = data.mobileconsole.log('用户信息',data)// 通过自带的api来获取埋点信息ZWJSBridge.getUserType({}).then(res => {that.userType = res.userTypeZWJSBridge.getLocation({}).then(res => {that.longitude = res.longitudethat.latitude = res.latitudethat.aplus()}).catch(err => {console.log('获取用户定错误',err) })}).catch(err => {console.log('获取用户类型错误',err) })}).catch(err => {console.log(err);});},

4.项目接口注册

还有一件事就是在你这个项目的所有接口都得通过这个网关，所以除了和这个获取用户信息接口，其他的接口都得自己注册上去

这个可以叫后台小伙伴去弄，因为后台可能比较熟悉

设置完成API以后，点击上线即可在前端使用网关API进行调用。上线后如需修改，点击升级即可重新编辑。

使用注册的接口

npm i --save @aligov/jssdk-mgop@3.0.0

引入

import { mgop } from '@aligov/jssdk-mgop';

我这里是在main.js中注册了全局pai

// 引用安装网关依赖
import { mgop } from '@aligov/jssdk-mgop';
Vue.prototype.$mgop = mgop

使用（get和post没啥大区别）

post

             this.$mgop({api: 'mgop.stsc.yff.merchangAddCS', //IRS上注册的api名称host: 'https://mapi.zjzwfw.gov.cn/', //固定地址data: this.information,  //你要传递的参数dataType: 'JSON',type: 'POST',  //方法appKey: '7gdfsdfgsdopc',  //appkeyonSuccess: res => {uni.showToast({title: '提交成功',duration: 500});},onFail: err => {console.log(res)}}); },

get

             this.$mgop({api: 'mgop.stsc.yff.merchantTypesCS', //api名称host: 'https://mapi.zjzwfw.gov.cn/', //固定地址data: {},   //参数 没有就不传dataType: 'JSON',type: 'GET',  //方法appKey: '7gsdaadgc',  // appkeyonSuccess: res => {})},onFail: err => {console.log(res)}});

5.埋点

首先在public/index.html中引入埋点的api脚本，为防止出现https://https://这种双协议头调用，除脚本自身外，还需先填写基础PV日志的埋点函数，如果不需要单点登录采集用户数据则不需要最后的BLOCK，其他均为固定值，照抄就行。

<script>(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://d.alicdn.com/alilog/mlog/aplus.js?id=202951085';f.parentNode.insertBefore(j, f);})(window, document, 'script', 'aplus_queue');aplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['aplus-waiting', 'MAN']});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']});aplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['appId', '60506758']});aplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['_hold', 'BLOCK']});
</script>

页面PV日志采集，aplus函数在取得用户经纬度、用户数据、用户类型等数据后再进行调用。如没有单点登录获取用户数据，则仅需要留’aplus.sendPV’这一个。

aplus(){console.log('埋点执行')console.log('longitude',that.longitude)console.log('latitude',that.latitude)console.log('userType',that.userType)aplus_queue.push({'action': 'aplus.sendPV','arguments': [{is_auto: false}, {miniAppId: '54464624121',  //appidminiAppName: '项目名称',   //项目的名称long: that.longitude,lati: that.latitude,userType: that.userType,}]});aplus_queue.push({action: "aplus.setMetaInfo",arguments: ["_user_nick", that.userInfo.username]});aplus_queue.push({action: "aplus.setMetaInfo",arguments: ["_user_id", that.userInfo.userid]});aplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['_hold', 'START']});console.log('埋点执行完成')},

调用

调用之前得先采集一些数据这些数据就可以用JSBridge的api来获取

埋点的代码我是放在了成功获取到用户信息之后执行的（认真阅读的话，应该知道上面有提过）

// 通过自带的api来获取埋点信息ZWJSBridge.getUserType({}).then(res => {that.userType = res.userTypeZWJSBridge.getLocation({}).then(res => {that.longitude = res.longitudethat.latitude = res.latitudethat.aplus()}).catch(err => {console.log('获取用户定错误',err) })}).catch(err => {console.log('获取用户类型错误',err) })}).catch(err => {console.log(err);});

6.醒目测试

项目上线前必须将代码直接弄为压缩包上传到开发商工作台

上传时要先将回调地址改为测试地址改为测试的回调地址

测试地址获得方式

点击联调

列如就是测试地址将地址复制拼接到回调地址后面

支付宝端地址

https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=AK（单点登录拿到的） &goto= 测试地址

这里办App地址

https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode= AK（单点登录拿到的 &goto= 测试地址

改为

回调地址修改完成后接下来代码打包不是 npm run build打包是直接打包（ node_modules不用打包没用的文件也可以不用打包）

上传代码

点击更新代码输入版本号将压缩包拖入点击提交

上传完成之后即可

通过预览的二维码查看效果

7.上线

上线之前得先准备材料这些个材料模板的向钉钉群里的对接人员要（logo 二维码自测录屏代码这几个是自己准备）

logo就是项目的logo要求是好像200kb以下

代码就是项目代码的压缩包（不要node-modules）

二维码是最终代码部署到IRS上后的那个二维码（到时候就知道了）

自测录屏，这里办app 支付宝这里办小程序苹果和和安卓共四个视频

找到服务侧应用发布

点击提交审批

根据业务信息填写吧

再把文件提价上去

这个工单是要走流程的

如果某一个流程不过关，就要重新整改，必须在两天之内整改，否则就要重新上线

7.开发测试和配置回调地址

在代码配置完成后总要测试一下的，这时候就要找到群里面的对接人找他配置回调地址。将AKey和SKey还有回调地址给他。这样以后你在IRS平台上传的代码就能够成功登录。

还有就是回调地分为测试地址和正式地址，上线前记得吧地址改为正式地址，代码和叫对接人员都要改为正式地址。再对接人员那，回调地址是可以多次修改的根据你的测试地址来修改，来不停的查看页面效果。

我知道的大概就这些。心累。

最后感谢大佬

浙里办完整开发流程（仅前端）相关推荐

新手小白H5微应用接入浙里办流程指南
第一步:前期准备工作 1.联系业主单位于irs业主-工作台(操作角色:业主单位-IRS 应用管理员,操作平台:irs.zj.gov.cn)创建H5微应用,相应资料填写,开发商可协助. 2.由业主单位[ ...
【浙里办】浙里办开发上架指南北西东，指乱七八糟。避坑手册Cookbook
注:你现在看到的写于2022-12-08,有效期不确定.毕竟你不知道浙里办侧还会搞出什么花样来. 自己看吧,不用逐行读下去,按需跳转你们能看到这篇乐色的原因主要流程应用编目(开发灾难的开始) 组 ...
浙里办H5微应用开发流程
一.代码开发 1. 源代码准备: 由于源代码需要能够部署到政务中台,即要支持npm run build构建源码.(解释:把源代码上传政务中台后,它会后台自动编译构建项目并取build文件夹下的产物 ...
浙里办开发票据认证单点登陆、令牌获取用户信息
浙里办开发票据认证单点登陆.令牌获取用户信息(JAVA后端处理) 最近在搞浙里办开发,周边的人里都没人接触过,以至于自己摸索搞起来比较心累.浙里办单点登陆需要在IRS上走申请,审核流程通过后,和指 ...
浙里办上架流程文档详细教程
文章声明:本文章涉及的资料只提供上架参考,不作为项目最终依据,且不涉及任何加密及版权信息简介浙里办是一款基于浙江政务服务网一体化平台能力的APP.2021年8月,"浙里办"A ...
浙里办(H5)上传流程
"浙里办"H5微应用迁移流程主要满足三点:(摘自官方文档) https://odynww.yuque.com/docs/share/caa2a215-bb8b-4739-a4e0 ...
浙里办前端H5对接小结（复盘自用)
项目是老项目之前上线在浙政钉上的现在老板说要在浙里办也上线一版刚转正的前端就开始一脸懵逼得瞎搞现在整差不多了复盘一下目录政务中台debug工具测试下载及登录绑定查看日志调试工具浙 ...
H5浙里办对接流程和问题记录
使用框架介绍:vue3 + vite + vant 前端对接流程总结 1.环境准备 1.1 引入JSBridge 1.2 更改打包目录 2.单点登录 3.适老化(浙里办上架h5硬性要求) 4.MGOP ...
浙里办H5应用开发中的注意事项
浙里办H5应用开发一.准备工作 1.从业主部门(需要开发应用的政府单位)申请浙政钉账号,最好是用自己的手机号去申请,因为浙政钉登录需要验证,如果用别人提供的账号,每次登录都很麻烦. 2.加入浙里办技 ...

浙里办完整开发流程（仅前端）