微信开放标签唤起App 原理简述

嘀嗒嘀嗒嘀
2,188 阅读3分钟

1、 开放标签文档：微信开放标签说明

标签名称：<wx-open-launch-app>;

a、使用条件（并不是可以唤起任意app）：

  • h5网页与公众号绑定：先找到承载的公众号（必须是服务号），并配置公众号的js安全域名：登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”（当前h5网页）
  • 公众号与app和h5网页绑定：微信开放平台里找对应的公众号，设置移动应用唤起，配置js安全域名

b、使用方式：

  • 绑定域名

  • 引入相关js文件

  • 通过config接口注入权限验证配置并申请所需开放标签

    2、h5唤起app原理解析

唤起App的场景在前端开发中并不陌生。市面上有提供成熟的解决方案，Openinstall、应用宝、微信开放标签等..

a、唤起场景：针对不同场景，唤起App的解决方案也有不同

  • 手机浏览器唤起App
  • 第三方App内webview唤起App。（微信、QQ、手百）

b、唤起方式：针对不同场景，唤起App的解决方案也有不同

  • URL Scheme：
  • Universal Links
  • Android Intent 方式
唤起方案的使用方式以及优缺点描述

2、webcomponent

微信开放标签的实质是webcomponent

  • Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们 custom elements
  • Shadow DOM（影子DOM）:一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。shadow DOM
  • HTML templates（HTML模板）:<template>和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用Using templates and slots
比如实现一个简单的demo案例
  • 使用
<user-card
      image="https://semantic-ui.com/images/avatar2/large/kristy.png"
      name="User Name"
      email="yourmail@some-email.com"
      id="UserCard"
  ></user-card>
  • templte
    <template id="userCardTemplate">
      <!-- 创建模板和样式 -->
      <style>
        /* :host指代元素本身 */
       :host { 
         display: flex;
         align-items: center;
         width: 450px;
         height: 180px;
         background-color: #d4d4d4;
         border: 1px solid #d5d5d5;
         box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
         border-radius: 3px;
         overflow: hidden;
         padding: 100px;
         box-sizing: border-box;
         font-family: 'Poppins', sans-serif;
       }
       .image {
         flex: 0 0 auto;
         width: 160px;
         height: 160px;
         vertical-align: middle;
         border-radius: 5px;
       }
       .container {
         box-sizing: border-box;
         padding: 20px;
         height: 160px;
       }
       .container > .name {
         font-size: 20px;
         font-weight: 600;
         line-height: 1;
         margin: 0;
         margin-bottom: 5px;
       }
       .container > .email {
         font-size: 12px;
         opacity: 0.75;
         line-height: 1;
         margin: 0;
         margin-bottom: 15px;
       }
       .container > .button {
         padding: 10px 25px;
         font-size: 12px;
         border-radius: 5px;
         text-transform: uppercase;
       }
      </style>
      
      <img class="image">
      <div class="container">
        <p class="name"></p>
        <p class="email"></p>
        <button class="button">Follow John</button>
      </div>
    </template>
  • js定义
        class UserCard extends HTMLElement {
    constructor() {
      super();
      console.log('this===:',this)
      var shadow = this.attachShadow( { mode: 'open' } ); // attachShadow 将一个 shadow root 附加到任何一个元素上 closed 不会被外部元素获取 open 可以                                                        
      var templateElem = document.getElementById('userCardTemplate'); //获取模板
      var content = templateElem.content.cloneNode(true);
      content.querySelector('img').setAttribute('src', this.getAttribute('image')); // 动态传参数
      content.querySelector('.container>.name').innerText = this.getAttribute('name');
      content.querySelector('.container>.email').innerText = this.getAttribute('email');
      shadow.appendChild(content);
     }
   }
   window.customElements.define('user-card', UserCard);
   var UserCardele = document.getElementById('UserCard')
  console.log('UserCard',UserCardele.shadowRoot)// mode决定是否能够被获取
avatar
文章
阅读
粉丝