vue3+vite+ts+vant 开发浙里办H5应用流程和注意事项

vue3+vite+ts 开发浙里办H5应用流程和注意事项

最近有个项目是要开发到浙里办的一个H5项目,记录一些问题;

浙里办irs系统内node版本和npm版本如下建议切到他们的版本再进行开发这样问题少一点
在这里插入图片描述

1.因为浙里办有自己的irs系统需要吧前端整体的代码传上去除了打包后的dist 和 node_moudles 所有我们要修改vite打包输出路径(他这个平台只能输出为build文件才能识别)

vite.config.ts
在这里插入图片描述
我是在更新到线上后出现了白屏的情况我下载了这个 @vitejs/plugin-legacy

并在vite.config.ts中引用

在这里插入图片描述
2.浙里办有自己的接口请求方式不能使用axios,需要先下载官方插件

npm i @aligov/jssdk-mgop

使用方式如下,我是做了一个简单的封装

import { mgop } from '@aligov/jssdk-mgop';
import { showToast } from 'vant';
// 发起请求
export function requestMgop(type:string,data?:any) {return new Promise(async (resolve, reject) => {try {mgop({api:'mgop.***.***.api', //后端会再irs上创建好api给你host: 'https://mapi.zjzwfw.gov.cn/', //地址// @ts-ignoreheaders: {"Content-Type": "multipart/form-data"},dataType: 'JSON',type,appKey: '***', //同上 问后端要data,onSuccess: data => {resolve(data);},onFail: err => {showToast('请求失败');reject(err);}});} catch (err) {reject(err);}});
}export default requestMgop;

组件中使用

import { requestMgop } from '@/config/httpMgop';
const { data } = await requestMgop('POST', { apitype: `marketInfo` }) as RESTYPE

这样就可以成功获取数据

3.如何调用官方浙里办内的方法(重要)

在项目中index,html引入官方js
在这里插入图片描述

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

然后在App.vue中先进行初始化不然无法使用

<script setup lang="ts">
function ready() {// @ts-ignoreZWJSBridge.onReady(() => {console.log('初始化完成后，执行bridge方法')})
}
ready()
</script>

在需要的调用官方api的页面中写入 pdf文档的方法 (pdf就是那个开发手册很多页那个),我这里模拟一下获取用户经纬度

//浙里办获取经纬度
getUserLocation();
function getUserLocation() {// @ts-ignoreZWJSBridge.getLocation()// @ts-ignore.then((result) => {console.log(result);console.log(`精度:${result.longitude},纬度:${result.latitude}`);// @ts-ignore}).catch((error) => {console.log(error);});
}