首页 > 编程语言 >浅析H5页面跳转小程序的3种实现方案

浅析H5页面跳转小程序的3种实现方案

时间:2023-06-15 13:44:21浏览次数:46  
标签:URL 程序 H5 跳转 Scheme 浅析 页面

  经常会有这样的场景:用户在网页中一键唤起小程序,能够给用户提供更好的体验。实现H5跳转小程序的方案目前有多种,可以根据自己的实际场景选择。

第一种:通过 URL Scheme

  适合在外部浏览器运行的H5页面,通过 URL Scheme 的方式来拉起微信打开指定小程序。

  那如何获取小程序的 URL Scheme 呢?可以通过服务端接口(文档:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateScheme.html)或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。

  使用示例:下图是通过【小程序管理后台 - 工具 - 生成 URL Scheme 】的页面

  填入具体的路径以及参数,点击【生成】按钮,将生成的 URL Scheme 存起来,直接放在按钮的点击事件中,如:

openWeapp() {
    location.href = 'weixin://dl/business/?t=xxxxxx'
}

  整体思路:前端调用后端接口,后端调用微信接口生成Url Scheme返回给前端,前端得到Url Scheme后,打开该链接即可实现跳转生成的 URL Scheme。

  其他细节见官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

第二种:直接用微信的短链(URL Link)

  这种一般适用于不需要额外开发H5页面,直接生成链接,用户通过打开链接即可跳转指定的小程序页面。

  获取 URL Link 的方式:通过服务端接口可以获取打开小程序任意页面的 URL Link

  详见接口文档:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-link/generateUrlLink.html

  具体细节可参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-link.html

第三种:在自定义H5页面嵌入微信标签

  这种适用于运行在微信环境的自定义H5页面,将跳转按钮融合在自研H5应用,点击按钮后跳转指定小程序页面。

  如何使用?

1、需要 js-sdk-1.6.0 以上才支持

2、在wx.config中增加openTagList(开放标签列表)

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});

  openTagList(开放标签列表)目前支持配置:

  • wx-open-launch-weapp - 指H5跳转小程序
  • wx-open-launch-app - 指H5跳转app
  • wx-open-subscribe - 服务号订阅通知按钮
  • wx-open-audio - 音频播放
<div class="module-wrap">
    <div class="module-A"></div>
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index?user=123&action=abc"
    >
      <script type="text/wxtag-template">
        <button class="btn">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
</div>

  详细可参考官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

  注意要点:

  • 使用该功能必须是非个人主体认证的小程序
  • 只能跳已发布的【正式版】小程序,不能跳【体验版】或【开发版】
  • path 属性,官方文档一般是 pages/home/index?user=123&action=abc 这种示例,但实际使用可能会报页面不存在,需要在所声明的页面路径后添加 .html 后缀,如 pages/home/index.html

标签:URL,程序,H5,跳转,Scheme,浅析,页面
From: https://www.cnblogs.com/goloving/p/17388622.html

相关文章

  • 高仿QQ Xplan的H5页面
    概述这个h5的主要玩法很简单:地球自转的时候会播放背景音乐(比如海浪声),为了找到这个声音是从哪个地球上哪个地方传来的,需要长按下方的按钮,这时地球会自动转动到目标地点,然后镜头拉近,穿过云层,最后你会看到和这段声音相关的视频内容;松开手之后,上面的过程会倒退回去,地球又开始自转......
  • 开源即时通讯IM框架MobileIMSDK的H5端开发快速入门
    ► 相关链接:① MobileIMSDK-H5端的详细介绍② MobileIMSDK-H5端的开发手册new(* 精编PDF版)一、技术准备您是否已对Web端即时通讯技术有所了解?1)新手入门贴:史上最全Web端即时通讯技术原理详解2)Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE您需要对WebSocket技......
  • 浅析数智化转型深层次的挑战
    第三方数据显示,过去几年全球数字经济同比增长15.6%,采取数智化转型战略的企业相比2年前增加42%,企业用于数智化转型的直接投资复合增长率更是达到16.5%。这些数据都表明,越来越多的企业正在加快数智化转型,并且增加投资,希望以数智化来面对不确定性,这也让数智化转型迈入了新的阶段。用友......
  • Vue-router跳转和location.href有什么区别
    vue-router使用pushStat进行路由更新,不刷新页面,静态跳转;使用diff算法,按需加载,减少dom操作,同一个页面跳转或者路由跳转异步加载this.$nextTick(()=>{获取url})使用location.href来跳转,简单方便,但是刷新了页面;不同页面间跳转可以直接获取当前路径......
  • uniapp开发公众号H5时用户缓存无法清除问题
     业务场景:  此项目是一个vx公众号h5项目,每次更新版的时候用户端由于有缓存,每次都是使用滞后的版本解决方案:一、index.html文件如何保证不缓存,每次都使用服务器上最新的代码?此时需要一下标签:<metahttp-equiv="Cache-Control"content="no-cache,no-store,must-revali......
  • H5 qq浏览器video拦截处理
    QQ浏览器中如果使用video标签,那么浏览器会将video劫持,使用他们浏览器自带的video,那么层级会很高,之前写在video上面的样式就会被覆盖,因此可以把视频url转成blod,那么就可以解决从虎牙直播发现的,他们转为blod后,上面就可以加弹幕,滚动条等,因此发现了这个 1、将video的视频链接转为......
  • HDR技术趋势浅析
    HDR年终盘点#008#1.HDR视频技术简介1.1 HDR技术概述在5G+AI的大时代背景下,超高清(UHD)视频将取得更快的发展,不单是在传统的广播电视领域,而且在互联网视频、OTT领域也会有越来越多应用上线。超高清视频不仅在分辨率、帧率上有提升,更重要的是体现在高动态范围(HDR)和宽色域(WCG)上。与传......
  • 暴力破解浅析
     转发图床失效,将就看吧。。。暴力破解浅析_歪曌的博客-CSDN博客......
  • H5实现左右滑动手势
    使用已有的轮子简单实现H5左右滑动手势安装vue2-touch-eventsnpminstallvue2-touch-events在main.js中引入//main.jsimportVue2TouchEventsfrom'vue2-touch-events'Vue.use(Vue2TouchEvents)通过自定义指令使用<!--template--><!--需要监听左右滑动手势的......
  • 游戏约玩陪玩圈子系统APP小程序H5,你需要了解的事情
    游戏约玩陪玩小程序开发的市场需求分析目前,中国约有5、6亿游戏玩家,其中约有2亿付费玩家,这也表明大多数玩家愿意为他们最喜欢的游戏付费。随着游戏体验的提高,玩家更愿意找到合适的游戏玩伴。点击咨询完整免费源码游戏约玩陪玩小程序开发都需那些功能呢?1、电竞游戏资讯通过建......