从H5页面跳转到小程序

已于 2022-09-20 10:39:00 修改
阅读量848 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 微信小程序 前端
于 2022-09-20 10:02:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/126947342
版权
本文介绍了如何通过URL Scheme的方式，使外部浏览器中的H5页面能够跳转到微信小程序。详细讲解了获取小程序URL Scheme的方法，包括通过云开发和小程序管理后台，并提到了2022年4月11日的相关规则调整。同时，指出了生成的URL Link在微信环境内只会跳转到正式版，并提供了在web-view中返回上一页的解决方案。
摘要由CSDN通过智能技术生成

通过 URL Scheme

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

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

那如何获取小程序的 URL Scheme 呢？可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。但是2022 年 4 月 11 日进行了调整

小程序链接生成与使用规则调整公告 | 微信开放社区

直接放在h5页面的按钮的点击事件中，如：

openWeapp() {

    location.href =

最低0.47元/天 解锁文章
肖肖肖丽珠
关注
专栏目录
H5页面跳转小程序的三种方式
qq_41939902的博客
02-10 2万+
H5跳转小程序的三种方法
外部h5跳转到小程序
qq_45909266的博客
02-26 1693
*注：本章教程为：结合官方文档和实际开发中探索的一点浅薄经验的记录，希望能帮助开发者们，谢谢~ Action： 微信内部的h5页面可以采用开放标签进行跳转 感兴趣的伙伴请自行到官网查阅 本文主要讲用小程序云开发的静态托管实现，外部浏览器的h5跳转 结合官方文档，我们先来编写h5的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ
在网页H5中打开微信小程序的功能
m0_73035846的博客
07-25 1094
因为用uniapp 开发了一个安卓的app, 因为苹果的打包太麻烦 一直审核不过 ，所以就打算让苹果用户点击 H5 浏览器的时候，可以直接打开小程序的功能。在设置中 明文scheme拉起此小程序 然后我们点击配置 我配置的是首页。这样就可以了 ，这个方法 可以让你少走弯路 ，网上太多文章容易花眼了。然后 我们就可以在 H5 网页中 进行一个链接跳转 就可以唤起小程序了。配置好之后，我们按照他的链接方式写我们的链接。1. 首先我们去这个网址上。我们按照他的上面步骤来实现。配置完成之后 就是一个已配置。
微信h5网页跳转小程序，以及跳转内嵌h5小程序指定页面
weixin_57286220的博客
05-06 2986
1）首先是在index.html中引进微信sdk。2）在该h5的vue里，如果h5页面可能会存在多种环境里，那么首先还需要判断微信h5网页环境： `isWeixinH5`（如果确定该h5页面只会存在微信网页中，那么可以不用判断）
【实战】H5跳转到小程序
人类所有真实的快乐，一定是恒久的努力
04-24 1970
H5跳转到小程序
h5页面跳转微信小程序（最简单的方法|URL Scheme）
热门推荐
肥晨开发的学习之路
12-21 1万+
用户可以在H5页面中浏览和选择商品、服务等内容，然后直接跳转到微信小程序中进行购买、支付等操作，避免了在不同平台之间的切换和跳转，提高了使用效率和便捷性。微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。开发者无需调用平台接口，在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。行业内幕，洞察先机。
如何在微信H5页面链接跳转到第三方小程序的任意页面？
极客开源之逍遥子
04-12 7519
在微信内的H5界面，跳转到第三方小程序的前提条件： 佣有已认证的服务号，服务号添加“JS接口安全域名”, 即访问H5界面的域名 获得第三方小程序的原始ID 这个只能手动获取，微信官方没有给出api接口动态调用，获取方法见图 获得第三方小程序的页面路径 如果页面路径获取不到，默认跳转的是第三方小程序的首页， 获取页面路径官方也提供了手动获取方法，但是也有没有暴露的API方法，这里我实现了动态获取，见下图： 先收藏要获取的页面，然后再切换到消息会话界面发送刚收藏的页面，稍等几秒就会自动
h5页面跳转微信小程序（最简单的方法-URL Scheme）
12-21
微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。符合开放范围的小程序可以下发支持打开小程序的短信 该...
小程序跳转到的H5页面再跳转回跳小程序的方法
10-15
我们首先来看看小程序如何跳转到H5页面，然后再讨论如何从H5页面返回小程序。 ### 小程序跳转到H5页面 小程序跳转到H5页面的实现相对简单，通常使用`wx.navigateToMiniProgram` API。开发者可以通过设置URL参数将...
微信小程序跳转到H5页面实战篇.pdf
02-22
.
Html5页面跳转小程序的三种方式
云加速
06-06 1559
首先需要在微信开放平台获取相应的权限和配置，然后在页面中引入微信JS-SDK，并在合适的时机调用跳转方法。： 如果条件允许，可以让用户在微信内嵌浏览器中打开HTML5页面，然后通过内嵌浏览器的跳转逻辑实现跳转。： 通过微信分享功能，将HTML5页面分享到微信会话或朋友圈，用户点击分享链接后，可以跳转到小程序。用户扫描小程序码后，可以进入小程序。这需要在HTML5页面中实现微信分享的逻辑，并在分享内容中嵌入小程序的跳转链接。这种方式需要用户在微信中打开HTML5页面，然后页面内部实现跳转逻辑。
H5链接跳转到微信小程序开发流程记录
红岸基地
04-13 1803
该文章旨在解决H5链接跳转到微信小程中任意页面，可以携带参数，包含静态参数和动态参数......
aboboo 上一句 快捷键_锁定微信防别人偷看，苹果电脑上的微信有何不同？
weixin_39862697的博客
11-06 618
题图：来自 platform.sh这是临时想到的一个题目，就想简单写一下苹果电脑的 Mac 版微信与 Windows 版本有何不同。锁定微信当你在电脑上登录微信后，移动端的微信首页顶部会显示「Windows/Mac 微信已登录」。如果你是在 Mac 上登录微信，点击顶部的登录状态，相比在 Windows 上登录，菜单中会多出「锁定」的选项。点击锁定，Mac 上的微信会呈现下图的状态，当你...
外部浏览器中H5跳转微信小程序方法
qq_41567857的博客
09-02 218
1.在需要跳转的小程序的小程序管理后台中通过工具直接生成, 该方法生成的URL Scheme不能实时指定跳转小程序的页面也不能向小程序传递参数。2.如果需要指定跳转小程序的页面或者需要向小程序传递参数, 则需要使用 服务端接口 的方法来获取URL Scheme。H5网页通过URL Scheme进行跳转。URL Scheme的获取方法有两种。
H5页面跳转到小程序页面
ppxgf的博客
09-28 958
H5页面跳转到小程序页面
微信公众号开发之H5页面跳转到指定的小程序
zls365365的博客
02-15 3740
前言：　　最近公司有一个这样的需要，需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮。之前只知道小程序之间是可以相互跳转的，今天查阅了下微信开发文档原来现在H5网页也支持小...
关于H5跳转到小程序和android的方法
weixin_34117211的博客
02-14 1477
2019独角兽企业重金招聘Python工程师标准>>> ...
H5网站跳转打开微信小程序源码 小程序外链跳转源码
最新发布
m0_73348158的博客
09-08 425
非个人主体并且已认证的(微信认证)小程序，使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分软件跳转微信小程序。静态网站网页在微信客户端打开时，wx.config 可以传入小程序 AppID并且不需计算签名，也就是免鉴权即可使用跳转小程序的能力。
浏览器h5页面跳转到小程序指定页面
05-25
可以通过使用微信小程序的跳转API来实现在H5页面中跳转到小程序指定页面。 具体步骤如下： 1. 在H5页面中引入微信JS SDK，并初始化。 ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> wx.config({ appId: 'YOUR_APP_ID', timestamp: 'YOUR_TIMESTAMP', nonceStr: 'YOUR_NONCESTR', signature: 'YOUR_SIGNATURE', jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData', 'onMenuShareAppMessage'] }); </script> ``` 2. 在H5页面中添加一个按钮或链接，点击后触发跳转到小程序的功能。 ```html <button onclick="jumpToMiniProgram()">跳转到小程序</button> ``` 3. 在JavaScript中编写跳转到小程序的函数。 ```javascript function jumpToMiniProgram() { wx.miniProgram.navigateTo({ url: 'pages/index/index', // 小程序中需要跳转的页面路径 success(res) { console.log('跳转到小程序成功'); }, fail(res) { console.log('跳转到小程序失败'); } }); } ``` 需要注意的是，跳转到小程序的功能需要在微信客户端中才能正常运行，因此需要在微信客户端中打开H5页面。如果在其他浏览器中打开H5页面，则无法跳转到小程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值