浙里办(H5)上传流程

“浙里办”H5微应用迁移流程

主要满足三点：（摘自官方文档）

https://odynww.yuque.com/docs/share/caa2a215-bb8b-4739-a4e0-b636f5a76e82#PzLP5

1. 满足H5微应用aplus埋点，适老化模式要求。
2. 满足H5微应用适配要求（浙里办APP、支付宝-浙里办小程序）
3. H5微应用前端代码包部署到应用开发管理平台（http://op.zjzwfw.gov.cn/mobile/app/management），更换新的单点登录回调地址。

额外注意点：应用开发管理平台部署H5应用内禁止出现或回跳任何应用汇聚平台相关链接。（就是应用内不能跳到第三方平台）。

主要步骤

1. 登录政务中台-应用开发管理平台：应用开发管理平台

（账号密码由政府部门提供）

然后去政务中台-应用管理-新建应用

内容都不规定 一步步填完之后就可上传代码

2.上传代码准备

2.1配置文件gbc.json存储在根路径下，如果使用默认配置，则无需放置该文件。

文件内容：

{

    "type":"gov-build-config",

    

    "version":"1",

    

    "outputPath":"dist",

    "outputDir": "build",

    "publicPath":"./"

    

}

outputPath：npm run build 打包执行结果存储目录

2.2 引入ZWJSBridge

头部引入

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

引用后会自动引入ZWJSBridge方法

在页面头部初始化jsapi

ZWJSBridge.onReady(() => {

      console.log('初始化完成后，执行bridge方法');

      });

之后就可调用相关接口获取登录者相关数据

（https://odynww.yuque.com/office/yuque/0/2021/pdf/12476514/1614162159827-c4ad4c9b-6b0e-46a9-93a0-860b114926a7.pdf?from=https%3A%2F%2Fodynww.yuque.com%2Fdocs%2Fshare%2Fcaa2a215-bb8b-4739-a4e0-b636f5a76e82%23PzLP5）相关接口文档

例如：获取用户经纬度

ZWJSBridge.getLocation({}).then(res => {

          window.obj = res;

          console.log('window.obj---index.html', window.obj)

        }).catch(err => {

          console.log(err)

        })

通过这个方法取到用户经纬度，后面埋点要用

文档相关接口信息

 

2.3 单点登录功能

首先判断是浙里办环境还是浙里办支付宝小程序环境

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

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

const bIsAlipayMini =

sUserAgent.indexOf("miniprogram") > -1 &&

sUserAgent.indexOf("alipay") > -1;//浙里办支付宝小程序

浙里办APP环境下的登录地址：

https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=【接入码】

浙里办支付宝小程序登录地址：

https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=【接入码】

接入码需要业主提前申请

https://odynww.yuque.com/docs/share/5e432de5-086c-4761-ad30-eb957acb14d7?#

（接入代码申请流程文件）

申请后获得接入码和接入密码

获取接入代码后加钉钉群 33196742 找到 @俞锦涛 老师修改回调地址（就是登录后的回调地址） 只需要给他接入代码和自己页面的地址就行 浙里办APP和浙里办支付宝小程序回调地址相同

回调地址就是在政务中台-应用开发管理平台 代码上传后在测试环境点击上线 之后在应用管理的线上地址

进入登录地址后登录成功会自动跳转到你的页面 附带ticket参数 通过截取获取ticket

通过ticket参数可以获取登录人的个人信息 获取方法：

接口地址：https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=方法名

接口方法

ticketValidation

输入参数

Webservice 参数列表:

名称	说明	是否必填	数据类型	长度（字节）
servicecode	接入资源在SSO注册成功后的业务代码，由【SSO管理员】提供。	是	String	无限制
time	时间戳，当前时间 年月日时分秒 例：2009年10月10日 12时12分12秒格式为20091010121212	是	String	14
sign	MD5(servicecode+servicepwd+time)，将业务代码、业务密钥、发送时间按顺序连接并进行md5加密。注：1、参数servicepwd由【SSO管理员】提供；2、MD5算法是标准算法，可使用java内部实现；3、MD5后的值为32位并且小写。	是	String	32
st	票据	是	String	≤50
datatype	数据格式  xml  json。默认xml	是	String	≤10

返回参数

认证失败返回：

名称	说明	数据类型	长度（字节）
result	结果： 0： 成功 6001：st已经超时失效 6002：st不是票据类型 6003：st不属于该接入资源 6004：st格式不对 6099：其他错误
errmsg	错误说明	String
token	令牌	String	≤50
userid	用户在SSO分配的身份唯一号	String	32
loginname	登录的用户名	String	≤255
username	用户姓名	String	≤255

先通过ticketValidation方法获取token令牌

