• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

uniapp webview 加载H5,手机返回键处理成返回上一页,上一个网页

开发技术 开发技术 4小时前 1次浏览

加webview的vue相关处写如下加红代码

uniapp webview 加载H5,手机返回键处理成返回上一页,上一个网页

 

 

<script>
const facebook = uni.requireNativePlugin('sn-facebook');
var wv; //计划创建的webview
export default {
	data() {
		return {
			canBack: false
		};
	},
	onLoad() {},
	onBackPress() {
		if (wv && this.canBack) {
			wv.back();
			return true;
		}
		return false;
	},
	onReady() {
		// #ifdef APP-PLUS
		var self = this;
		var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
		setTimeout(function() {
			wv = currentWebview.children()[0];
			wv.addEventListener(
				'progressChanged',
				function(e) {
					wv.canBack(function(e) {
						self.canBack = e.canBack;
					});
				},
				false
			);
		}, 500); //如果是页面初始化调用时,需要延时一下
		// #endif
	},
	methods: {
		onMessage({ detail }) {
			const data = detail.data[0];
			console.log('onMessage', data);
			if (data.action == 'login') {
				// 登录:自定义参数
				facebook.loginWithParams(
					{
						permissions: [
							// 权限,更多权限请看 https://developers.facebook.com/docs/permissions/reference
							'email',
							'public_profile'
						],
						// 返回字段,更多字段请查看 https://developers.facebook.com/docs/graph-api/reference/user/
						fields: 'id, name, email'
					},
					e => {
						console.log(e);
						this.postMessage({ ...e, action: 'loginCallback' });
					}
				);
			}
		},
		// postMessage to web
		postMessage(data) {
			if (wv) {
				wv.evalJS('window.postMessage(' + JSON.stringify(data) + ');');
			} else {
				uni.showToast({
					icon: 'none',
					title: 'webview不存在'
				});
			}
		}
	}
};
</script>

  

 


喜欢 (0)