文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

从H5页面跳转到小程序的实现方案有哪些

2023-06-28 23:19

关注

本篇内容主要讲解“从H5页面跳转到小程序的实现方案有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“从H5页面跳转到小程序的实现方案有哪些”吧!

实现方案

实现H5跳转小程序的方案目前有多种,可以根据自己的实际场景选择,上面提到的场景采用第二种更合适,我们先来一个个看。

第一种:通过 URL Scheme

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

小程序的 URL Scheme 如果借助于云开发的话,是免鉴权,直接调用即可获取,这里不过多赘述,感兴趣的童鞋自己查文档吧~

那如何获取小程序的 URL Scheme 呢?可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。

使用示例

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

从H5页面跳转到小程序的实现方案有哪些

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

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

其他细节可参考微信官方文档。

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

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

打开链接后,会有微信默认的H5中转页(想要自定义H5中转页也是可以的),目前的版本已经支持默认自动跳转小程序,不需要用户确认,这点很不错。

获取 URL Link 的方式

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

具体细节可参考微信官方文档。

踩坑记录

从H5页面跳转到小程序的实现方案有哪些

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

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

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

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

HTML标签示例
<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">        <style>.btn { padding: 12px }</style>        <button class="btn">打开小程序</button>      </script>    </wx-open-launch-weapp></div>

详细可参考微信官方文档。

注意要点

到此,相信大家对“从H5页面跳转到小程序的实现方案有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