前端 小程序

微信支持H5跳转小程序、App

Posted by LeaonY on 2021-11-29

前言

微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验

微信支持H5跳转小程序、App

一、有哪些开放标签?

  • <wx-open-launch-weapp> 打开小程序
  • <wx-open-launch-app> 打开app

二、接入要求

  • 主体要求: 仅开放给已认证的服务号
  • 系统要求：
    微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

三、接入方法

打开小程序使用步骤与微信JS-SDK类似，需要绑定安全域名、引入JS文件等步骤

打开app需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App

1.配置最新JSSDK

1
2
3
4
5

wx.config({
  // 其它配置不变， openTagList配置可使用的开放标签, 
  openTagList: ['wx-open-launch-app, wx-open-launch-weapp']
})

2.页面使用开放标签

  • 打开小程序

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <wx-open-launch-weapp
      id="launch-btn"
      // 小程序id
      username="gh_xxxxxxxx"
      // 小程序路径
      path="/a/b/c?d=1&e=2#fg"
    >
      <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序<button>
      </template>
    </wx-open-launch-weapp>

  • 打开app

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <wx-open-launch-app
      id="launch-btn"
      // 移动应用appid
      appid="your-appid"
      // 额外信息, 客户端自行解析
      extinfo="your-extinfo"
    >
      <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">App内查看</button>
      </template>
    </wx-open-launch-app>

  • 回调

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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>
FEATURED TAGS
前端 小程序
FRIENDS