一、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和还待优化的问题