专栏首页code秘密花园微信支持H5跳转App、跳转小程序

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

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

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

结语

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

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

本文分享自微信公众号 - code秘密花园(code_mmhy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【剑指offer】4.二叉树的遍历和重建

    两个字符串,其长度n均小于等于26。 第一行为前序遍历,第二行为中序遍历。 二叉树中的结点名称以大写字母表示:A,B,C....最多26个结点。

    ConardLi
  • [译] 为什么我用 JavaScript 来编写 CSS

    三年来,我设计的 Web 应用程序都没有使用 .css 文件。作为替代,我用 JavaScript 编写了所有的 CSS。

    ConardLi
  • 【30秒一个知识点】Array(二)

    使用 Array.from()创建一个新的数组,该数组与将要生成的块的数量相匹配。 使用 Array.prototype.slice() 将新数组的每个元素映射...

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

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

    前端迷
  • Resin4配置 By HKL, Thursday 11

    app-default.xml web应用配置 cluster-default.xml 集群配置 resin.xml resin.properties 会...

    hiplon
  • ASP.NET 5 之 错误诊断和它的中间件们配置错误处理页面在Development阶段使用错误页面运行时信息页面欢迎页面

    ASP.NET5包含若干个新的功能来辅助诊断错误,可以在Startup类中简单的为应用程序错误配置不同的处理程序或者显示关于应用程序的附加信息。 配置错误处理页...

    小白哥哥
  • 机器人操作系统ROS(indigo)与三维仿真软件V-Rep(3.2.1)通信接口使用笔记

    通过网页快速了解Linux(Ubuntu)和ROS机器人操作系统,请参考实验楼在线系统如下:

    zhangrelay
  • uni-app: 从运行原理上面解决性能优化问题

    Uni-App,从了解到开发,相信大家都会觉得Uni-App性能不好,其实也这是非原生的弊病。React Native、Flutter等,非原生框架,性能上都会...

    Javanx
  • 网友过招老杨:Gauss和Poincare数学问题的另类解法

    大家应该还记得前几天我们的一篇文章:用SQL解一道有趣的数学题:Gauss和Poincare ,错过的朋友请先回顾。感谢网友的反馈,发来新的解法一则。 如网友所...

    数据和云
  • 当 Wolfram 语言遇上引力波

    WolframChina

扫码关注云+社区

领取腾讯云代金券