Vue2写浙江政务服务平台微服务踩的坑

最新推荐文章于 2026-06-27 12:41:28 发布

原创最新推荐文章于 2026-06-27 12:41:28 发布 · 1.9k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

代码可运行

文章介绍了在前端项目中实现数据采集的埋点方法，包括创建zwUtil.js公共方法，全局挂载到Vue实例，以及调用ZwLog进行数据发送。同时，详细阐述了如何引入zwjsbridge.js来处理底部公共内容，并检测页面的老年模式。此外，文章还提到了无障碍阅读的实现和单点登录功能。对于接口调用，使用了mgop库封装公共方法，并展示了如何调用mgop接口。最后，讨论了项目发布上线的流程，包括修改打包配置为build目录和在IRS-应用发布子系统上进行上传审核。

埋点相关：

1.新建一个zwUtil.js（埋点公共方法），需要先在index.html引入zwlog.js

   <script
      type="text/javascript"
      src="//assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"
    ></script>

class zwUtils {
  zwlog = null;
  _user_id = null;
  constructor() {}
  /**
   * 数据采集
   */
  collectData(url, name) {
    setTimeout(() => {
      const params = {
        miniapp_start: "$$miniapp_start",
        page_start: "$$page_start",
        t2: "1秒",
        t0: "2秒",
        miniapp_first_user: "first_user",
        userType: "legal",
        miniAppId: "2001999665",
        pageId: url,
        pageName: name,
        'user-id': this._user_id,
      };
      this.zwlog.onReady(() => {
        this.zwlog.sendPV(params);
      });
    }, 500);
  }
  /**
   * 初始化
   */
  initZwLog(_user_id, _user_nick) {
    this._user_id = _user_id;
    this.zwlog = new ZwLog({ _user_id, _user_nick });
    this.zwlog.init();
  }
}
export default new zwUtils();

2.在main.js全局挂在zwUtil.js

import zwUtils from "@/common/zwUtil.js"
Vue.prototype.$zwUtils = zwUtils;

3.在App.vue里面调用方法

 created() {             

this.$zwUtils.initZwLog(this.getQueryString("userId"),this.getQueryString("companyName"));
 
},
  watch: {
    $route(to, from) {
      console.log("to===", to);
      this.$zwUtils.collectData(to.path, to.name);
    },
  },

引入公共底部：

1.先在index.html中引入zwjsbridge.js

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

2.在body标签下引入外部的js

  <body>
    <div id="app"></div>
    <script>
      var deptName = "*********";//单位名称
      var deptPhone = "*******";//单位电话
      var deptAddress = "********";.//单位地址
    </script>
    <script
      src="https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/1083/2009211541482763.js"
      type="text/javascript"
    ></script>
  </body>

全局判断是否视老化：

1.用他们的方法查看当前模式（普通模式或者老年模式），缓存到本地（注意：需要先引入jquery）

    <script>
      $(function () {
        var script = document.createElement("script");
        script.setAttribute("defer", "");
        script.setAttribute("async", "");
        script.type = "text/javascript";
        script.src =
          "https://wza.zj.gov.cn/cniil/assist.js?sid=11963&pos=left&bar=0";
        $("body").append(script);
      });
      getCookieMode(function (res) {
        console.log(res);
        if (res.mode == "2") {
          localStorage.setItem("mode", "2");
          _setCookiemode();
          $("body").addClass("zjzwOLD");
          $(".OldMode .zoomin").css("display", "none");
          $(".OldMode .zoomout").css("display", "block");
          $(".OldMode").css("margin-top", "15px");
          $(".addIcon").css("display", "block");
          $(".zjzw-head-nav-item ul>li:eq(0) a").html(
            '<a href="//www.zj.gov.cn/" tabindex="0" class="text-tag">首      页</a>'
          );
          if ($("#loginWraps").text().length > 4) {
            $(".zjzwOLD .login").css("margin-top", "0");
          }
        } else {
          localStorage.setItem("mode", "");
          $("body").removeClass("zjzwOLD");
          $(".OldMode .zoomout").css("display", "none");
          $(".OldMode .zoomin").css("display", "block");
          $(".addIcon").css("display", "none");
          $(".zjzw-head-nav-item ul>li:eq(0) a").html(
            '<a href="//www.zj.gov.cn/" tabindex="0" class="text-tag">首页</a>'
          );
          $(".login").css("margin-top", "-22px");
        }
      });
    </script>

头部注意项和全局控制视老化

1.顶部要按照特定格式设计，按照下图所示

2.顶部相关功能

a.政务平台国徽，需要点击跳转到相应页面

