linkedme前端H5跳转客户端【从微信分享卡片某详情页点击打开app,回到app某详情页vue】

需求：从app分享一个文章详情到微信，用户打开分享卡片，进入到详情页，详情页有个按钮【打开app】,点击按钮回到app里面的详情页

linkedme官方文档 ShowDoc

1.服务端会返回linkedMe的keyId【linkedMeKey.keyId】以及跳转的链接Url【linkedMe】； 2.param用于原生客户端和客户端判断具体跳转位置；

具体在vue实现

分三步：

第一步： 在index.html里面引入 <script src="https://static.lkme.cc/linkedme.min.js"></script>

第二步：创建 linkedme.js

第二步：跟客户端协商所需参数，引入 linkedme.js，进行使用

---

1、在index.html中引入 JS SDK

  <script src="https://static.lkme.cc/linkedme.min.js"></script>

 

2、创建 linkedme.js

// linkedme.js


let LinkedME_KEY = ''		//这是你在官网网站注册账号，创建应用后生成的LinkedME Key
let linkedmeType = "test";
let defaultData = {};
defaultData.type = linkedmeType; //线上模式,填写"test"表示测试模式.【可选】
//这些参数在官网上都有详细的说明
defaultData.feature = "功能名称";
defaultData.stage = "阶段名称";
defaultData.channel = "渠道名称";
defaultData.tags = "标签名称";
defaultData.ios_custom_url = "";
defaultData.android_custom_url = "";

// 下面是自定义深度链接参数，用户点击深度链接打开app之后，params参数将被带入app，你可以通过这些参数跳到app里对应的页面
export default function (obj) {
  console.log(obj, 'linkedme参数')
  LinkedME_KEY = obj.keyId
  if (window.linkedme.LinkedME_KEY !== LinkedME_KEY) {
    window.linkedme.init(LinkedME_KEY, { type: linkedmeType }, null);
  }
  obj = obj || {}
  let str = '';
  for (let k in obj) {
    str += `"${k}":"${obj[k]}",`
  }
  str = str.slice(0, -1)
  let params = `{${str}}`
  return new Promise((resolve, reject) => {
    window.linkedme.link({
      ...defaultData,
      ... { params: params },
    }, function (err, data) {
      if (err) {
        console.log(err)
        reject(err)
      } else {
        /*
         生成深度链接成功，深度链接可以通过data.url得到，
         将深度链接绑定到<a>标签，这样当用户点击这
         个深度链接，如果是在pc上，那么跳转到深度链接二维
         码页面，用户用手机扫描该二维码就会打开app；如果
         在移动端，深度链接直接会根据手机设备类型打开ios
         或者安卓app
         */
        resolve(data)
      }
    }, false);

  });
}

3、使用在Headguide.vue

<template>
  <div class="head_guide" @click="dick" id="open_header">
    <div class="head_con">
      <div class="opne_btn">
        <p class="btn_text">打开APP</p>
      </div>
    </div>
  </div>
</template>

<script>
import linkedmeLink from './linkedme';//引入linkedme.js

export default {
  name: 'Headguide',
  props: {
    jobId: {
      type: [Number, String],
    },
    circleName: {
      type: String,
      default: '生活圈',
    },
    keyId: {
      type: String,
      default: '58ae04a695b3d1fc8909bc4564de3a3c',//根据圈不同值不同
    }
  },
  data () {
    return {
      hrefUrl: "https://lkme.cc/3eD/jfpGtFI4P",//默认回到app首页链接
      okeyId: '58ae04a695b3d1fc8909bc4564de3a3c',//默认
      oJobId: 0,
    }
  },
  watch: {
    keyId: {
      handler (newVal) {
        if (newVal) {
          this.okeyId = newVal
          this.getLinkedme()
        }
      },
      immediate: true,
      deep: true
    },
    jobId: {
      handler (newVal) {
        if (newVal) {
          this.oJobId = newVal
        }
      },
      immediate: true,
    },
  },
  methods: {
    getLinkedme () {
      // const HOST = {
      //   target: process.env.NODE_ENV === 'development' || location.hostname.startsWith('testex') ? `http://testex.api.appgc.yidian-inc.com` : `https://ex.jwshq.cn`
      // };
      linkedmeLink({
        //这里面传你要携带的自定义参数[客户端定义的字段]
        keyId: this.okeyId,
        id: `https://baidu.com/zhipin/jobDetails?view=1p&jobId=${this.oJobId}`,//详情页地址
        serviceKey: 'url',
      }).then(res => {
        this.hrefUrl = res.url;
        //后面他们官方文档添加了trigger_deeplink
        //分享个做ios时遇到的问题，ios版分享的时候点击外链会先跳到APP store，然后再手动点击打开APP，这样整个跳转的流程就多了一步，后面和客户端的小伙伴研究了好久还和linked me的研发人员沟通才发现他们的文档后续做了更新，在生成url的时候除了给a标签赋值href外还要给a标签添加addEventListener来调用linkedme.trigger_deeplink方法
        var open_header = document.getElementById("open_header");
        if (open_header) {
          open_header.addEventListener("click", function () {
            linkedme.trigger_deeplink(res.url);
          })
        }
      });
    },
    //点击打开app
    dick () {
      window.location.href = this.hrefUrl ? this.hrefUrl : 'https://lkme.cc/3eD/jfpGtFI4P'
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.head_guide {
  width: 100%;
  position: fixed;
  top: 0;
  background: #ffffff;
  z-index: 99;
  height: 58px;
}

.head_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-left: 13px;
  padding-right: 16px;

  background: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04);
}

.opne_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 33px;
  background: #1283ff;
  border-radius: 20px;
}
.btn_text {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
</style>