H5入住浙里办App最详细步骤

第一步：

• 在浙里办应用开发管理平台申请自己要入住浙里办的应用。如图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)
      }
    })
  }, [])

有问题可以留言，会有通知的！