应用上架浙里办指南

我们的h5应用现在已经上架到了浙里办，对接浙里办还是有点麻烦的，有很多坑，我协助大佬同事一起对接的，在这里记录一下对接过程中遇到的问题。

主要流程

首先在创建好应用、对接了用户体系、RPC接入、下载浙里办App、政务中台Debug工具等一系列流程之后，开始写前端代码。

先理一下逻辑：登录浙里办、拿到ticket换取用户id、获取用户信息、进入首页（需要在代码中区分是测试环境还是线上环境，如果是线上，要跳转到线上地址。只有发布之后才有线上地址）下图是简单的流程图：


区分测试环境和线上环境


整理的一些对接问题

1、问：引入 zwjsbridge.js 文件后，在浏览器中使用 ZWJSBridge.openLink 方法提示“未注册的 API”

答： 只有在政务中台 Debug 工具中才能模拟浙里办 APP，调用此类 API，请在“政务中台 Debug 工具”中打开。

2、问：政务中台 Debug 工具如何连接，政务中台 debug 工具连接失败怎么办？

答：

1）用浙里办 APP 扫一扫进行连接

2） 检查政务中台 Debug 工具端口是否被占用

3） 检查手机 WI-FI 是否和电脑在同一个局域网下

4） 检查电脑防火墙是否处于关闭状态

3、问：政务中台 Debug 工具是否需要配置白名单？

答：浙里办 APP 6.7 版本以后 政务中台 debug 工具 无需设置白名单

4、问：无线网关 JSAPI 请求错误

答：

1） 代码不能在浏览器运行，要在 Debug 工具运行

2）1 没解决，找后端同学确认一下问题原因

5、问：应用上传后空白页

答：自定义应用开发说明，开发者可以使用自定义框架构建前端应用，需遵循以下约定。在 package.json 文件中添加 build 命令，代码上传到应用后，应用开放平台将通过 build 命令构建应用。应用构建完成后，需要将生成的文件保存在同级目录的 build 目录下。


package.json

6、问：API 如何区分生产环境和开发环境

答：在 mgop 请求 headers 中加入 isTestUrl = “1”

7、问：代码上传后，代码编译失败。提示 运行失败，进程退出码 1 Error: Command failed: unzip -o -d /home/admin/project src.zip

答：解压压缩包失败了检查文件是否损坏，换一个压缩工具试一下。我用的是好压，换成 WinRAR 后就可以了。


8、问：路由模式为哪种，hash 还是 history？

答：推荐为 hash，检查 publicpath 是否为 “./”。

9、问：单点登录本地政务中台 debug 工具如何调试？

答：好像没有啥好的解决方案。我的解决方案是开启单点登录功能，代码上传后。用浏览器打开测试地址。测试地址会跳转到浙里办单点登录地址。登录完成后URL 会显示 ticket，可以拿到这个 ticket 到本地测试。

10、问：ticket 使用时间，使用次数？

答：ticket 使用时间 1 分钟，使用次数 1 次

11、问：如何埋点，哪些地方需要埋点？

答： 浙里办日志采集信息查询（T+1）：提供应用开发管理平台 appId 给浙里办-技术支持人员查询应用 UV、PV 数据，获取间隔 24 小时。

1）最佳实践 H5

https://www.yuque.com/docs/share/caa2a215-bb8b-4739-a4e0-b636f5a76e82#GSCS2

2）必埋参数

https://www.yuque.com/docs/share/caa2a215-bb8b-4739-a4e0-b636f5a76e82?inner=l0sxc

3）自查埋点

https://www.yuque.com/docs/share/caa2a215-bb8b-4739-a4e0-b636f5a76e82#0THkj

建议在更多页面进行 PV 埋点。如有难度，请至少 首页 pv、单点登录成功后 uv 数据需要两个 采集点。咱们要满足采集就好


12、问：rs4001

答：服务请求超时，请稍后再试。1.重启一下政务中台 Debug 工具，2.与后端确认接口无误

13、问：如何上传文件（图片、视频）？

答：API 网关入参没有支持 文件类型。建议开发商 可使用 oss 推进文件上传能力， 自行实现 保障可用。以文件流方式进行（不建议大文件使用）（用自己的服务端接口实现上传）

14、问：H5 上传图片到我们服务器 报 net::ERR_ACCESS_DENIED 错误如何解决？

答：

1）政务中台 API 网关目前没有支持 文件类型入参，如开发商 需要使用 文件上传能力 可自行实现保障可用。

2）建 议 通 过 政 务 中 台 debug 工 具 （ 群 文 件 ） 日 志 能 力 http://op.zjzwfw.gov.cn/mobile/documents/technology/171030321982999 捕获具

体错误信息，由开发商前后端老师自行沟通推进可用。如使用 OSS 可排查是否有在 OSS 配置 跨域。

3）用政务中台 Debug 工具查看文件上传是否错误


15、问：APPID 在哪？如何获取？

答：进入政务中台应用开发管理平台，应用管理 -> 部署发布 –> URL 中找到。


