當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

H5浙里办对接流程和问题记录

發布時間：2023/12/1 综合教程 53 生活家

生活随笔收集整理的這篇文章主要介紹了 H5浙里办对接流程和问题记录小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用框架介紹：vue3 + vite + vant

前端對接流程總結

- 1、環境準備
- - 1.1 引入JSBridge
  - 1.2 更改打包目錄
- 2、單點登錄
- 3、適老化（浙里辦上架h5硬性要求）
- 4、MGOP接口對接
- - 4.1 MGOP接口配置
  - 4.2 使用注冊的MGOP接口
- 5、埋點
- 6、JSBridgeAPI功能記錄
- - 6.1 打電話功能
  - 6.2 文件上傳

1、環境準備

1.1 引入JSBridge

在浙里辦的微應用中，很多地方需要使用到浙里辦的一些封裝API功能，也就是JSBridge，且所有JSBridgeAPI均支持Promise回調

<!--在項目啟動頁index.html <head></head>里面引入-->
<script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script>

在App.vue中進行全局初始化。如果不進行此步驟，會出現調用失敗的情況！

const init = ()=>{ZWJSBridge.onReady(() => {console.log('初始化完成后，執行bridge方法')})
}
init()

到此就可以使用浙里辦的一些api了，這些api只有浙里辦環境才能使用

1.2 更改打包目錄

由于浙里辦編譯默認輸出位置是build，所以在vite.config.js里修改默認的輸出位置

export default defineConfig({base: './', ...build: {outDir: './build', //修改輸出位置為build},...
})

2、單點登錄

單點登錄分為個人單點登錄和法人單點登錄，項目要求目前只做了法人的

// 截取url數據
const getQuery = (val)=>{var query = window.location.search.substring(1);var vars = query.split("&");for (var i=0;i<vars.length;i++) {var pair = vars[i].split("=");if(pair[0] == val){return pair[1];}}return(false);
}
// 法人單點登陸-獲取用戶信息
const getTicket = ()=>{let userId = getQuery('operationId')let userName = getQuery('operationName')console.log(userId,'用戶id')console.log(userName,'用戶名稱')if(userId && userName){const data = {userId:userId,userName:userName}useUserInfo.updateName(data) //更新數據}else{window.location.href = 'https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=接口地址'}
}

3、適老化（浙里辦上架h5硬性要求）

// 獲取是適老化還是正常模式
const getModel =()=>{ZWJSBridge.getUiStyle().then((result) => {if(result.uiStyle === 'elder'){ import('./assets/older.css') //老年版css}else{import('./assets/normal.css') //正常css}}).catch((error) => {console.log(error,'模式error');});
}

4、MGOP接口對接

4.1 MGOP接口配置

找到API管理
點擊新建API
配置API名稱（API名稱固定用mgop.${app_id}.app.${api_name}
）

4.2 使用注冊的MGOP接口

安裝網管依賴
```
npm i --save @aligov/jssdk-mgop@3.0.0
```

封裝請求（有post或者get兩種請求方式）

/*./src/utils/mgop.js*/
import { mgop } from '@aligov/jssdk-mgop'
const mgopRequest = (payload) => {	return new Promise((resolve, reject) => {// showLoading()// 仿照axios的傳參方式const data = Object.assign({}, {api: payload.zwApi, // 必須,政務中臺rpc接口的制定名字。例如‘mgop.xxx.app.login’host: 'https://mapi.zjzwfw.gov.cn/',// 固定為這個地址dataType: 'JSON', // 目前官方只支持JSON格式data: payload.data, // 不管入參是query還是body都同意用data傳入，到時候在工作臺里配置即可type: 'POST', // 和axios一樣// isBuffer: payload.isBuffer, appKey: '××××××××××', // 必須，政務中臺appKey, 系統申請之后大數據局發過來的excel里有// 成功后的回調onSuccess: data => {console.log(data.data)resolve(data)},// 請求失敗后的回調onFail: err => {console.log(err, 'err')reject(err.message)}},)mgop(data)})
}
export default {mgopRequest
}

使用

import utils from "@/helper/mgop.js"
const data = {zwApi:'×××', //接口名稱data:{ //參數companyName:searchVal.value}
}
utils.mgopRequest(data).then(res=>{console.log(res,res.data.code)if(res.data.code === '10000'){console.log('成功')}
})

注：本地調試會出現跨域的情況，需要在政務中臺配置白名單

5、埋點

<script> // 浙里辦基礎信息埋點(function(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']});aplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['aplus-waiting', 'MAN']});aplus_queue.push({'action':'aplus.sendPV','arguments':[{is_auto: false}, {// 自定義 PV 參數 key-value 鍵值對（只能是這種平鋪的 json，不能做多層嵌套），如：miniAppId:'appKey', }]})</script>

6、JSBridgeAPI功能記錄

JSBridgeAPI功能可以在浙里辦對接文檔或者調試工具政務中臺ZWEurope里查看方法

6.1 打電話功能

<span class="tel" @click="callTel">×××-×××-××××</span>const callTel = ()=>{ZWJSBridge.phoneCall({"corpId": "×××-×××-××××"}).then(res => {console.log('成功',res)}).catch(err => {console.log('失敗',err) })
}

6.2 文件上傳

因為一開始使用的是vant的文件上傳，上架到浙里辦之后發現文件上傳功能點不動，就換了種方式

 <van-field name="imgs" label="附件（最多可上傳6張）"><template #input><div class="imgList"><div class="imgs" v-if="form.attachments && form.attachments.length > 0" v-for="(item,i) in form.attachments" :key="i"><img class="img" :src="item" alt=""><img class="delBtn" @click="delImg(i)" src="@/assets/upload-remove.png" alt=""></div><button v-if="form.attachments && form.attachments.length < 6" type="button" class="uploadBtn" @click="select"><img src="@/assets/upload_img.png" alt=""></button></div></template></van-field>const select = ()=>{ZWJSBridge.chooseImage({"upload": true}).then(res => {console.log(res,'---------res1')form.attachments.push(res.picPath[0])btnLoading.value = false}).catch(err => {btnLoading.value = falseconsole.log(err,'--------err1') })
}
const delImg = (index)=>{console.log(index)form.attachments.splice(index,1)
}

總結

以上是生活随笔為你收集整理的H5浙里办对接流程和问题记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。