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

news2024/11/25 6:29:11

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-ignore
        headers: {
          "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-ignore
  ZWJSBridge.onReady(() => {
    console.log('初始化完成后，执行bridge方法')
  })
}
ready()
</script>

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

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