前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信支持H5跳转App、跳转小程序

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

作者头像
前端迷
发布2020-07-16 14:27:30
3.6K0
发布2020-07-16 14:27:30
举报
文章被收录于专栏:前端迷前端迷

继小程序灰度测试分享朋友圈刷屏后,滴滴滴,这...

闲着也闲着,顺藤摸瓜点了进去,好家伙,产品小姐姐写这个文案还是太含蓄了,我猜有可能是老干妈还没吃够

根据刀哥多年写代码要看文档的经验来看,证实了这次更新不仅支持了打开小程序,连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
代码语言:javascript
复制
wx.config({
  // 其它配置不变, openTagList配置可使用的开放标签, 
  openTagList: ['wx-open-launch-app, wx-open-launch-weapp']
})
  1. 页面使用开放标签
  • 打开小程序
代码语言:javascript
复制
<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
代码语言:javascript
复制
<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>
  • 回调
代码语言:javascript
复制
<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>

结语

怎么样,看完文档后是不是感觉很easy,

老板: 今晚上线

参考: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端迷 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 新增开放标签
    • 有哪些开放标签?
      • 接入要求
        • 接入方法
          • 结语
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档