uniapp webview 載入H5,手機返回鍵處理成返回上一頁,上一個網頁
阿新 • • 發佈:2021-10-13
加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框架