已經(jīng)有一段時間沒有更新博客了蔓倍，因為最近變成了某個項目的負責人，就突然忙了起來盐捷。
剛接到這個項目的開始偶翅，我還覺得自己一定能很出色的完成這個任務。剛過了幾天我就發(fā)現(xiàn)事情并不是我想象的那么簡單碉渡，我要做的事情比我想象的要多好幾倍聚谁。對于一個沒有經(jīng)驗的負責人來說，這無疑是一個坑滞诺，當然也是一個挑戰(zhàn)形导。這個項目的難點并不在于它的代碼有多難，也不在于業(yè)務邏輯有多復雜习霹，而是他的規(guī)范太多朵耕，審核太嚴格。
這是一個什么樣的項目呢淋叶？
大家可以看一看語雀《“浙里辦”h5微應用接入流程》這篇文檔阎曹。
接下來我將針對大多數(shù)人以及我個人遇到的一些問題做本篇文章的核心講解：
1.單點登錄，首先分為個人用戶的單點登錄和法人用戶的單點登錄：
個人單點登錄分為app登錄和支付寶小程序登錄：
首先我們要判斷當前環(huán)境是app環(huán)境還是支付寶小程序環(huán)境煞檩，然后跳轉到不同的路徑处嫌，個人用戶登錄我們采用的是直接跳轉到前端頁面，登錄成功后會攜帶ticket等參數(shù)跳轉到我們提供的路徑形娇，
const sUserAgent = window.navigator.userAgent.toLowerCase();
const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里辦APP
const bIsAlipayMini =
sUserAgent.indexOf("miniprogram") > -1 &&
sUserAgent.indexOf("alipay") > -1;
if (bIsAlipayMini) {
window.location.href =
"https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&scope=1&servicecode="接入碼"&go=https://mapi.zjzwfw.gov.cn/web/***/index.html?debug=true";
} else {
window.location.href =
"https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode="接入碼"&go=https://mapi.zjzwfw.gov.cn/web/***/index.html?debug=true";
}
法人的單點登錄（app和小程序是一樣的）：
由于法人登錄跳轉到頁面時锰霜，用的是post請求訪問，但是web頁面只能通過get訪問桐早，所以法人登錄我們采用的方法是將提供的跳轉路徑為后臺服務地址癣缅，后臺服務將登錄成功后通過get方式重定向到前端頁面并攜帶前端需要的參數(shù)，
window.location.;
2.二次回退的問題：
我發(fā)現(xiàn)大多數(shù)人都遇到了二次回退的問題哄酝，有很多人解決了二次回退的問題后又出現(xiàn)了其它各種奇奇怪怪的問題友存，以下是我們解決這個問題的辦法：
window.performance.navigation.type包含三個值：
0 : TYPE_NAVIGATE (用戶通過常規(guī)導航方式訪問頁面，比如點一個鏈接陶衅，或者一般的get方式)
1 : TYPE_RELOAD (用戶通過刷新屡立，包括JS調用刷新接口等方式訪問頁面)
2 : TYPE_BACK_FORWARD (用戶通過后退按鈕訪問本頁面)
首先還是判斷是浙里辦app還是支付寶小程序,根據(jù)不同的環(huán)境處理二次回退
const sUserAgent = window.navigator.userAgent.toLowerCase();
const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里辦APP
const bIsAlipayMini =
sUserAgent.indexOf("miniprogram") > -1 &&
sUserAgent.indexOf("alipay") > -1;
if (bIsDtDreamApp) {
that.watchApp();
} else if (bIsAlipayMini) {
that.watchApply();
}
解決app的二次回退問題，這個地方的邏輯是監(jiān)聽頁面的跳轉,判斷當前頁面是通過刷新或直接訪問進入搀军，還是通過返回進入膨俐。從而來判斷是否是直接跳回app
watchApp() {
var that = this;
window.addEventListener(
"pageshow",
function (event) {
if (
event.persisted ||
(window.performance && window.performance.navigation.type == 2)
) {
ZWJSBridge.close()//這個是浙里辦內部的api勇皇，調用close()接口關閉通過openLink打開的頁面
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});
}
that.isLoad();
},
false
);
},
解決支付寶小程序的二次回退問題，這個地方的邏輯是監(jiān)聽頁面的跳轉,判斷當前頁面是通過刷新或直接訪問進入焚刺，還是通過返回進入敛摘。從而來判斷是否是直接跳回浙里辦小程序頁面。
watchApply() {
var that = this;
window.addEventListener(
"pageshow",
function (event) {
if (
event.persisted ||
(window.performance &&
(window.performance.navigation.type == 1 ||
window.performance.navigation.type == 0))
) {
that.isLoad();
} else if (
event.persisted ||
(window.performance && window.performance.navigation.type == 2)
) {
my.navigateBack();
} else {
my.navigateBack();//支付寶小程序的api乳愉，需在index.html引入兄淫，通過此api直接跳回浙里辦小程序頁面
}
},
false
);
},
3.埋點，由于有些埋點是通過JSBridge API 獲取的蔓姚，而JSBridge API 的方法都是異步的捕虽，所以可能會存在埋點不成功的問題。：
埋點主要是采集應用app的信息,日志坡脐，用戶信息和地理位置等信息
web 端通用采集 SDK：https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085
使用vue開發(fā)的泄私，這一段要寫在埋點頁面的script里面，盡量不要放在vue實例中挨措，也不要放在index.html中挖滤，否則可能會存在埋點不成功的問題
<script> (function(w, d, s, q, i) { w[q] = w[q] || [];
var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
j.async = true;
j.id = 'beacon-aplus';
j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085';
f.parentNode.insertBefore(j, f); })(window, document, 'script', 'aplus_queue');
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn'] });
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn'] });
aplus_queue.push({ action: 'aplus.setMetaInfo',
arguments: ['appId', '60506758'] }); </script>
