详解uniapp开发h5页面在微信浏览器跳转外链,ios按底部返回键,需要刷新页面数据的问题
处理ios 点击微信浏览器返回键刷新页面的问题
·
我是用uniapp写的
第一种情况:
用 windows.local.href=‘外链’ 跳转的情况
onLoad(opt) {
let that=this
//兼容ios 返回事件
window.addEventListener("popstate",function(e) {
that.getData()
}, false);
}
methods:{
//该函数是调取接口获取页面数据
getData(){}
}
第一种情况有一种坑,具体什么原因导致我也不是特别清楚,
就是填写报名信息后,点击查看会户协议,然后返回页面,想要重新赋值刚刚填写好的信息,input框我是用v-model绑定的值,正常来说 在popstate 里面将值赋上去就会生效的,但是ios会为空 赋值不上去
第二种情况可以解决我刚刚说的 赋值为空的坑
新建一个webView.vue页面
<template>
<view class="page">
<!-- <view class="header">
<navigation title="浏览" :isBack="true"></navigation>
</view >-->
<view class="content">
<web-view :src='url' style="width: 100%;"></web-view>
</view>
</view>
</template>
<script>
var self;
export default {
name: 'webview',
data() {
return {
url:''
}
},
onLoad(options){
self = this
// 设置标题title: options.title || '预览'
if(options.title){
uni.setNavigationBarTitle({
title: options.title
});
}
if(options && options.url) {
self.url = decodeURIComponent(options.url)
}
}
}
</script>
<style>
</style>
该页面也需要在page.json注册
第二步跳转,以及刷新
//刷新数据就只需要在onload调用就好,像第一种方法存在的坑,也只需要在onload 赋值就好
onLoad(){
//刷新数据
this.getData()
}
//跳转用navigateTo就好
let url=encodeURIComponent('外链')
uni.navigateTo({
url:'/pages/webview/index?url='+url+'&title='+'帐多多会员协议'
})
第二种方法也有一个不太友好的地方,就是标题得你自己传,不传的话那标题就是页面链接名称,而用第一种方法的话 会自动取值外链的网页标题。
两种方法各有弊端 具体根据自身需求去取决用哪一种吧
更多推荐
已为社区贡献3条内容
所有评论(0)