1. 程式人生 > 其它 >uniapp webview 載入H5,手機返回鍵處理成返回上一頁,上一個網頁

uniapp webview 載入H5,手機返回鍵處理成返回上一頁,上一個網頁

加webview的vue相關處寫如下加紅程式碼

<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>

  

基於夢行Monxin框架