小程序跳转h5页面的若干问题

置顶莫鸣明

已于 2024-11-05 20:53:07 修改

阅读量1k

点赞数 8

分类专栏：小程序h5 文章标签：小程序

于 2024-10-31 23:39:22 首次发布

本文链接：https://blog.csdn.net/qq_40713392/article/details/143379702

版权

小程序h5 专栏收录该内容

2 篇文章

订阅专栏

1.小程序中如何内嵌（跳转）h5网页

使用web-view组件，该组件会自动铺满小程序页面。（注意：客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效）
如下图所示代码：
在这里插入图片描述

2.小程序本地如何调试h5网页，不是会校验域名吗？

那首先，本地开发，需要启动好h5网页的服务。然后，在微信开发者工具里 =》详情=》本地设置中，将“不校验合法域名”的配置勾选上。如下图：
那么，本地开发，在微信开发者工具里，如何调试h5网页呢？
如下图：点击
部署上线后，需要在小程序后台配置h5页面的合法域名

3.小程序如何传参到h5呢？

通过在web-view组件上的属性src（即跳转的h5地址）上拼接查询字符串。如下图所示：
在这里插入图片描述
然后，在h5页面中，通过onLoad方法的option参数中获取传参

4.小程序跳转到h5后，又如何从h5跳转到小程序页面呢？

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。
可以在html文件中，用script引入

// <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'}) // /path/to/page: 为小程序页面路径

避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent

5.小程序页面跳转到h5页面，如何触发h5页面刷新呢？

思路：可以在web-view组件使用wx:if，然后，动态改变绑定的布尔类型的变量，当变量为true时，就会触发h5页面重新挂载。具体代码如下：
在这里插入图片描述