今天来吐槽一下我用mui写APP遇到的各种坑

最新推荐文章于 2024-05-12 06:18:50 发布
最新推荐文章于 2024-05-12 06:18:50 发布
阅读量2.7k 收藏 6
点赞数 1
分类专栏： muiAPP与内嵌网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42207547/article/details/89402429
版权

一、mui，首先我们都知道第一步就是打基础框架，于是我的底部框架是这样的

<nav class="mui-bar mui-bar-tab" id="nav">
	 <a class="mui-tab-item mui-active" id="a1">
		 <span class="mui-icon mui-icon-home"></span>
		 <span class="mui-tab-label">首页</span>
	 </a>
	 <a class="mui-tab-item"  id="a2">
		 <span class="mui-icon mui-icon-compose"></span>
		 <span class="mui-tab-label">进度</span>
	 </a>
	 <a class="mui-tab-item" id='a3'>
		 <span class="mui-icon mui-icon-person"></span>
		 <span class="mui-tab-label">代办事项</span>
	 </a>
</nav>

对应框架页面显示的js

       <script type="text/javascript" charset="utf-8">  
            mui.init({  
            	keyEventBind: {
					backbutton: false  //关闭back按键监听
				},
                    subpages:[//先加载首页  
                        {  
                          url:'index02.html',  
                          id:'a1',  
                          styles:{  
                             top:'0px',  
                              bottom:'60px'  
                          }  
                        }  
                          
                    ],  
                    preloadPages:[//缓存其他页面  
                        {  
                          url:'two.html',  
                          id:'a2',  
                          styles:{  
                             top:'0px',  
                            bottom:'60px'  
                          }  
                        },  
                        {  
                          url:'three.html',  
                          id:'a3',  
                          styles:{  
                             top:'0px',  
                            bottom:'60px'  
                          }
                        }
                    ]  
                      
                });  
            mui.plusReady(function(){   
                // 获取所有Webview窗口  
                var winAll=plus.webview.all();//获取所有窗体  
                //console.log(JSON.stringify(winAll))   
                var a1,a2,a3
                mui("#nav").on("tap","#a1",function(){//点击触发   
                    a1=plus.webview.getWebviewById("a1");  
                    console.log(JSON.stringify(a1))   
                    a1.show()  
                    a2.hide()//这一步必须有  
                    a3.hide()//这一步必须有  
                })  
                mui("#nav").on("tap","#a2",function(){//点击触发  
                    a2=plus.webview.getWebviewById("a2");  
                    a2.show()  
                    a1.hide()//这一步必须有  
                    a3.hide()//这一步必须有  
                      
                })  
                mui("#nav").on("tap","#a3",function(){//点击触发  
                	console.log("sads")
                    a3=plus.webview.getWebviewById("a3");  
                    a3.show()  
                    a1.hide()//这一步必须有  
                    a2.hide()//这一步必须有  
                      
                })
            });   
        </script>

二、对应的我默认显示的页面是index02.html页面，由于我的APP是APP内部页面和网页内嵌开发的，因此我的页面也是在不停的在网页上和APP原身页面之间进行跳转的，下面来看一下我的index02.html页面

    <header class="mui-bar mui-bar-nav bgheider" style="height: 50px;background: #fff;">
		<span class="mui-icon mui-icon-bars mui-pull-left" id="upload"></span>
	    <script type="text/javascript">
		    	document.getElementById('upload').addEventListener('tap',function(){
				mui.openWindow({
					url:'plus/upload.html',
					id:'upload',
					
				})
			})
		</script>
		<h1 class="mui-title">Maintenance</h1>
	</header>

对应的js事件

        <script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
       <--这个webviewGroup.js 可以自行创建APP模板在js中找到的，复制粘贴就好了-->
		<script>
			mui.init({
				keyEventBind: {
					backbutton: true  //关闭back按键监听
				}
			});
			
			mui.plusReady(function() {
				var _self = plus.webview.currentWebview();
				var group = new webviewGroup(_self.id, {
					items: [{
						id: "tab-top-subpage-1.html",
						url: "plus/home.html",
						extras: {}
					}]
				});
                //对于webviewGroup打开页面这个方法相同的也可以用subpages的方法去打开
				
			});
		</script>

这样我的显示页面就直接是index02.html页面了，index02.html页面里显示的内容则是home页里的内容

三、因为我的home页是获取网页上的home页，所以就直接用了subpages的方法打开了在线网页上的home页，因此我们直接来看网页端home页的跳转方法

<div class="item_bts" v-for="bts in item.list" :class="'item_size_' + bts.size" :style="'background-color:' + bts.color" :id="'file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/plus/'+bts.type+'.html'" onclick="clicked(this.id)"></div>

