H5跳转App、跳转小程序-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

H5跳转App、跳转小程序

简介: H5跳转App、跳转小程序

就在昨天,微信发布了一个功能,这个需求终于可以满足大家了。
在这里插入图片描述

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

开放标签

  • <wx-open-launch-weapp>打开小程序
  • 用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序
  • <wx-open-launch-app> 打开app

接入要求

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

接入方法

  • 打开小程序使用步骤与微信JS-SDK类似,需要绑定安全域名、引入JS文件等步骤
  • 打开app需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App
  • 在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)
小程序跳转按钮:<wx-open-launch-weapp>
  • 用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。
<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>
<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>
App跳转按钮:
App跳转按钮:<wx-open-launch-app>
  • 用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。
<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>
<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>
  • 希望微信团队再接再厉

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章