接口方法

getUserInfo

输入参数

Webservice 参数列表:

名称	说明	是否必填	数据类型	长度（字节）
servicecode	接入资源在SSO注册成功后的业务代码，由【SSO管理员】提供。	是	String	无限制
time	时间戳，当前时间 年月日时分秒 例：2009年10月10日 12时12分12秒格式为20091010121212	是	String	14
sign	MD5(servicecode+servicepwd+time)，将业务代码、业务密钥、发送时间按顺序连接并进行md5加密。注：1、参数servicepwd由【SSO管理员】提供；2、MD5算法是标准算法，可使用java内部实现；3、MD5后的值为32位并且小写。	是	String	32
token	令牌	是	String	≤50
datatype	数据格式  xml  json。默认xml	是	String	≤10

返回参数

认证失败返回：

名称	说明	数据类型	长度（字节）
result	结果： 0：成功 6501：令牌已经超时失效 6502: 该令牌不存在 6503: 获取用户信息失败 6504：令牌不属于该接入资源 6505：令牌格式不对 6599：其他错误
errmsg	错误说明	String
userid	用户在SSO分配的身份唯一号	String	32
authlevel	认证级别 1.非实名 2.初级实名 3.高级实名 （当认证级别为2或者3的时候实名信息才有效）	String	1
idtype	注册证件类型：1身份证 2护照 3军官证 4港澳居民来往内地通行证 5台湾居民来往大陆通行证 6外国人永久居留身份证
username	实名信息 -- 用户真实姓名	String	≤255
idnum	实名信息 – 注册证件号码：与注册证件类型对应（如注册证件类型是护照，证件号码这里对应的就是护照号码）	String	≤18
passport	护照
permitlicense	港澳居民来往大陆通行证
taiwanlicense	台湾居民来往内地通行证
officerlicense	军官证
greencard	外国人永久居留身份证（中国绿卡）
sex	实名信息 -- 性别 1男 2女	String	1
nation	实名信息 -- 民族(见国标GB3304-91)	String	2
loginname	登录名	String	≤255
email	邮件	String	≤255
mobile	手机号码	String	11
postcode	邮编	String	≤255
cakey	CA证书KEY	String	≤255
birthday	生日	String	≤255
country	国籍	String	≤255
province	省籍	String	≤255
city	城市	String	≤255
officeaddress	办公地址	String	≤255
officephone	办公电话	String	≤255
officefax	办公传真	String	≤255
homephone	家庭电话	String	≤255
homeaddress	家庭地址	String	≤255
useable	用户激活状态  1激活，2未激活	String	1
orderby	排序	String	≤11
headpicture	头像地址	String	≤255

之后再通过getUserInfo方法获取登录人员的个人信息

这里我让后端写了个方法 我只要传一个登陆地址url上附带的ticket就能获取到个人信息（因为登陆后还要通过身份证判断用户是否存在 存在则要返回其在这个应用上的个人信息）

通过这个方法取到userid 和 username 后面埋点要用

2.4 前端应用包采集埋点（aplus）

埋点相关内容（官方文档）

https://odynww.yuque.com/docs/share/caa2a215-bb8b-4739-a4e0-b636f5a76e82#PzLP5

采集块	采集项	采集key	采集value
基础采集（必埋）	日志采集地址（固定value）	aplus-rhost-v	alog.zjzwfw.gov.cn
	日志采集地址（固定value）	aplus-rhost-g	alog.zjzwfw.gov.cn
	“浙里办”APPID（固定value）	appId	60506758
PV日志参数（必埋）	应用开发管理平台appId	miniAppId	通过应用开发管理平台获取
	应用开发管理平台应用名称	miniAppName	通过应用开发管理平台获取
	经度	long	通过JSBridge API 获取
	纬度	lati	通过JSBridge API 获取
	用户类型	userType	通过JSBridge API 获取
用户信息采集（登录应用必埋）	当前用户ID	_user_id	通过单点登录功能获取
	当前用户昵称	_user_nick	通过单点登录功能获取

页面头部引用aplusJS

