已經(jīng)有一段時間沒有更新博客了，因為最近變成了某個項目的負責人，就突然忙了起來。
剛接到這個項目的開始，我還覺得自己一定能很出色的完成這個任務。剛過了幾天我就發(fā)現(xiàn)事情并不是我想象的那么簡單，我要做的事情比我想象的要多好幾倍。對于一個沒有經(jīng)驗的負責人來說，這無疑是一個坑，當然也是一個挑戰(zhàn)。這個項目的難點并不在于它的代碼有多難，也不在于業(yè)務邏輯有多復雜，而是他的規(guī)范太多，審核太嚴格。
這是一個什么樣的項目呢？

大家可以看一看語雀《“浙里辦”h5微應用接入流程》這篇文檔。

接下來我將針對大多數(shù)人以及我個人遇到的一些問題做本篇文章的核心講解：

1.單點登錄，首先分為個人用戶的單點登錄和法人用戶的單點登錄：
個人單點登錄分為app登錄和支付寶小程序登錄：
首先我們要判斷當前環(huán)境是app環(huán)境還是支付寶小程序環(huán)境，然后跳轉(zhuǎn)到不同的路徑，個人用戶登錄我們采用的是直接跳轉(zhuǎn)到前端頁面，登錄成功后會攜帶ticket等參數(shù)跳轉(zhuǎ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 (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和小程序是一樣的）：
由于法人登錄跳轉(zhuǎn)到頁面時，用的是post請求訪問，但是web頁面只能通過get訪問，所以法人登錄我們采用的方法是將提供的跳轉(zhuǎn)路徑為后臺服務地址，后臺服務將登錄成功后通過get方式重定向到前端頁面并攜帶前端需要的參數(shù)，

window.location.;

2.二次回退的問題：
我發(fā)現(xiàn)大多數(shù)人都遇到了二次回退的問題，有很多人解決了二次回退的問題后又出現(xiàn)了其它各種奇奇怪怪的問題，以下是我們解決這個問題的辦法：
window.performance.navigation.type包含三個值：
0 : TYPE_NAVIGATE (用戶通過常規(guī)導航方式訪問頁面，比如點一個鏈接，或者一般的get方式)
1 : TYPE_RELOAD (用戶通過刷新，包括JS調(diào)用刷新接口等方式訪問頁面)
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)聽頁面的跳轉(zhuǎn),判斷當前頁面是通過刷新或直接訪問進入，還是通過返回進入。從而來判斷是否是直接跳回app

   watchApp() {
      var that = this;
      window.addEventListener(
        "pageshow",
        function (event) {
          if (
            event.persisted ||
            (window.performance && window.performance.navigation.type == 2)
          ) {
            ZWJSBridge.close()//這個是浙里辦內(nèi)部的api，調(diào)用close()接口關閉通過openLink打開的頁面
              .then((result) => {
                console.log(result);
              })
              .catch((error) => {
                console.log(error);
              });
          }
          that.isLoad();
        },
        false
      );
    },

解決支付寶小程序的二次回退問題，這個地方的邏輯是監(jiān)聽頁面的跳轉(zhuǎ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>