浙里办对接 h5 时 遇到的问题
这里办接通会有很多bug和问题。
接通最少需要经过以下前期问题：
1：首先是所有人都会遇到的白屏问题（打包成功上线到应用app上后首次发生的问题）
vue和react版本都有
此vue的配置主要是：config.js： public，output输出更改 build目录下
// 部署应用包时的基本URL，如果是生产环境，部署到 /cli-study/dist 路径；如果是开发环境，部署到根路径
publicPath: !debug
? './'
: './',
// 输出文件路径
outputDir: 'build',
gbc.json 配置添加 {
"type": "gov-build-config",
"version": "1",
"entryHTML": "/index.html"
}
2： 获取不到ticket 问题：
ticket是打包好后的app 通过跳转登录 ，登录成功会自动回调到部署上官网服务器的原上线成功的h5页面，
自动会在url路径上携带
需要取出，取的时候不需要再加iframe，但是src需要是线上的路径
上线后端二维码地址，而非测试打包成功的，不然获取不到ticket 官网后端管理右侧线上二维码地址，非左侧
<template>
<div id='login'>
</div>
</template>
//获取ticket 票据信息
getTicket() { // 获取票据
var url = window.location.href// 获取页面路由
if (url.indexOf('ticket') != -1) {
const params = url.split('?')[2].split('&')// 截取路由
for (let index = 0; index < params.length; index++) {
if (params[index].indexOf('ticket=') != -1) {
this.ticket = params[index].split('=')[1]// 获取路由ticket
break
}
}
}
if (this.ticket != '') {
this.postTicket(this.ticket)
}
},
//票据验证的登录,调用接口是 浙里办官网提供的api - mgop
postTicket(value) { // 票据验证登录
mgop({
api: 'mgop.utry.sms.sso', // 必须
host: 'https://mapi.zjzwfw.gov.cn/',
data: { ticket: value },
type: 'POST',
appKey: 'izt8cldk+2001830421+exokfd', // 必须
onSuccess: res => {
const resultCode = res.data.code// 获取返回的请求状态码
const resultData = res.data.data// 获取返回的结果
console.log('登录状态', resultCode)
console.log('返回结果', resultData)
console.log(new Date())
const Data = JSON.parse(JSON.stringify(resultData.userInfoResult))
this.userInfoData = Data
console.log('本地结果', this.userInfoData)
if (resultCode == 200) {
// this.SetCookies()
console.log('登录状态成功')
this.SetUserInfo()
this.loginSuccess()
} else {
this.ticket = ''
console.log(resultData.msg)
}
},
onFail: err => {
this.ticket = ''
console.log('err', err)
}
})
},
loginSuccess() { // 用户成功登录回调
this.ticket = ''
console.log('登录成功了')
this.$router.push('/')
},
3：引入zwjsbridge失败，获取不到 ZWJSBridge对象无法缓存，这个问题主要是埋点缓存问题：
因为获取ticket后需要储存到本地，储存是在app内h5进行储存，不能够用原locastorage，官方硬性需求要引入文件，
zwjsbridge.js
在vue构建内，引入是全局的，是在index.html 内引入。
<script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script>
在vue构建工程内组件内使用就成了问题，事实上打印和使用不了的主要原因是要在app线上环境进行。
官方建议的debug也是无法储存进入的，但是debug工具可以打印出来
例如：
home.vue
// 初始化jsbridge
const excuteBridge = () => {
ZWJSBridge.onReady(() => {
console.log('初始化完成后，执行bridge方法')
})
}
// 设置执行缓存 用index.html内 的 zwjbridge.js - pc 和debug不执行，app线上环境执行ZWJSBridge 其它环境找不到
setLocalStage() { // 设置locaoStroage
excuteBridge()
ZWJSBridge.setLocalStorage({
key: 'aa',
value: '123'
})
.then(result => {
console.log('1', result)
})
.catch(error => {
console.log('2', error)
})
},
// 设置执行缓存 用index.html内 的 zwjbridge.js - pc 和debug不执行，app线上环境执行ZWJSBridge 其它环境找不到
getLocalStage() { // 获取locaoStroage
excuteBridge()
ZWJSBridge.getLocalStorage({
key: 'aa'
})
.then(result => {
this.localStorage = result
})
.catch(error => {
console.log('2', error)
})
}
