vue plus.webview 实现 类似微信右上角 关闭小程序
2024-06-15 08:14:45
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();http://ask.dcloud.net.cn/question/28981
http://www.hcoder.net/tutorials/info_192.html
2019年 4月29 优化
在生产 环境 中 发现 部分 iphone mx 等等长屏幕 会出现 顶端 和 底部 有白边的情况 好像是说什么安全区域
对应 我的代码 加上 { contentAdjust:false }
http://ask.dcloud.net.cn/article/35386
vue plus.webview 实现 类似微信右上角 关闭小程序相关推荐
- 我用Flutter开发了一个类似微信可运行小程序的App
Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面和嵌入式平台.国内很多开发者都将Flutter.Taro.React ...
- 微信小程序web-view环境下H5跳转小程序页面方法
web-view页面内的H5页面跳转至小程序页面 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰 ...
- Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下 前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
- 微信小程序开发（一）系统对接微信UGC类小程序内容安全接口JAVA版
系统对接内容安全接口JAVA版 文章目录 系统对接内容安全接口JAVA版 前言 一.微信中UGC类小程序是什么? 二.微信内容安全接口是什么? 三.微信内容安全接口能干什么? 四.微信内容安全接口怎么 ...
- 微信：禁用小程序跳转 App；华为商城上架 PlayStation 5；币安涉及洗钱被美监管调查
8 部门联合约谈滴滴.首汽等 10 家交通运输平台企业 腾讯 To B 业务架构再升级,原 360 高管李强加入 搜狐第一季度营收 2.22 亿美元,同比增长 24% 8 部门联合约谈滴滴.首汽等 1 ...
- .NET Core 微信公众号小程序6种获取UnionID方法，你知道哪几种？
前言 获取UnionID是开发微信公众号/小程序中很有必要的一个环节,特别是针对一个公司拥有多个公众号小程序而推出的机制,实现打通账户一体化,用UnionID来区分多平台的唯一性. 官方的解释:如果开 ...
- mpvue 微信小程序api_基于mpvue构建微信和支付宝小程序（1）
基于mpvue构建微信和支付宝小程序(1) (1)----- 基础架构篇 why?为啥会有这个系列? 无论是百度和google,关于mpvue构建小程序的项目讲的都是管中窥豹,没有一个系统的讲解. 本 ...
- uni-app的列表搜索框_微信怎么搜索小程序？小程序能有什么用？
微信小程序发布三年多,如今很多人的日常生活已经离不开它.不过新手常常会遇到这样的情况:使用过某个小程序后,找不到它了:想要再次使用,不知道上哪儿去找.所以下面就跟大家科普下如何找到小程序,以及如何搜索 ...
- 微信世界争霸服务器,微信世界争霸小程序进不去游戏怎么办
微信世界争霸小程序进不去游戏怎么办?微信世界争霸小游戏设置相关问题问答攻略,希望对大家有帮助. Q:世界争霸一共有多少个区服,如何查看自己在哪个服呢? A:情况是这样的: 1.目前游戏共有8个服,后续 ...
最新文章
- linux下oracle自动创建实例脚本
- 区块链项目开发：双因素身份验证应用程序如何帮助保护你的加密帐户
- 网管日志－06.07.12
- Jenkins X基本概念：Jenkins K8S helm Draft gitops
- python简单选择排序_python 选择排序
- Mybatis01（结果集封装）
- java程序设计_Java程序设计--接口interface（笔记）
- 群体智能优化算法之烟花算法(Fireworks Algorithm，FWA)
- ftfind 桌面搜索引擎的设计文档 (2)
- java并发包源码分析
- Facebook借足球影响力推广直播：与俱乐部和球星合作分成
- CVTE 2022届实习生 Web后台开发笔试
- 自适应学习系统_如何建立适应性学习系统
- 可视化,市场分析表Excel模板,财务统计EXCEL模版,人员变动EXCEL模版,销量完成度Excel模板
- 深度学习（17）—— 度量学习
- Resid------set
- ***虚拟专用网技术
- 下一个风电”黑马“诞生，数字孪生 3D 智慧风电
- beam mysql_Beam Grapher
- 技术解读｜马云见证！蚂蚁金服推出全球首个区块链跨境汇款服务