个人技术集锦

您的当前位置：首页正文

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

2024-11-07 来源：个人技术集锦

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

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

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

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

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

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页面重新挂载。具体代码如下：

Top