小程序可以跳转h5链接吗,小程序和H5页面的相互跳转

互联网 2024-04-30 阅读

大家好,欢迎光临。关于小程序可以跳转h5链接吗和小程序和H5页面的相互跳转的相关疑惑,相信许多人都有所经历。此时此刻,你们就是在正确的地方,因为我要分享的就是关于小程序可以跳转h5链接吗和小程序和H5页面的相互跳转的全部故事。虽然文章篇幅稍长,但每一段都有其信息价值,希望读者们能耐心阅读下去,给自己一个学习的机会。

小程序可以跳转h5链接吗,小程序和H5页面的相互跳转

小程序和H5页面的相互跳转

    小程序跳转H5页面是通过web-view组件来实现的,web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面,也就是说h5页面的跳转是在小程序的环境下打开的。需要在小程序里建立一个空白页,放置webview用来展示H5页面。

限制条件:

     1、H5页面所在的域名必须为https

     2、由于web-view组件是一个全屏组件,不能和其它小程序组件合用,因此需要独立占据一个页面,由A跳到B,由B跳到h5页面

     3、小程序能够跳转的h5页面的域名必须在业务域名中进行注册

     4、小程序账号必须是企业账号,个人和海外账号暂不支持,只有企业账号才能看到业务域名入口

     5、设置网页授权域名,H5页面关联的服务号中去进行设置,在公众号设置添加好需要跳转的域名

1、h5页面在小程序环境下打开的情况下

限制条件:

     1、当前的h5页面必须是在小程序的环境下打开的页面,才能回跳小程序的指定页面。

     2、其它限制条件同小程序跳h5页面的要求

注意点:无论是小程序跳转H5页面还是跳转回来都是可以传递参数的

2、h5页面不在小程序环境下打开的情况下

    微信新增小程序跳转按钮:wx-open-launch-weapp(具体用法可参考官方文档)。用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。

1、通过微信公众号后台配置菜单,子菜单内容选择小程序

2、公众号推文里添加素材

点击小程序,弹框如下图(在弹框中可以选择展示的方式:文字、图片、小程序卡片、小程序码

3、当公众号和小程序已关联(在公众号的菜单中有绑定小程序的入口)

    小程序所在的菜单会出现在公众号的介绍页(如果是在二级菜单中,所对应的只出现相应一级的该小程序入口)

4、模板消息(直接在模板消息接口中配置)

     该小程序appid必须与发模板消息的公众号是绑定关联关系,点击模板消息跳转小程序,可支持跳转到小程序的具体页面,支持带参数,(示例index?foo=bar)

5、H5页面中嵌入小程序码

6、安卓手机debug调试(打开信息里面的调试功能)

小程序与H5如何互相跳转

需要用到小程序的web-view,官方文档链接

web-view是承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。写法如下:

注:当在微信开发中工具里返回“{"base_resp":{"ret":-1}}”时,需要点左上角“设置”--“项目设置”--勾选“不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS证书”

因为外部h5无法跳转到小程序,因此需要把h5内嵌到小程序的web-view中。

一:首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5:

二:然后在内嵌的网页里引入js,调用wx.miniProgram.navigateTo跳转小程序方法,可在url后拼接要传的参数:

三:小程序接受参数的页面:

index.wxml:

index.js

这样就从h5跳到小程序指定的页面并且可以拿到我们想要传的参数

原文作者技术博客:

95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。

欢迎留言交流

小程序不校验跳转第三方h5

网络问题。在使用微信打开某个小程序的时候,小程序不校验,而是跳转第三方h5,是网络问题导致的,需要更换一个快速的网络即可解决该问题。小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。

本站所有文章资源内容,如无特殊说明或标注,均为网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。

小猪断奶后多久驱虫,小猪多少斤开始驱虫

小程序怎么推广会比较好,微信小程序如何做推广