1、通过给标签一个id，直接点击跳转页面，跳转回APP原生页面，APP原生页面地址的获取可以采用

plus.webview.currentWebview().parent().getURL()

的方法进行获取

<div id="url" onclick="clicked(this.url)"></div>其中的url是你要跳转的地址

2、可以通过直接跳指定路径的方式进行跳转

v-on:click="window.location.href = bts.url"或
v-on:click="openView(bts.url,bts.type)"
对应的openView事件js如下
openView:function(url,type){
	mui.openWindow({
		url:"网页ip地址/123APP/plus/"+type+".html",
		id:type,
		style:{
		    top:0,
		    bottom:0
		}
	})
}
跳转地址为你的  网页ip地址/APP名/跳转页面相对APP的路径

以上第三部分为APP外部网页下面开始划重点来搞笑的了，哪位网友有更好的解决方法请留言

四、对于APP内页面物理回退按键点击在线网页直接关闭的解决方案没找到解决办法的我，在网上寻寻觅觅找到论文一个合适APP的写法，既然页面回退会直接关闭，那我直接在一开始操作页面的时候就给新创一个页面，这样物理回退键得作用就不在我一开始默认打开的页面上作祟了，而是直接关闭我当前打开的页面，so我现在打开的新页面都是一个模板

<header id="header" style="background: #fff;height: 50px;">
	<div class="nvbt iback" onclick="back()"></div>
	<h1 class="mui-title">页面标题</h1>
</header>
<script type="text/javascript">
	mui.init({
		subpages:[{
			url:"在线网页地址",//子页面HTML地址，支持本地地址和网络地址
			id:home页传下来的type,//子页面标志
			styles:{
				top:"50px",//子页面顶部位置
				 bottom:0,//子页面底部位置
			 },
			extras:{}//额外扩展参数
		}]
	})
</script>

其中的页面头部的回退按钮事件

      <script type="text/javascript">
			// 预创建二级页面
			var preate={};
			function preateWebivew(id){
				if(!preate[id]){
					var w=plus.webview.create(id,id,{scrollIndicator:'none',scalable:false,popGesture:'hide'},{preate:true});
					preate[id]=w;
					w.addEventListener('close',function(){//页面关闭后可再次打开
						_openw=null;
						preate[id]&&(preate[id]=null);//兼容窗口的关闭
					},false);
				}
			}
			// 判断预载打开
			var _openw=null;
			function pclicked(id){
				if(_openw){return;}
				_openw=preate[id];
				if(_openw){
					if(_openw.showded){
						_openw.show('auto');
					}else{
						_openw.show(as);
						_openw.showded=true;
					}
					_openw=null;
				}else{
					_openw=plus.webview.create(id,id,{scrollIndicator:'none',scalable:false,popGesture:'hide'});
					preate[id]=_openw;
					_openw.addEventListener('loaded',function(){//叶面加载完成后才显示
			//			setTimeout(function(){
						_openw.show(as);
						_openw.showded=true;
						_openw=null;
			//			},10);
					},false);
					_openw.addEventListener('close',function(){//页面关闭后可再次打开
						_openw=null;
						preate[id]&&(preate[id]=null);//兼容窗口的关闭
					},false);
				}
			}
			// H5 plus事件处理
			var as='pop-in';// 默认动画类型
			function plusReady(){}
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener('plusready',plusReady,false);
			}
			// 创建悬浮窗口
			var floatw=null;
			function floatWebview(){
				if(floatw){ // 避免快速多次点击创建多个窗口
					return;
				}
				floatw=plus.webview.create("webview_float.html","webview_float.html",{width:'200px',height:'200px',margin:"auto",background:"rgba(0,0,0,0.8)",scrollIndicator:'none',scalable:false,popGesture:'none'});
				floatw.addEventListener("loaded",function(){
					floatw.show('fade-in',300);
					floatw=null;
				},false);
			}
			// 创建自定义下拉刷新窗口
			function customeRefresh(){
				if(plus.os.name!="Android"){
					 compatibleConfirm();
				}else{
					clicked('webview_pullhead_custom.html',true,true);
				}
			}
		</script>

对于这段代码表示我一直也很懵，一开始的时候点击头部的回退按钮是很顺畅的关闭当前页，返回上一页，把APP的框架改成有底部导航栏后就不好用了，直接点了没反应，还在找原因。

五、对于扫码打开新页面之后点击物理返回键回退到扫描控件页面的处理简单粗暴，直接在扫描成功事件里加一个延时关闭扫描页的方法就可以了

