ToB企服应用市场:ToB评测及商务社交产业平台

标题: uniapp 小程序 嵌套 webview 返回需要点击两次 [打印本页]

---

作者: 何小豆儿在此    时间: 2024-7-23 14:54
标题: uniapp 小程序 嵌套 webview 返回需要点击两次
uniapp 小程序 嵌套 webview 返回需要点击两次

• 先 上图
  
  
  
  
• 小程序也监听不到 返回事件
  
• 在网上找了一圈 都没有理想的答案，猜测 是由于嵌入的页面中有标题
  
• 果然
  

小程序中嵌入的代码

1.         <view>
2.                 <web-view :src="urlSrc" ></web-view>
3.         </view>
6.         export default {
7.                 data() {
8.                         return {
9.                            urlSrc: "",
10.                         }
11.             },
12.             onLoad(options) {
13.                 // 这里是要嵌入的页面路径
14.                         this.urlSrc = getApp().globalData.webViewUrl + "/#/viewsEdit?key=" + options.id+"&token="+options.token
15.                 },
16.    }

复制代码

嵌入项目 app.vue
由于我需要在该项目中先登录，再跳转到 /viewsEdit 页面 所以需要再app.vue中做默认登陆操作，然后再跳转到 /viewsEdit

1. <template>
2.   <div id="app">
3.     <RouterView />
4.   </div>
5. </template>
7. <script>
8. export default {
9.   created() {
10.     // 有发送就有接收，与postMessage配套使用的就是message事件
11.     let that = this
12.     window.onload = function () {
13.       let datas = that.getUrlParams(window.location.href)
14.        localStorage.setItem('token', datas.token)
15.         // 登录成功后路由跳回
16.         // 重点
17.         // 重点
18.         // 重点
19.         // 此处一定要使用  replace  替换掉 路由栈中的记录
20.         // 不然 路由栈中会存在  ['/','/viewsEdit'] 两个记录  所以需要点两次才能退出
21.         // 使用 replace 后 路由栈中就剩了 ['/viewsEdit']
22.         
23.         // this.$router.push({
24.         //  path: '/viewsEdit',
25.         //  query: {
26.         //   key: datas.key,
27.         // }
28.         // })
29.         this.$router.replace({
30.           path: '/viewsEdit',
31.           query: {
32.             key: datas.key,
33.           }
34.         })
35.     }
36.   },
37.   methods: {
38.     getUrlParams(url) {
39.       const params = {}
40.       const reg = /([^?&=]+)=([^&]*)/g
41.       url.replace(reg, (match, key, value) => {
42.         params[decodeURIComponent(key)] = decodeURIComponent(value)
43.       })
44.       return params
45.     }
46.   }
48. }
49. </script>

复制代码

• 搞定 , 日常记录！
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4