智加文档

Appearance

Return to top
On this page

前期准备工作

  • 如果上架遇到问题可加入浙里办埋点开发沟通群：645014217
  • 浙里办上架需要做好浙里办埋点处理
  • 找产品获取浙里办应用的相关信息：bid、appTitle

相关资料文档

部署

  • 目前上架都是需要把前端打包的 dist 静态资源上传到IRS平台，上传之前需要用另外一个项目或使用zlb-build包装下
  • 把前端的 dist 文件放入该项目中的 build 文件夹中，然后整个项目打成 ZIP 包进行上传即可
  • 不需要提交该项目的 git 资源，该项目就是为了上架 IRS 平台所做的一个通用壳

接口对接

  • 由于上架到 IRS 平台，则所有的接口也需要上架到 IRS 平台，那接口的请求方式就不再是用传统的 axios 进行请求，需要使用 IRS 的请求库进行请求，具体使用参考如下规范
ts
// 第一步 在 src/config/config.ts 的 request配置中新增以下两个配置
export default {
    request: {
        zlbAppKey: '', // 必填 应用平台的 APPKEY
        zlbHost: '' // 非必填 应用平台的 HOST 默认：https://mapi.zjzwfw.gov.cn
    }
}
ts
// 第二步 在 API 中所有的接口注册时 需要添加一个配置参数
export default {
    test() {
        return request({
            zlbApi: 'mgop.xxx.xxx.xxx', // IRS平台上 对于这个接口的映射 后端告知
            url: '/api/xxx/xxx/test',
            method: 'post',
            data: {},
        });
    },
};

浙政钉埋点处理

  • 安装【脚手架中默认自带】
bash
yarn add wp-utils git+https://gitlab.zhijiasoft.com/vue3-base-framework/wp-utils.git
  • 引入
ts
// 在 vite.config.ts 文件中引入
import utils from 'wp-utils/vite'
  • 基本配置
ts
// 在 vite.config.ts 文件的 plugins 属性中添加如下代码：
utils.initZheliban({
    enable: true,
    appTitle: '',
    bid: ''
})

// 类型说明
interface Config {
    enable: boolean // 是否启用
    appTitle: string // 浙里办应用的 appTitle
    bid: string // 浙里办应用的 bid
}
  • 具体使用
ts
// 第一步：在每个业务页面的 onMounted 生命周期函数中执行如下方法
import {zwlogGlobalZlb} from 'wp-utils'
import {nextTick, onMounted} from "@vue/runtime-core";
import {useRoute} from "vitepress";

const router = useRouter()
onMounted(() => {
    zwlogGlobalZlb({
        userId: '',
        userNick: '',
        url: router.fullPath,
        loadTime: new Date().getTime()
    })
    nextTick(() => {
        zwlogGlobalZlb({
            userId: '',
            userNick: '',
            url: router.fullPath,
            responseTime: new Date().getTime()
        })
    })
})

// 类型说明
interface Config {
    userId?: string | null // 用户ID 登录接口返回
    userNick?: string | null // 用户昵称 登录接口返回
    url?: string | null // 当前页面的URL 取 router.fullPath
    enterPageTime?: number | null // 进入该页面的时间 在 router.beforeEach 获取 to.fullPath 的时间
    leavePageTime?: number | null // 离开该页面的时间 在 router.beforeEach 获取 from.fullPath 的时间
    loadTime?: number | null // 加载该页面时间 获取 mounted 生命周期函数执行的时间
    responseTime?: string | null // 响应该页面时间 在 mounted 生命周期函数中 执行 nextTick 所完成的时间
}
ts
// 第二步：在 src/router/permission.ts 该文件中的 router.beforeEach 方法中，添加如下代码
import { zwlogGlobalZlb } from 'wp-utils'
zwlogGlobalZlb({
    userId: '',
    userNick: '',
    url: to.fullPath,
    enterPageTime: new Date().getTime()
})
zwlogGlobalZlb({
    userId: '',
    userNick: '',
    url: from.fullPath,
    leavePageTime: new Date().getTime()
})

// 类型说明
interface Config {
    userId?: string | null // 用户ID 登录接口返回
    userNick?: string | null // 用户昵称 登录接口返回
    url?: string | null // 当前页面的URL 取 router.fullPath
    enterPageTime?: number | null // 进入该页面的时间 在 router.beforeEach 获取 to.fullPath 的时间
    leavePageTime?: number | null // 离开该页面的时间 在 router.beforeEach 获取 from.fullPath 的时间
    loadTime?: number | null // 加载该页面时间 获取 mounted 生命周期函数执行的时间
    responseTime?: string | null // 响应该页面时间 在 mounted 生命周期函数中 执行 nextTick 所完成的时间
}

浙里办免登页面通用代码

vue
<template>
    <n-space justify="center" align="center" class="h-100vh">
        <n-spin size="medium" description="授权中..." />
    </n-space>
</template>

<script lang="ts" setup>
import { showToast, closeToast } from 'vant';
import useStore from '@/store/modules/main';
import { utils } from 'wp-utils';

declare const ZWJSBridge: any;
const toast = ref();
const store = useStore();
const router = useRouter();
const init = () => {
    if (
        utils.getBrowserType() === 7 ||
        utils.getBrowserType() === 6 ||
        utils.getBrowserType() === 1
    ) {
        toast.value = showToast({
            type: 'loading',
            forbidClick: true,
            duration: 0,
            message: '页面初始化',
        });
        zlbAuth();
    } else {
        router.replace({ name: 'loginH5' });
    }
};

const zlbAuth = () => {
    toast.value.message = '免登授权中...';
    ZWJSBridge.ssoTicket({})
        .then((data: { result: boolean; ticketId: string }) => {
            if (data && data.result) {
                goLogin(data.ticketId)
            } else {
                closeToast();
                ZWJSBridge.openLink({
                    type: 'reload'
                }).then(res => {
                    goLogin(res.ticketId)
                })
            }
        })
        .catch((error: any) => {
            setTimeout(() => {
                showToast({
                    type: 'fail',
                    forbidClick: true,
                    message: `授权失败：${error}`,
                });
            }, 500);
        })
        .finally(() => {
            closeToast();
        });
};

const goLogin = (ticket: string) => {
    window.$apis.v1.auth.get.ticket
        .token(ticket)
        .then((res) => {
            window.sessionStorage.setItem(
                'masses_phone',
                res.data.phone
            );
            window.sessionStorage.setItem(
                'user_name',
                res.data.userName
            );
            window.sessionStorage.setItem(
                'zheliban_user_id',
                res.data.userId
            );
            if (res.data.access_token) {
                store.setUnit(res.data.unit);
                store.setToken(res.data.access_token);
                router.replace('/');
            } else {
                router.replace('/login-error');
            }
        });
}

onMounted(() => {
    init();
});
</script>

<style scoped></style>

智加文档规范

Copyright © 2022 - 浙江智加信息科技有限公司