小程序和H5页面的相互跳转
Posted fanny_匚
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序和H5页面的相互跳转相关的知识,希望对你有一定的参考价值。
小程序跳转到H5页面
小程序跳转H5页面是通过web-view组件来实现的,web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面,也就是说h5页面的跳转是在小程序的环境下打开的。需要在小程序里建立一个空白页,放置webview用来展示H5页面。
限制条件:
- H5页面所在的域名必须为https
- 由于web-view组件是一个全屏组件,不能和其它小程序组件合用,因此需要独立占据一个页面,由A跳到B,由B跳到h5页面
- 小程序能够跳转的h5页面的域名必须在业务域名中进行注册
- 小程序账号必须是企业账号,个人和海外账号暂不支持,只有企业账号才能看到业务域名入口
- 设置网页授权域名,H5页面关联的服务号中去进行设置,在公众号设置添加好需要跳转的域名
H5页面跳转到小程序
1、h5页面在小程序环境下打开的情况下
限制条件:
- 当前的h5页面必须是在小程序的环境下打开的页面,才能回跳小程序的指定页面。
- 其它限制条件同小程序跳h5页面的要求
注意点:无论是小程序跳转H5页面还是跳转回来都是可以传递参数的
2、h5页面不在小程序环境下打开的情况下
微信新增小程序跳转按钮:wx-open-launch-weapp(具体用法可参考 官方文档 )。用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序.
- 通过微信公众号后台配置菜单,子菜单内容选择小程序
- 公众号推文里添加素材点击小程序,弹框如下图(在弹框中可以选择展示的方式:文字、图片、小程序卡片、小程序码
- 当公众号和小程序已关联(在公众号的菜单中有绑定小程序的入口)
3.1小程序所在的菜单会出现在公众号的介绍页(如果是在二级菜单中,所对应的只出现相应一级的该小程序入口)
4.模板消息(直接在模板消息接口中配置)
4.1该小程序appid必须与发模板消息的公众号是绑定关联关系,点击模板消息跳转小程序,可支持跳转到小程序的具体页面,支持带参数,(示例index?foo=bar)
5.H5页面中嵌入小程序码
6.安卓手机debug调试( 打开信息里面的调试功能 ) 分类信息平台外链
小程序 公众号/h5相互跳转-webview
小程序与h5的跳转
前提小程序管理后台配置域名白名单,并且h5页面是嵌在小程序里面(相互跳的前提条件)
在业务域名中设置好访问的h5地址
微信官方web-view 介绍地址 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
小程序跳转h5需要用到web-view这个原生组件
pages生成一个webview的目录
wxml中
<web-view src="{{url}}"></web-view>
js中接受页面传来的url值
/** * 页面的初始数据 */ data: { url:null, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ url: options.url }) },
这样就完成了 小程序跳转 h5页面
2019-03-19
h5跳转小程序
h5跳转小程序 一个是 这个h5必须是 小程序内嵌的h5,同样需要在小程序后台进行业务域名设置
在小程序内能够访问到的h5页面 ,就可以在h5页面上进行小程序的跳转 (h5跳转小程序 需要在小程序的环境中进行跳转 才能 找到目录)
在h5页面 引入 微信的官方js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
然后 点击的时候 回跳小程序 这里的目录 和 app,json的目录保持一致
wx.miniProgram.navigateTo({url: \'/pages/card/card\'})
就可以实现 h5跳回小程序了
以上是关于小程序和H5页面的相互跳转的主要内容,如果未能解决你的问题,请参考以下文章