這里辦接通會有很多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)
})
}