H5入住浙里办App详细步骤

第一步：

在浙里办应用开发管理平台申请自己要入住浙里办的应用。如图：

点击图中的部署发布按钮，进入页面

然后将要入住浙里办app的H5项目上传到应用开发管理平台，这里的包需要注意几点：*** 1、必须是压缩包，我用的是zip压缩 2、压缩包解压后，能通过npm run build命令编译运行
上传成功后，点击图中的联调按钮，出现如下图，这里的回调地址是单点登录中要用到的:

3、如果上传失败，可以点击图img-2中的详情查看具体的问题。目前已知上传的两个问题： -- npm run build 后，生成的文件要在build目录下 -- 打包文件不能包含.git,node_modules文件

第二步：适配浙里办app

单点登录--官方文档"浙里办"h5微应用接入流程（http://op.zjzwfw.gov.cn/mobile/login?goto=/mobile/app）在官方文档的基础上 1、单点登录要区分平台，这里也就是浙里办app或者是支付包app，区别代码：

if (sUserAgent.indexOf("dtdreamweb") > -1) { // 浙里办app
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) {// 支付宝小程序，支付宝app
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、

图中设置的时候需要注意的是

api名称设置，系统名称为第2步创建的系统的英文名，其他的按照要求填写就好

5、点击下一步，出现：

这里的img-6中的生产或者联调目标地址填入自己的业务请求的具体地址。比如我们的有一个登录接口：

https://wlx.xxxx.cn/mobile-user/login，则这里的生产或者联调目标地址就需要填入地址https://wlx.xxxx.cn/mobile-user/login。其他的选项按照实际进行填写就好。

6、点击下一步，设置参数，

图中，按照现有接口设计规则，post入参方式一般都是

包装data透传，body入参选择

application/json。按照自己实际情况配置就好。参数配置完成后就相当于配置完一个接口api了。配置完后，可以看到是这样的

这里可以点击调试进行接口调试；注意的是，联调成功的接口，

必须要上线操作后才能够在H5应用里面调用成功。

7、值得注意的是，调用应用开发管理平台RPC接入配置的api，需要用到浙里办的网络请求库

jssdk-mgop (https://www.npmjs.com/package/@aligov/jssdk-mgop )

jssdk-mgop使用文档 (https://www.yuque.com/docs/share/1552e6fc-ea2d-43f8-a999-22dff9ef63b5?#)

特别注意的是mgop请求，可以在header里面设置'isTestUrl:1'配置来切换是访问RPC接口里面生产环境还是联调环境，设置了'isTestUrl:1'表示访问联调环境如图：

另外附上网友提供的接口调试工具：

官方接口测试工具

https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001803858/1.1/web/index.html?debug=true#/

为了防止跨域或者请求出错，需要在应用开发管理平台的应用管理里面点击应用的配置，配置跨域名请求和白名单。

进行到这一步基本上就相当于完成了浙里办应用的接入。针对设计规范的要求，如果用的

ant-design (https://ant.design/docs/react/introduce-cn) 后者是ant-mobile(https://mobile.ant.design/docs/react/introduce-cn)的组件库的话，基本不需要而外的适配。

注意的问题

这里还有一个有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)
      }
    })
  }, [])