setTimeout(function(){
	plus.webview.currentWebview().close("none")
},500)

针对不同的扫描性能，记得修改你的延时时间

在plus.webview.currentWebview().close()的close里添加none则是为了关闭事件执行的时候扫描页面会闪现出来的问题

对于扫描控件，mui中有原生的扫描控件，在控件的scan = new plus.barcode.Barcode()中加入'bcid',filter,styles性能会更好哦

具体代码如下

<script type="text/javascript">
			mui.init()
			var ws=null,wo=null;
			var scan=null,domready=false;
			// H5 plus事件处理
			mui.plusReady(function(){
				startRecognize();
				//打开关闭闪光灯处理
				var flag = false;
				document.getElementById("turnTheLight").addEventListener('tap',function(){
				   if(flag == false){
				      scan.setFlash(true);
				      flag = true;
				   }else{
				     scan.setFlash(false);
				     flag = false;
				   }
				});
		    })
			//自定义控件
			function startRecognize(){
			    try{
				    var filter;
				    //自定义的扫描控件样式
				    var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}
					//扫描控件构造
					scan = new plus.barcode.Barcode('bcid',filter,styles);
					scan.onmarked = onmarked; 
					scan.onerror = onerror;
					scan.start({conserve:true,filename:'_doc/barcode/'});
					//打开关闭闪光灯处理
					var flag = false;
					document.getElementById("turnTheLight").addEventListener('tap',function(){
					   if(flag == false){
					      scan.setFlash(true);
					      flag = true;
					   }else{
					     scan.setFlash(false);
					     flag = false;
					   }
					});
			    }catch(e){
				    alert("出现错误啦:\n"+e);
			    }
			};
			// 二维码扫描成功
			function onmarked(type, result, file){
				console.log(type, result, file)
			    switch(type){
			    	case plus.barcode.QR:
			    	type = 'QR';
			    	break;
			    	case plus.barcode.EAN13:
			    	type = 'EAN13';
			    	break;
			    	case plus.barcode.EAN8:
			    	type = 'EAN8';
			    	break;
//			    	default:
//			    	type = '其它'+type;
//			    	break;
			    }
			    result = result.replace(/\r\n/g, '');
		        
		    	mui.openWindow({
					url:"扫描结果的url",
					id:result,
					style:{
						top:0,
						bottom:0
					}
				})
			    setTimeout(function(){
			    	plus.webview.currentWebview().close("none")
			    },500)
			}
			// 从相册中选择二维码图片 
			function scanPicture(){
			    plus.gallery.pick(function(path){
				    plus.barcode.scan(path,onmarked,function(error){
						plus.nativeUI.alert('无法识别此图片');
					});
			    }, function(err){
			        console.log('Failed: '+err.message);
			    });
			}
		</script>

html如下

   <body style="background-color: #000000;">
		<div id="bcid">
			<div style="height:40%"></div>
			<p class="tip">...载入中...</p>
		</div>
		<footer>
			<div class="fbt" onclick="scanPicture()">
            	相册选择
            </div>
            <div class="fbt" id="turnTheLight" onclick="light()">
            	闪光灯
            </div>
			
		</footer>
	</body>

以上就是我最近几天遇到的bug和还待优化的问题

