详解uniapp开发h5页面在微信浏览器跳转外链,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会为空 赋值不上去
详解uniapp开发h5页面在微信浏览器跳转外链,ios按底部返回键,需要刷新页面数据的问题_第1张图片
第二种情况可以解决我刚刚说的 赋值为空的坑
新建一个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='+'帐多多会员协议'
})

第二种方法也有一个不太友好的地方,就是标题得你自己传,不传的话那标题就是页面链接名称,而用第一种方法的话 会自动取值外链的网页标题。
两种方法各有弊端 具体根据自身需求去取决用哪一种吧

你可能感兴趣的:(uni-app,微信h5兼容性问题,uni-app,微信,ios)