第一步：
- 在浙里办应用开发管理平台申请自己要入住浙里办的应用。如图img-1：
img-1
- 点击img-1中的
部署发布按钮，进入页面
img-2
- 然后将要入住浙里办app的H5项目上传到应用开发管理平台，这里的包需要注意几点：
***
1、必须是压缩包，我用的是zip压缩
2、压缩包解压后，能通过npm run build命令编译运行 - 上传成功后，点击图img-2中的联调按钮，出现图img-3，这里的回调地址是单点登录中要用到的:
img-3
3、如果上传失败，可以点击图img-2中的详情查看具体的问题。目前已知上传的两个问题：
--npm run build后，生成的文件要在build目录下
-- 打包文件不能包含.git,node_modules文件
第二步：适配浙里办app
- 单点登录--官方文档“浙里办”h5微应用接入流程
在官方文档的基础上
1、单点登录要区分平台，这里也就是浙里办app或者是支付包app，区别代码：
if (sUserAgent.indexOf("dtdreamweb") > -1) {
window.location.href = `https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=passp&goto=`;
}
if (
sUserAgent.indexOf("miniprogram") > -1 &&
sUserAgent.indexOf("alipay") > -1
) {
window.location.href = `https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=passp&goto=`;
}
2、要让浙里办技术人员帮忙配置图img-3中的回调地址。如果自己不想使用这个回调地址，则可以在单点登录几口后面的goto后面拼上想要回调的地址，这个地址会议sp参数的形式返回，需要自己解析参数然后进行处理。
3、在单点登录这个过程中，可能会存在进到我们自己应用首页，然后需要点击两次浙里办app导航栏返回箭头两次才能回到浙里办app页面，俗称二次回退问题，这里需要对这个问题做处理，处理代码为：
useEffect(() => {
dealGoBack()
}, [])
// 处理二次回退的问题
export function dealGoBack(){
const dtdreamweb = sUserAgent.indexOf("dtdreamweb") > -1
const miniprogram = sUserAgent.indexOf("miniprogram") > -1 && sUserAgent.indexOf("alipay") > -1
if(dtdreamweb){
//浙里办app
watchApp()
}else if(miniprogram){
//支付宝app
watchApply()
}
}
function watchApp(){
//@ts-ignore
let that = this
window.addEventListener('pageshow',function(event){
if(event.persisted || (window.performance && window.performance.navigation.type === 2)){
//@ts-ignore
ZWJSBridge.close()
}
that.isLoad()
},false)
}
function watchApply(){
//@ts-ignore
let that = this
window.addEventListener('pageshow',function(event){
if(event.persisted || (window.performance && (window.performance.navigation.type === 1 || window.performance.navigation.type === 0))){
that.isLoad()
}else if(event.persisted || (window.performance && window.performance.navigation.type === 2)){
//@ts-ignore
ZWJSBridge.close()
}
})
}
单点登录到这里基本都可以成功了，单点登录调用成功，浙里办会返回票据ticket，如果配置了goto参数，则会返回ticket和sp参数。然后通过ticket去获取浙里办相关的用户信息（这里需要后台参与）
三、设置基础埋点：“浙里办”h5微应用接入流程
基本参照官方文档就可以集成，不需要而外操作！如果需要特别的埋点，需要自己研究下！
四、业务api设置
目前浙里办要求入住的H5都必须是前后端分离，所以基本上服务端代码都是部署在自己公司的服务器上，H5前端页面才会上传到应用开发管理平台上。这里就需要将自己应用里面 业务api配置到应用开发管理平台上。现在举个例子配置，例如配置https://wlx.xxxx.cn/xxxx/xxxx
img-4
1、点击图img-4中的
RPC接入，进入到api配置界面2、点击页面左侧的 系统管理 ，新增一个系统，关联到的要入住的应用
3、系统创建好后，点击左侧的 api管理 ，进入配置api界面，点击 新增api 按钮
4、
img-5
图img-5中设置的时候需要注意的是
api名称设置，系统名称为第2步创建的系统的英文名，其他的按照要求填写就好5、点击下一步，出现：
img-6
这里的img-6中的生产或者联调目标地址填入自己的业务请求的具体地址。比如我们的有一个登录接口：
https://wlx.xxxx.cn/mobile-user/login，则这里的生产或者联调目标地址就需要填入地址https://wlx.xxxx.cn/mobile-user/login。其他的选项按照实际进行填写就好。6、点击下一步，设置参数，
img-7
图img-7中，按照现有接口设计规则，post入参方式一般都是
包装data透传，body入参选择application/json。按照自己实际情况配置就好。参数配置完成后就相当于配置完一个接口api了。配置完后，可以看到是这样的
img-8
这里可以点击调试进行接口调试；注意的是，联调成功的接口，
必须要上线操作后才能够在H5应用里面调用成功。7、值得注意的是，调用应用开发管理平台RPC接入配置的api，需要用到浙里办的网络请求库jssdk-mgop
jssdk-mgop使用文档
特别注意的是mgop请求，可以在header里面设置'isTestUrl:1'配置来切换是访问RPC接口里面生产环境还是联调环境，设置了'isTestUrl:1'表示访问联调环境如图：
image.png
另外附上网友提供的接口调试工具：
官方接口测试工具
为了防止跨域或者请求出错，需要在应用开发管理平台的应用管理里面点击应用的配置，配置跨域名请求和白名单。
进行到这一步基本上就相当于完成了浙里办应用的接入。针对设计规范的要求，如果用的ant-design后者是ant-mobile的组件库的话，基本不需要而外的适配。
注意的问题
这里还有一个有tabbar需要注意的问题，就是tabbar在fixed布局下在键盘弹起的时候，会上移的问题。
这里需要监听resize变化来是tabbar显隐
//通过hidden来控制tabbar的显隐
const [hidden,setHidden] = React.useState(false)
useEffect(() => {
let windowInnerHeight = window.innerHeight
window.addEventListener('resize', () => {
if (window.innerHeight < windowInnerHeight) {
setHidden(true)
} else {
setHidden(false)
}
})
}, [])
网友评论