(function SDK(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-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'] });

三个必埋点 埋点key和value固定

aplus_queue.push({

action:'aplus.sendPV',

arguments:[

{ is_auto: false },

{

miniAppId:'XXX' ,

miniAppName:'XXX' ,

userType: XXX,

long: XXX,

lati: XXX

}

]

})

PV日志参数必埋点

应用开发管理平台appId&appKey

应用开发管理平台获取位置：登录应用开发管理平台->应用管理->应用操作-应用配置

 

经度，维度，用户类型 通过JSBridge API 获取

// 获取用户类型

ZWJSBridge.getUserType({})

.then((res) => {

window.userType = res;

console.log('window.userType---index.html', window.userType)

})

.catch((err) => {

console.log(err);

});

// 获取经纬度

ZWJSBridge.getLocation({}).then(res => {

window.obj = res;

console.log('window.obj---index.html', window.obj)

}).catch(err => {

console.log(err)

})

用户信息采集必埋点，需要在用户登录后进行埋点，通过单点登录功能获得

BLOCK为头部，START为尾部（aplus官方文档说明）

aplus_queue.push({

action: 'aplus.setMetaInfo',

arguments: ['_hold', 'BLOCK']

})

aplus_queue.push({

action: 'aplus.setMetaInfo',

arguments: ['_user_nick', XXX]

})

aplus_queue.push({

action: 'aplus.setMetaInfo',

arguments: ['_user_id', XXX]

})

aplus_queue.push({

action: 'aplus.setMetaInfo',

arguments: ['_hold', 'START']

})

3.应用适老化

通过JSapi获取用户ui模式

// 获取用户Ui模式

ZWJSBridge.getUiStyle({}).then(res => {

window.ui = res;

console.log('window.ui---index.html', window.ui)

}).catch(err => {

console.log(err)

})

相关适老化规范文档

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

根据文档内容规范进行改造

【目标】

开发大字版（适老模式）

1.（必做）H5应用内根据《 "浙里办"APP适老化设计规范.pdf 》做大字版适配。

2.（必做）进入H5应用首页，实现浙里办容器环境内JSBridge.getUiStyle能力判断当前显示标准版或适老版样式。

3.（选做）字体随系统设置调整，或H5应用内部具备字体大小设置选项。

4.（选做）内嵌适老版界面的移动应用首页需具备显著入口，支持切换至适老版。或在首次进入时给予显著切换提示，且在“设置”中提供“长辈版” 入口。（摘自官方文档）

4.应用适配

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

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

const bIsAlipayMini =

sUserAgent.indexOf("miniprogram") > -1 &&

sUserAgent.indexOf("alipay") > -1;//浙里办支付宝小程序

判断对应环境跳到对应登录地址即可

4.1二次回退问题

“浙里办“项目单点登录、埋点、二次回退的问题_Bonne_nuit_的博客-CSDN博客_浙里办二次回退

5.上传代码

 

除node外所有文件选中解压即可

然后在政务中台-应用开发管理平台-应用管理-部署发布-上传代码

代码编译通过之后点上线

6.应用迁移申请

政府部门及企事业单位人员通过浙政钉扫码进行迁移浙里办申请，申请过程需要填写信息及上传审核材料。

● 迁移后监控url：政务中台应用开发管理平台-应用管理-访问地址（上线后生成）

● 迁移前监控url：线上环境浙里办H5应用访问地址（汇聚平台应用访问地址）

● 服务名称 请严格按照 应用迁移计划表中 应用名称 填写，如填写错误则无法正确匹配线上迁移应用。

● 请务必使用生产环境（正式）的前端应用代码包、应用自有服务端应用入口链接提交审核，审核完成后会直接根据监控url链接变更浙里办线上环境应用地址。

1.应用上线申请报告

补充：应用上线申请报告填写说明

 

2.应用图标

格式：png；尺寸：108*108；背景：透明底；大小：不超过120kb；颜色（四选一）：渐变色

3.录屏（主业务链路）

浙里办APP（ios、android）从应用开发管理平台-访问地址 扫码开始

支付宝-浙里办小程序（ios、android） 从 React App 生成支付宝-浙里办小程序码URL 将URL信息 发送在钉钉APP内，录屏从 钉钉APP内点击 URL信息开始。

 

 

4.浙里办APP应用二维码（https开头需要与监控url生成的二维码保持一致）、支付宝-浙里办小程序应用小程序码（url地址可在 React App 生成支付宝-浙里办小程序应用小程序码）

二维码（浙里办APP扫码）：应用开发管理平台-应用管理-应用访问地址

小程序码（支付宝APP扫码）：复制 应用开发管理平台-应用管理-应用访问地址 到 React App 生成

5.应用上架的业务功能说明（重要材料）

6.应用上架运维材料

7.应用安全测试报告

以上材料都需要提供上传，缺一不可，材料名称尽量按照格式要求命名。

8.适老化材料

移动端-二维码：

 

PC-URL：https://yida-pro.ding.zj.gov.cn/alibaba/web/APP_X4CVAHVS1JXI2DKMG4MY/inst/instStart.html?processCode=TPROC--GWLBVWDV2ITSOHZ12XDAE5QHX6SGW11VCW2XMKZ1&formUuid=FORM-GWLBVWDV2ITSOHZ12XDAE5QHX6SGW1YUCW2XMKY1#/

（应用申请地址）