埋点相关:
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.上传后就到审核环节,开发的流程也就到此结束了