H5内嵌到APP

1、获取APP传递的cookie

直接定义一个方法，在页面打开时调用并赋值

function getCookie(name) {
  var arr1 = document.cookie.split("; "); // 获取cookie值并且用”； “来进行切割成数组
  for (var i = 0; i < arr1.length; i++) {
    //循环本数组
    var arr2 = arr1[i].split("="); //再次利用split（）方法进行切割为二维数组
    if (arr2[0] == name) {
      //循环二维数组，当第一个值为你所传的值则返回本数组的第二个值
      return arr2[1];
    }
  }
  return " ";
}

let token = ref("");
let userWebAgent = ref("");

onMounted(() => {
  if (document.cookie.length > 0) {
    token.value = getCookie("token");
    userWebAgent.value = getCookie("user-web-agent");
  }
});

2、在APP上触发页面上某个事件

（事件名称需要安卓和ios工程师提供）

2-1、下载 web-launch-app 插件

npm install web-launch-app

2-2、页面引入并使用

import {
  LaunchApp,
  detector,
  ua,
  copy,
  supportLink,
  isAndroid,
  isIos,
  inWeixin,
  inQQ,
  inWeibo,
  inBaidu,
} from "web-launch-app";

<div class="articleColLiSub" @click="buyArticle(articleDetail.albumId)">
    立即订阅
</div>

// 订阅专栏
function buyArticle(id) {
  if (userWebAgent.value != "") {
    if (isAndroid) {
      androidCscFinanceNews.clickBuyColumn(Number(id));
    } else if (isIos) {
      window.webkit.messageHandlers.clickBuyColumn.postMessage([Number(id)]);
    }
  } else {
    window.open("http://********/download", "_blank");
  }
}

注释：

1、clickBuyColumn 是APP工程师提供的事件名；

2、userWebAgent.value 是APP工程师通过cookie传来的值。

因为该页面可以从APP分享出去，用户可能会在APP外部打开。

如果在APP内部，是可以接收到APP工程师传来的cookie，APP外部那就接收不到，那么userWebAgent.value就是空串。

如果为空串，说明是通过浏览器进入此页面，触发buyArticle事件，则是到下载页；如果不为空串，说明是在APP内部打开该页面，那就执行正常的业务。

3、下载页面点击按钮下载APP

<div class="downloadBox">
    <div class="downloadBtn" @click="orderClick">下载财讯宝App</div>
</div>

<!-- 如果实在安卓的微信打开会有弹框提示 -->
    <el-dialog v-model="dialogVisible">
      <div class="dialog-box">
        <div class="dialogTipText">
          <div class="dialogTip">1</div>
          <div class="dialogText">点击右上角按钮</div>
        </div>
        <div class="dialogTipText">
          <div class="dialogTip">2</div>
          <div class="dialogText">选择“在浏览器打开”</div>
        </div>
      </div>
    </el-dialog>

import { onMounted, reactive, ref, toRefs, computed } from "vue";
let isAndroid = ref();
let isiOS = ref();
let tipShow = ref(false);
let dialogVisible = ref(false);
onMounted(() => {
  let u = navigator.userAgent;
  isAndroid.value = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
  isiOS.value = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  is_weixin();
});

function is_weixin() {
  let ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    tipShow.value = true;
    return true;
  } else {
    tipShow.value = false;
    return false;
  }
}

function orderClick() {
  if (isAndroid.value) {
    // 判断是否是在微信打开
    if (is_weixin()) {
      dialogVisible.value = true;
    } else {
      // 安卓
      window.location.href =
        "https://****.apk";
    }
  } else {
    // ios
    window.location.href = "https://****";
  }
}

注释：

1、dialogVisible 是一个弹框，安卓系统需要判断：如果下载页是在微信里打开，那么需要跳转到外部浏览器进行下载；如果是在外部浏览器打开，那么直接下载apk包即可（apk包链接由安卓工程师提供）；

2、ios不需要判断是否在微信或外部浏览器打开，只需要ios工程师提供一个下载地址即可，但这个地址需要APP上线才能提供。