0

0

浅析如何从小程序跳到H5页面?(示例解析)

青灯夜游

青灯夜游

发布时间:2022-01-18 10:01:56

|

16530人浏览过

|

来源于掘金社区

转载

如何从小程序跳到h5页面?下面本篇文章给大家介绍一下微信小程序跳转到h5页面的方法,希望对大家有所帮助!

浅析如何从小程序跳到H5页面?(示例解析)

微信小程序:虽然开发方法类似网页,但实际上是一种只能运行在微信自己开发的浏览器中的特殊网页,它所能够使用的所有功能都必须由微信浏览器提供;H5页面:这是真正的网页应用,运行在通用浏览器中,各种浏览器虽然在细微上有所差别,但总的来说是一致的,微信浏览器同时也是一种通用浏览器,能够支持真正的网页应用。

因此我们才有可能在微信小程序和H5页面之间进行跳转,但这种跳转是受到微信浏览器的严格控制的,因此我们有必要了解这些控制包括哪些。

H5页面所在的域名:假设你需要调转的H5页面URL为https://www.mysite.com/h5page,那么这里所说的域名就是www.mysite.com,另外你没有看错,这个URL必须是https,如果你还没有为你的网站加上SSL,那么就先去申请一个证书吧(注意必须是公开申请的证书,不能是自签名的,微信不认哦!)

好了,这些都准备好了,让我们开始开发一个小例子。

由于web-view组件是一个全屏组件,不能和其它小程序组件合用,因此需要独立占据一个页面,所以我们到例子就是在小程序的A页面加一个链接,跳转到B页面,然后在B页面使用web-view组件来加载H5页面。

A页面


        
            
        
        
            文章标题
            文章摘要
        
        
jumpToH5: function () {
    wx.navigateTo({
      url: '/pages/B'
    })
  },

B页面

  data: {
    link: "https://www.mysite.com/h5page"
  },

这时候当你满怀希望的点击链接时,会出现第一个坎:未绑定网页开发者

1.png

这是什么鬼,原来使用web-view组件并不是啥人上来就允许使用的,这时候需要第一个授权,就是授权开发者使用该组件。这里比较扯淡的是虽然这个组件是小程序使用的,但并不能在小程序开发号里面设置,而必须在订阅号或者服务号中进行设置,网络上经常能够查到的下面这个截图只能登录订阅号或者服务号才能看到。

2.png

在这里设置绑定了开发者的微信号以后,我们终于可以使用web-view组件了,不过这时候又出了新问题: 不支持打开非业务域名

Detect GPT
Detect GPT

一个Chrome插件,检测您浏览的页面是否包含人工智能生成的内容

下载

3.png

原来并不是什么网址拿来就可以设置跳转的,你的小程序中就不能直接跳转到百度上去,小程序能够跳转的域名必须在业务域名中进行注册,总算这次是在小程序开发号里面设置了,但注意在服务号的设置里也有业务域名这个设置,不要搞混了(话说微信起名也太没有想象力了,简直是一坨浆糊)。

设置好了这个业务域名,满心欢喜地打开小程序,点击链接,What!又来,这次的问题变成了:redirect_uri参数错误

4.png

这时候控制权已经从小程序转移到了H5页面,但微信页面跳转内部的机制比较复杂,涉及到了OAuth认证之类的,所以这个错误已经是H5页面报的了,这就需要到H5页面关联的服务号中去进行设置,这次设置的项目叫做网页授权域名,在公众号设置的功能设置里

5.png

添加好需要跳转的域名之后,终于能够看到H5页面出现在调试器上了!

最后普及一下微信公共平台三类账号的区别

服务号:支持最多的Web开发接口和JS开发接口,是最常规的应用开发账号;
订阅号:发文章用的,开发接口比较少,很多功能都不支持,是最傻瓜的文章发布账号;
小程序:小程序应用的专属开发账号,仅支持对小程序的开发,有许多设置还必须到前两类账号中去设置。

【相关学习推荐:小程序开发教程

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

0

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

20

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

62

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

87

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

39

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

19

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

160

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Excel 教程
Excel 教程

共162课时 | 12.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号