绯红渔薪
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue仿饿了么美团，引入mui，解决mui无效问题，实现首页轮播
weixin_44012931的博客
07-17 539
首先上一张引用成功后的图片 在引入mui的过程中，真的出现了不少的问题 引入成功，不报错，滑动仍然无效？ 引入不成功？ 报错？Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects...
MUI一些心得
qq_35181466的博客
04-27 909
//---------------关闭等待框，一般用于发ajax获取到数据后，但还一直显示正在加载的时候使用，放在最末尾----------------- plus.nativeUI.closeWaiting(); //---------------------------------------微信分享例子，文字复制粘贴-----------------------------------...
移动开发最新跨平台移动APP开发进阶(一)：mui开发注意事项_mui移动开发(1)，2024年最新腾讯安卓面试
最新发布
2401_84545497的博客
05-12 583
感觉现在好多人都在说什么安卓快凉了，工作越来越难找了。又是说什么程序员中年危机啥的，为啥我这年近30的老农根本没有这种感觉，反倒觉得那些贩卖焦虑的都是瞎j8扯谈。当然，职业危机意识确实是要有的，但根本没到那种草木皆兵的地步好吗？Android凉了都是弱者的借口和说辞。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。
记一次 MUI 诡异的请求失败
galoiszhou的博客
12-17 335
一个同事用 MUI 做了一个APP, 一切顺利的上线了. Android, IOS系统都没问题. 但是有一个用户反馈他的 IPAD 登录不了, 账号密码没有问题. 但是又不知道到底返回了什么错误, 只能从日志分析. 发现以下现象: 服务端的程序没有收到请求 Nginx 只有 http method 是 OPTIONS 请求,但是没有对应的 POST 请求 这就非常的像跨域的问题, 但是已经打包...
MUI 设置APP状态栏
discuzmall的博客
08-06 2622
一、 前言 　　状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。 　　图例： 二、状态栏状态类型 默认 变色（设置颜色） 透明（沉浸式） 消失（全屏） 三、状态栏变色 　　1.效果如图： 　　2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色） ...
mui的坑-个人建议不要用mui任何东西
xiongxiaolin123的博客
03-26 1980
千万不要用弹出窗一类的api，ios有问题
使用MUI框架构建App请求http接口实例代码
08-28
本文主要介绍了使用MUI框架构建App请求http接口实例代码，着重讲解了MUI框架的优点和使用方法，并提供了一个简单的Java Servlet项目来演示如何创建http接口。 MUI框架是Dcloud公司开发的一款跨平台框架，能够快速...
MUI 漫画APP.zip
11-04
简单的编写的漫画app
HTML5+MUI实现手机app扫码功能
03-31
HTML5+MUI实现手机app扫码功能
Hbuilder MUI login APP
09-23
Hbuilder +MUI +HTM>5 login 功能,包含详细的实现代码.
Mui App 电子商务源码
09-01
一款不错的Mui 做的电子商务程序，初期学习可以参考。 一款不错的Mui 做的电子商务程序，初期学习可以参考。
移动应用日记APP--MUI，有点烂。哈哈~~~~
08-07
这是移动应用的简单APP--日记。就写了几个界面，用的是MUI框架。
细数mui框架走过的坑
专注写bug
06-21 4793
一、mui.alert()、mui.confirm()等弹窗系列mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框两者区别:1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式这是mui开发文档ui部分中对dialog的一句描述，其实不难理解，在离线打包app后，如果你使用mui.a...
MUI 非常严重的注意事项
LingMax的博客
03-02 4517
2018年03月02日 15:39:23持续更新mui 自带组件 自带函数用得是不亦乐乎可是做h5网页时   经常遇到  加载错误   第一iframe 页面的  offsetWidth 失效解决方法1  用screen.width  替换 2  window.onresize 监听窗口变化,变大了就是成功获取到了宽度3 setTimeout   等到什么都处理完了 再获取  最差的办法=====...
mui常用方法
真是6的不行的博客
05-26 1284
准备函数 //Mui准备函数 mui.ready(function(){ //执行方法体 }); //Html5+准备函数 mui.plusReady(function(){ //执行方法体 }) 重写mui和doncument <div id="a">点我</div> //这四种点击方法效果相同 (function($, doc){ /*mui("body"...
基于MUI框架的HTML5+的二维码扫描实现
moyan的博客
07-25 3322
Barcode的一个实现案例 一、简介         Barcode模块管理条码扫描，提供常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。 二、实现的效果 三、实现 代码 [html] view plain copy
hbuilder html id,Hbuilder常用功能汇总(示例代码)
weixin_42514288的博客
06-18 4073
引用样式表: mui.min.cssJs：mui.min.js常用功能获取页面var webView=plus.webview.currentWebview();//获取当前页var webView=plus.webview.currentWebview().opener();//获取上一页的页面var webView= plus.webview.currentWebview().parent()...
vue.js提示Vue is not a constructor或Vue.createApp is not a function解决方法
热门推荐
Charlesix59的博客
07-16 2万+
今天尝试写点Vue玩，写着写着，写到一个列表渲染，我写了一个长得像这样的语句 Vue.createApp(data).mount('#id') 结果没有出现预期的结果，于是我打开浏览器，F12，它提示我 Vue.createApp is not a function 怪了呀，这和官方文档写的一样，怎么可能错呢？ 于是我经过反复求证，引入了一个官方的CDN，这下好了，createApp是正常了，出现了一个新的错误，我写过一个这样的语句 var vm = new Vue 打开浏览器F12，它提示我： Vue
导航栏顶部悬停的两种方法
tianxiangd的专栏
01-19 5152
一，引用jquery实现。 $(function () { if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { var handler, sTop, dTop; dTop =
用mui写一个炫酷的自适应首页
03-28
但我可以为您提供一些关于自适应页面设计和mui框架的建议： 1.自适应设计是必须的，因为屏幕大小和分辨率都有很大的差异。您可以使用CSS媒体查询来实现自适应布局。例如，使用@media查询根据不同的屏幕宽度和高度来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值