//国徽路径+跳转路径
    url:'http://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web2933/site/picture/0/2107282019260912958.png'
    path:'https://www.zj.gov.cn/'

b.老年模式按钮切换，用vuex配合localStorage储存本地状态，用政务服务网方法替换网站状态

 methods: {
    //vuex替换本地状态
    ...mapMutations(["setIsOld"]),
    checkOld() {
      this.setIsOld(!this.isOld);
      console.log(this.isOld);
      if (this.isOld) {
        //储存浏览器状态信息
        localStorage.setItem("mode", "2");
        //给政务服务平台添加
        _setCookiemode();
        $("body").addClass("zjzwOLD");
        $(".OldMode .zoomin").css("display", "none");
        $(".OldMode .zoomout").css("display", "block");
        $(".OldMode").css("margin-top", "15px");
        $(".addIcon").css("display", "block");
        $(".zjzw-head-nav-item ul>li:eq(0) a").html(
          '<a href="//www.zj.gov.cn/" tabindex="0" class="text-tag">首      页</a>'
        );
        if ($("#loginWraps").text().length > 4) {
          $(".zjzwOLD .login").css("margin-top", "0");
        }
      } else {
        //移除老年模式
        localStorage.removeItem("mode", "");
        _delCookiemode();
        $("body").removeClass("zjzwOLD");
        $(".OldMode .zoomout").css("display", "none");
        $(".OldMode .zoomin").css("display", "block");
        $(".addIcon").css("display", "none");
        $(".zjzw-head-nav-item ul>li:eq(0) a").html(
          '<a href="//www.zj.gov.cn/" tabindex="0" class="text-tag">首页</a>'
        );
        $(".login").css("margin-top", "-22px");
      }
    },

c.无障碍阅读，只需设置一个a标签把id设置成cniil_wza即可（需要引入jquery）

 <div class="no_read_can">
          <a href="javascript:void(0)" id="cniil_wza">无障碍阅读</a>
        </div>

d.单点登录，点击跳转到浙江政务服务网登录界面

  toLoginJump() {
       //goto后面填写你在irs平台获得项目地址
      window.location.href =
        "https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=https://qypc.fh.gov.cn/manager/callback/zlblogin?goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001999665/reserved/index.html";
    },

e.跳转到个人中心，当前展示跳到企业用户

   toUserPlace() {
      window.location.href =
        "https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=https://www.zjzwfw.gov.cn/ucenter/sso/getfrinfo.do?goto=https://www.zjzwfw.gov.cn/ucenter/front/main/legal/index.do";
    },

mgop接口的新建和调用

1.新增接口，需要到IRS-应用发布子系统添加api，需要扫码添加，流程网上很多不具体赘述

2.封装mgop公共方法，新建一个mgopServe.js（需要npm安装依赖）

import { mgop } from "@aligov/jssdk-mgop";//需要用npm安装依赖
import cookie from "vue-cookie";
export const mgopRequest = (payload) => {
  let xtoken = cookie.get("token");//我的token放在cookie里面
  return new Promise((resolve, reject) => {
    mgop({
      api: "mgop.youkua.mashangbanH5." + payload.url, // 必须  换成浙里办接口
      host: "https://mapi.zjzwfw.gov.cn/", //host必须是这个
      dataType: "JSON",
      type: payload.method,
      appKey: "************", // 项目的appKey
      data: payload.data,
      header: { Authorization: xtoken },
      onSuccess: (data) => {
        console.log("mgopRequest-----------------data", data);
        resolve(data.data);
      },
      onFail: (err) => {
        console.log("mgopRequest-----------------err", err);
        reject(err.message);
      },
    });
  });
};

3.接口调用方法

import { mgopRequest } from "@/http/mgopServe.js"; //引入js
//使用mgop方法
mgopRequest({
        url: apiUrl,//接口地址
        method: "GET",//GET还是POST方法
        data: { //参数
          
        },
      }).then((res) => {
       //回调
      });

发布上线流程

1.浙江政务网的项目需要打包成zip压缩文件去IRS-应用发布子系统上进行上传审核，注意的是你项目打包完不能是一个dist文件要变成build文件改变打包文件命令如下在vue.config.js中添加以下代码

const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  // 基本路径
  publicPath: "./",
  // 输出文件目录(默认dist)
  outputDir: "build",
  // 关闭eslint验证
  lintOnSave: false,
  // 静态目录代理
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@components", resolve("src/components"))
      .set("@assets", resolve("src/assets"))
      .set("@image", resolve("src/assets/image"))
      .set("@view", resolve("src/view"));
  },
  devServer: {
    disableHostCheck: true,
  },
};

2.上传后就到审核环节，开发的流程也就到此结束了

标签