小程序使用WebView解决跳转两次问题

由于在小程序和APP需要复用一套页面,所以使用h5嵌套在各种平台上
小程序中,当跳转Webview页面时,可以明显感到刷新两次
并且在h5回退到小程序中,他会卸载页面返回上一个同样的页面 也就造成了我们回退小程序返回两次
这样对用户体验并不友好

在小程序中可以这样解决
Taro使用:
	在webview的页面中
	{this.state.access_token && <WebView src={this.state.url && this.state.url  } onLoad={() => this.onLoad()}></WebView>}
 //可以把url当作变量 并且判断有无变量再链接到外部。视业务而定

接下来
在H5页面中,当我们卸载当前页面时,需要执行

window.onunload = function () {
  wx.miniProgram.navigateBack({});
};

这里注意的是,我们需要引入wx-jssdk才能使用微信的开放接口

然后重新编译项目或者刷新就可以正常回退了

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni小程序中,可以使用web-view标签来嵌套H5页面。例如,可以通过以下方式引入H5页面的链接: `<web-view :src="url" class="page"></web-view>` 或者 `<web-view src="xxx.com/xxx.html" class="page"></web-view>` 然而,需要注意的是,uni小程序不能向内置的web-view实时传递参数,只能通过URL地址首次传递数据过去。官方并没有开放接口来解决这个问题。但是,有心人总能找到解决办法。例如,可以在小程序中检查是否执行了UniAppJSBridgeReady事件,在嵌套后,如果出现小程序调试时显示HTTPS和HTTP冲突的错误,可以尝试解决该冲突。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uni小程序使用webview嵌入h5页面,如何在h5页面返回webview页面](https://blog.csdn.net/wtaz666/article/details/125160912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [突破小程序webview实时传递参数的限制](https://download.csdn.net/download/niceyou2008/11148363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值