【前端探索】微信小程序跳转的探索——开放标签为什么存在？

<wx-open-launch-weapp
 id="launch-btn"
 username="gh_xxxxxxxx"
 path="pages/home/index?user=123&amp;action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
             打开小程序
     </script>
</wx-open-launch-weapp>
<script>
   var btn = document.getElementById('launch-btn');
   btn.addEventListener('launch', function (e) {
    console.log('success');
   });
   btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
   });
</script>

/**
 * 覆盖一个开放标签到传入的options.el元素上，点击可以跳转到对应小程序
 * @exports wxOpenLaunchWeapp
 * @param {Object} options {el:dom,appid:id,url:path} 参数：元素、小程序原始ID、小程序路径
 */

const wxOpenLaunchWeapp = function (options) {
 // configWx，完成微信鉴权，这个有个小坑，开放标签必须随便传一个jsApiList，即使用不到也要传，否则安卓拉不起小程序
 configWx(['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'], ['wx-open-launch-weapp']).then((wx) => {
  console.log(wx);
  const btn = options.el; // 获取元素
  const script = document.createElement('script'); // 创建script内容插槽
  script.type = 'text/wxtag-template';
  // 插槽里面插入透明且和外部元素大小一致的a标签
  const defaultHtml = `<a style='width:${options.el.clientWidth}px;height:${options.el.clientHeight}px;display:block;color: transparent;'>default buttom</a>`;
  script.text = defaultHtml;
  // 开放标签的尺寸也和外部元素一致，且为绝对布局
  const html = `<wx-open-launch-weapp
          id="launch-btn"
          style="width:${options.el.clientWidth}px;
          height:${options.el.clientHeight}px;
          display:block;
          position: absolute;
          z-index: 20;" 
          username="${options.appid}"
          path="${options.url}">${script.outerHTML}</wx-open-launch-weapp>`;
  const btnParent = btn.parentElement;
  btnParent.innerHTML = html + btnParent.innerHTML; // html字符串赋值
  const launchBtn = document.getElementById('launch-btn');
  launchBtn.addEventListener('ready', (e) => {
     console.log('ready', e);
  });
  launchBtn.addEventListener('launch', (e) => {
     console.log('success', e);
  });
  launchBtn.addEventListener('error', (e) => {
     console.log('fail', e.detail);
  });
 });
};

initWeixinJumpMiniProgram(buttonDom) {
   const options = {
      el: buttonDom,
      appid: this.water.miniProgramSourceId,
      url: this.water.miniProgramJumpUrl,
   };
   wxOpenLaunchWeapp(options);
}