小程序内嵌web-view实现路由切换到同级页面无效的解决方案

于 2024-03-13 11:15:41 发布
阅读量543 收藏 10
点赞数 10
文章标签： 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_a_fighting/article/details/136674722
版权
本文介绍了在Vue框架的Web-View组件间跳转时，根据页面层级关系的不同，如何选择使用uni.navigateTo还是uni.switchTab方法，以及URL路径声明的最佳实践。
摘要由CSDN通过智能技术生成

如果与当web-view不处于同一层级目录下，直接使用 uni.navigateTo({url:‘xxxx’});即可实现跳转，如果处于同级目录下需要使用 uni.switchTab({url:‘xxxx’}),并且声明url时候需要注意是…/的形式，比如web-view在pages/chat/index.vue ,跳转到pages/mine/index.vue那就声明成：

../mine/index
MonsterQy
关注
Vue-router命名路由与嵌套路由
qq_37635012的博客
06-02 1641
命名路由 给路由命名就是在routers配置路由的时候加一个name属性，特别是在嵌套路由path名称特别长的时候，通过name名称来标识一个路由更加方便一些。 以下四种方式都可以导航到/page/home路径： template模板里 或者说当用户点击了某个按钮，直接要跳到home.vue，那么可以在methods里代码调用: 嵌套路由 嵌套路由就是路由里面嵌套他的子路由，子路由关键属性children每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器 举例：假设page页面下包含hom
Vue3【Vue路由概念、项目引入路由、集成Vue路由 、编程式导航、带参数的动态路由匹配 、嵌套路由、重定向和别名、命名视图、不同的历史模式​】(十)-全面详解（学习总结---从入门到深化）
04-02 491
Vue3【Vue路由概念、项目引入路由、集成Vue路由 、编程式导航、带参数的动态路由匹配 、嵌套路由、重定向和别名、命名视图、不同的历史模式​】(十)-全面详解（学习总结---从入门到深化）
关于微信小程序webview的使用
weixin_34319111的博客
12-02 1574
小程序 微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还是体验了下web-view的功能。 web-view详解 有了这个组件之后，小程序可以很好的嵌入一些页面，可以环境小程序size告急的问题...
uniApp开发,微信小程序/H5,navigateTo跳转失效原因解决
最新发布
weixin_45395283的博客
03-04 1198
检查 按钮 z-index的值,不能小于1,否则H5中执行不到方法。
Android 内置webview避免外部跳转或内嵌chrome植入复杂vue项目
资深全栈开发工程师
09-09 3107
webview 同时支持 WebChromeClient 和 WebViewClient 但总是跳转到chrome浏览器。
小程序嵌套H5跳转(web-view)问题解决
wangjie的博客
05-04 2990
小程序嵌套h5页面跳转问题
Android webView控制网页路由
天暗下来，你就是光
07-16 2130
Android webView控制网页路由1.在APP内部打开新网页 webview.loadUrl(Constant.RECORDS + guid); webview.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(We
微信小程序api语法及代码实例（入门到精通）
Debug的博客
09-08 3555
小程序Api App 全局入口，整个小程序项目中，只允许有一个App入口函数。 全局数据 globalData:写在全局的js里 使用this.globalData.data 私有的生命周期【全局的生命周期】 onLaunch:初始化函数 onShow:启动或切换前台 onHide:小程序后台运行 Page 私有的生命周期【页面的生命周期】 onLoad:页面加载 onShow:页面显示 onHide:页面隐藏 onReady:页面初始化渲染完成 onUn
Vue-router（Vue路由基础）
weixin_42824291的博客
02-20 577
安装 第一种安装（自动安装）： vue-router下载链接 https://unpkg.com/vue-router/… 下载完后，直接引入 <script src="vue.js"></script> //第一条引入 <script src="vue-router.js"></script> //第二条引入 或 <script src
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
微信小程序web-view内嵌微信公众号的H5页面路由无法跳转问题
qq_45630675的博客
12-14 1005
业务场景： 1.0版本的功能是在小程序中进行开发的，2.0版本的部分功能是放在微信公众号（uniapp开发的H5页面）的，小程序通过web-view引入的页面无法调起微信支付功能，在公众号中直接从菜单进入功能就可以唤起微信支付。wx.miniProgram.navigateTo最低版本要求1.6.4以上。解决方案：在小程序中做一个微信支付的页面，公众号内需要微信支付的地方，路由跳转回小程序。步骤：判断当前环境（公众号—>直接进行微信支付，小程序—>跳回小程序支付页面唤起支付）
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 1万+
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
WebView 跳转没反应问题
Mr.SSY的博客
09-14 1437
WebView web = findViewById(R.id.web); WebSettings settings = web.getSettings(); settings.setJavaScriptEnabled(true); settings.setJavaScriptCanOpenWindowsAutomatically(true); //加上这...
解决H5页面在微信中跳转时URL不变的问题
qq_41068783的博客
05-14 4327
最近做了一个功能，H5页面需要在微信中打开，到最后一个页面时，需要重新再浏览器中打开，然后调起APP，使用vue-router的hash模式，根据网上的办法，一直实现不了，现在目前有两个办法 1. hash模式改成history模式： history发布的时候会比hash模式外面多添加一个文件夹；finance 首先把vue-router里面的路由配置的mode改成history模式，然后前端需...
微信小程序嵌入 H5 页面（web-view）
热门推荐
hudeyong926的专栏
12-15 2万+
2、在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决；在开发微信小程序的时候，我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况；会自动铺满整个小程序页面，个人类型的小程序暂不支持使用；1、web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信；页面中的 iframe ，方便我们在微信小程序中打开一个 H5 页面；这里添加需要嵌入到小程序里面 H5 页面的合法域名（最多200个）；
uni-app使用web-view与web-view内嵌H5页面进行路由跳转的实现方法
Wuyo_7的博客
09-14 7479
uni-app使用web-view与web-view内部H5页面进行通信交互的方法 近期有业务需求，需要在uniapp中的构建的微信小程序嵌入另一个uniapp构建的h5页面进行交互的需求，翻了官方文档，发现官方文档的例子仅仅是针对原生html的，在无数次的试错之后，学会了在uniapp中引入uniwebview的方法，故记录一下。 1.在uniapp的H5项目中创建入口index.html文件 项目根目录下打开manifest.json文件，创建模板路径。 2.在index.html文件下引入官方示例的文
小程序内嵌web-view之分享（2）
luoyumei的博客
06-23 8471
网页与小程序之间通信，网页引入JSSDK 1.3.2 在web-view中绑定bindmessage事件 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data } <web-view src='{{url}}' bindtap='toShare' bindmessage="bindme...
浅谈小程序内嵌网页及内嵌网页跳转分享实现
weixin_34034261的博客
12-04 1110
上个月，小程序开发内嵌web页面的功能，这个对于很多微信开发者都是个重大消息。最近两天，笔者项目中有这样一个需求，支持小程序内嵌网页，并且在内嵌网页中多次跳转，分享后，点开还是在跳转之后的网页。对于这样一个新技术，还是充满好奇，既然老大说了要做，那就尝试去做呗。 首先，当然是参考微信小程序的api。 <web-view src="https://mp.weixin.qq.com/">&...
微信小程序web-view组件 打开外部url
Cindy
07-30 2万+
在测试时需要给swiper组件添加外部链接问题。今天我来说一下怎么解决的？ 思路：小程序里没有办法直接给swiper组件添加链接，点击时用api wx.navigateTo实现的。 微信小程序团队推出一个新组件web-view， 可以在这个组件中打开你的html5网页， 而且可以在web-view里面打开网页的a标签， 也就是说可以实现链接跳转。 例如： wxml 内容 &lt;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值