vue plus.webview 实现 类似微信右上角 关闭小程序
用过微信的人相信都知道 (左图) 我实现的效果(右图)
大概总结了下, 一共有两种方案,
方案一:
保留 plus.webview 的 titleNView 然后设置 titleNView属性 显示 图片按钮
titleNView属性 首先给一个透明属性 然后启用图片 ,但是使用系统提供的 icofont 有局限。 所以下面是 使用自定义的 icofont
这里注意两点:
自定义 icofont Unicode编码一般 :'\u900' 这里要改成 '\ue900'fontSrc 的路径,应为是App 所以在你的 相对路径前面加上 '_www'这个方法有一定的 局限性
plus.navigator.setFullscreen(true);var w = plus.webview.create(url, 'pay', {}, data);w.setStyle({'zindex': 30,'titleNView': {'backgroundColor': '#f7f7f7','titleText': '','titleColor': '#000000','type': 'transparent', //透明渐变样式 autoBackButton: false,buttons: [{text: '\ue900',fontSrc: '_www/static/icofont/fonts/mt-app.ttf',float: 'right',onclick: function() {w.canBack(function(e) {if (e.canBack) {w.back();} else {w.close(); //hide,quit//plus.runtime.quit();plus.navigator.setFullscreen(false);}})}}]}})//屏蔽 android 手机的物理 返回键 esc w.evalJS("plus.key.addEventListener('backbutton',function () {})");w.show(); // 显示窗口
方案二:
新建一个层显示 在webview 之上
plus.webview 直接屏蔽 titleNView false 新建一个 显示层 plus.nativeObj.View 新建一个图片 plus.nativeObj.Bitmap 把图片放在显示层 里面 加上 事件监听var w = plus.webview.create(url, 'pay', {}, data);let bitmap_menu = new plus.nativeObj.Bitmap("closedmenu");//图片对应的base64 你也可以直接加载图片bitmap_menu.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAA4CAYAAABuQ6+nAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphYTRlMjlkMC05YWM3LThmNDQtYWI4Yi1iYmNlNzIxNmRiZjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTQwNzk3RDk1NTFFMTFFOThFN0NBOUY2MDY2OTQxQkYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTQwNzk3RDg1NTFFMTFFOThFN0NBOUY2MDY2OTQxQkYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjExQTg5NzYzQjRDMTFFOTkzNkJDQjJCOEEzNTI5MDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjExQTg5NzczQjRDMTFFOTkzNkJDQjJCOEEzNTI5MDMiLz4gPC9yZGY6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")//屏蔽 titleNVieww.setStyle({'zindex': 30,'titleNView': false,})let leftPos = (window.screen.width - 80) + 'px';//设置显示区域大小var view = new plus.nativeObj.View('webViewClose', {top: '40px',left: leftPos,width: "57px",height: "39px"});view.drawBitmap(bitmap_menu, {top: "0",left: "0",width: "82px",height: "56px"})view.interceptTouchEvent(true);view.addEventListener("click", function(e) {w.close()view.close()plus.navigator.setFullscreen(false);}.bind(this));//屏蔽掉 物理按键w.evalJS("plus.key.addEventListener('backbutton',function () {})");w.show(); // 显示窗口view.show();
.cn/question/28981
/tutorials/info_192.html
4月29 优化
在生产 环境 中 发现 部分 iphone mx 等等长屏幕 会出现 顶端 和 底部 有白边的情况 好像是说什么安全区域
对应 我的代码 加上 { contentAdjust:false }
.cn/article/35386