16、问：如何获取用户信息？

答：前端无需关心如何获取用户信息，确认使用单点登录后，服务端对接浙里办的用户体系，也就是采用单点登录的方式获取当前浙里办登录用户的登录信息。

17、问：图片上传，支付宝小程序图片选择失败怎么办？

答：支付宝上传图片

* step1 调用选择图片 ZWJSBridge API

* step2 path 转成 base64 文件路径

* step3 以 FormData 形式上传文件

Tips：支付宝小程序可使用 my.xxx 形式调用 API

18、问：支付宝小程序如何调试？

答：支付宝浙里办小程序调试的问题，您可以引用 vconslog 等 js 日志插件尝试调试，或是将 具体问题描述、问题复现录屏同步发出来 浙里办技术支持协助您推进排查。

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>

// VConsole 默认会挂载到 `window.VConsole` 上

var vConsole = new window.VConsole();

19、问：如何单点登录解决二次回退问题？

答：

1、 页面初始化，先判断有无 Ticket，若有，则去获取用户信息，若无，进行单点登录。

const ticket = getQueryString('ticket');

if (!ticket) {

       //解决二次回退问题

       uni.showLoading({

            title: '登陆中...',

            mask: true

        });

         watchApp();

         uni.hideLoading();

 } else {

    const redirect_path = getQueryString('sp');

     // 回调地址不是 线上地址，需要转发到 goto 地址

     if (redirect_path && redirect_path.indexOf('reserved') == -1) {

             const path = `${redirect_path.split('?')[0]}?ticket=${ticket}&debug=true`;

              window.location.replace(path);

      } else {

             this.globalData.isReady = true;

     }

     setLocalStorage('Ticket', ticket);

     this.globalData.Ticket = ticket;

}

/**

* 二次回退浙里办端

*/

export function watchApp() {

    window.addEventListener(

        "pageshow",

        function(event) {

            console.log("event:", event);

            console.log("window.performance:", window.performance);

            if (event.persisted || (window.performance && window.performance.navigation.type == 2)) {

                closePage();

            }

            goToSso();

        },

        false

    )

}

/**

* 重新登录

*/

export function goToSso() {

    const sUserAgent = window.navigator.userAgent.toLowerCase()

    const bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1; // 浙里办APP

    console.log("浙里办APP ", bIsDtDreamApp);

    if (bIsDtDreamApp) {

        // closePage();

           window.location.replace( `https://puser.zjzwfw.gov.cn/sso/mobile.doaction=oauth&scope=1&servicecode=${Config.serviceCode}&goto=${Config.devCallBackUrl}` )

    } else {

        openLink( `https://puser.zjzwfw.gov.cn/sso/mobile.doaction=oauth&scope=1&servicecode=${Config.serviceCode}&goto=${Config.devCallBackUrl}` )

    }

}

20、问：监控 URL 哪里获取？

答：政务中台应用开发管理平台 –> 应用管理 -> 访问地址

21、问：适老版（长辈版）如何开发？

答：我这边写了两套样式代码，根据当前的状态引入。


两个样式文件，按需引入

if (this.globalData.careMode) {

      require('./care.scss');

} else {

      require('./default.scss');

}

22、问：使用线上的二维码 浙里办 APP 扫码，显示了调试工具按钮。这个调试工具显示不显示跟什么有关系呢？

答：线上环境不会显示 debug 调试工具，检查一下代码页面链路问题，是否从线上环境跳转到了测试环境。比如我之前在开启长辈版加入了?debug=true 就显示了调试工具。

23、问：如果不想跳转到配置在个人中心的回调地址上面，该怎么做？

答：如不想跳转到配置在个人中心的回调地址上面，则可以将最终的跳转地址以goto 参数写在登陆地址后面，个人中心将会把该地址以 sp 参数回传给应用系统，应用系统需识别该参数并做跳转


其它说明

需求评审后先看需求给的相关文档，积极加群沟通。浙里办微应用对接群31419900，有问题可以先 @浙里办应用接入机器人 ，描述你的问题。能解决大部分问题。群里有详细的常见问题的文档

浙里办对接常见问题集锦

1. 单点登录、回调地址配置问题 @俞锦涛 @马筱赣

2. 其它问题 @卞振

相关文档

1. 政务中台·应用开发管理平台

http://op.zjzwfw.gov.cn/mobile/login?goto=/mobile/documents/technology

2. “浙里办”服务接入相关技术规范

https://odynww.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050?#DWJJb

3. “浙里办”h5 微应用适老化改造 · 对接组

https://odynww.yuque.com/docs/share/87e37096-84a9-4edd-a387-9127e3235ad7?#

4. "浙里办-IRS 服务侧发布-工作台 · 对接组"

https://odynww.yuque.com/docs/share/857a40ad-460c-497f-858a-45d1c2cf14fc#PhmVn

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,752评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,100评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,244评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,099评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,210评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,307评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,346评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,133评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,546评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,702评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,331评论 3赞 319
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2赞 351

推荐阅读更多精彩内容