webAPP踩坑记录

学向勤中得，萤窗万卷书。这篇文章主要讲述webAPP踩坑记录相关的知识，希望能为你提供帮助。
最近公司突然给我们下了一个任务一个星期要做出一个系统网站外加手机app 2个同事负责 web开发我负责手机app 的开发
今天终于初级版本做完了，记录一下手机app踩过的坑与优化之路
【webAPP踩坑记录】 用到技术 mui+vue.js+webApi
首先是侧滑菜单栏类似于qq侧滑

文章图片

1 < !-- 主界面不动、菜单移动 --> 2< !-- 侧滑导航根容器 --> 3< div class="mui-off-canvas-wrap mui-draggable mui-slide-in"> 4< !-- 菜单容器 --> 5< aside class="mui-off-canvas-left" id="offCanvasSide"> 6< div class="mui-scroll-wrapper"> 7< div class="mui-scroll"> 8< !-- 菜单具体展示内容 --> 9 10< /div> 11< /div> 12< /aside> 13< !-- 主页面容器 --> 14< div class="mui-inner-wrap"> 15< !-- 主页面标题 --> 16< header class="mui-bar mui-bar-nav"> 17< a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="https://www.songbingjia.com/android/#offCanvasSide"> < /a> 18< h1 class="mui-title"> 标题< /h1> 19< /header> 20< nav class="mui-bar mui-bar-tab"> 21< a class="mui-tab-item mui-active"> 22< span class="mui-icon mui-icon-home"> < /span> 23< span class="mui-tab-label"> 首页< /span> 24< /a> 25< a class="mui-tab-item"> 26< span class="mui-icon mui-icon-phone"> < /span> 27< span class="mui-tab-label"> 电话< /span> 28< /a> 29< a class="mui-tab-item"> 30< span class="mui-icon mui-icon-email"> < /span> 31< span class="mui-tab-label"> 邮件< /span> 32< /a> 33< a class="mui-tab-item"> 34< span class="mui-icon mui-icon-gear"> < /span> 35< span class="mui-tab-label"> 设置< /span> 36< /a> 37< /nav> 38< div class="mui-content mui-scroll-wrapper"> 39< div class="mui-scroll"> 40< !-- 主界面具体展示内容 --> 41 42< /div> 43< /div> 44< div class="mui-off-canvas-backdrop"> < /div> 45< /div> 46< /div>

View Code 快捷键 moff
第二个底部菜单 webview模式

文章图片

< !--描述：底部导航--> < nav class="mui-bar mui-bar-tab"> < template v-for="(tab,index) in navTabs"> < a class="mui-tab-item" :class="index==tabIndex?‘mui-active‘:‘‘" @tap="showView(index,tab)"> < span class="mui-icon " :class="index==tabIndex?tab.iconActive:tab.icon"> < /span> < span class="mui-tab-label"> {{tab.name}}< /span> < /a> < /template> < /nav>

View Code

文章图片

1 //选项卡页面对象 2var barItemArray = [{ 3id: ‘material‘, 4name: ‘材料‘, 5url: ‘../../water/material/index.html‘, 6tips: 0, 7icon: ‘icon-cailiao‘, 8iconActive:‘icon-cailiaoActive‘ 9}, 10{ 11id: ‘parts‘, 12name: ‘部件‘, 13url: ‘../../water/parts/index.html‘, 14tips: 0, 15icon: ‘icon-bujian‘, 16iconActive:‘icon-bujianActive‘ 17}, 18{ 19id: ‘production‘, 20name: ‘生产作业‘, 21url: ‘../../water/production/index.html‘, 22tips: 0, 23icon: ‘icon-zuoye‘, 24iconActive:‘icon-zuoyeActive‘ 25}, 26{ 27id: ‘inspection‘, 28name: ‘检验‘, 29url: ‘../../water/inspection/index.html‘, 30tips: 0, 31icon: ‘icon-jianyan‘, 32iconActive:‘icon-jianyanActive‘ 33} 34];

View Code

_selfView = plus.webview.currentWebview() /*设置导航条的高度*/ var style1 = { popGesture: ‘none‘, top: 20, bottom: 0 }; var params = { projectId: _selfView.projectId, projTypeId: _selfView.projTypeId, }_selfView.setStyle(style1); for(var i in barItemArray) { var sub = null; var bar = barItemArray[i]; if(mui.os.ios) { //兼容ios //创建新的webview页面 sub = plus.webview.create(barItemArray[i].url, barItemArray[i].id, style1, params); } else if(mui.os.android) {//兼容android //创建新的webview页面 sub = plus.webview.create(barItemArray[i].url, barItemArray[i].id, { top: ‘44px‘, bottom: ‘65px‘, bounce: ‘vertical‘, }, params); plus.webview.hide(barItemArray[i].id); } if(sub) { _selfView.append(sub); }} //默认显示第一个页面 plus.webview.show(barItemArray[0].id);

下拉刷新 ios 和android 也有差异

1 if(mui.os.android) { //如果是安卓下拉刷新 2_selfView.setPullToRefresh({ 3support: true, 4height: ‘50px‘, 5range: ‘100px‘, 6style: ‘circle‘, 7offset: ‘1px‘ 8}, loadDownData); 9 }
10 if(mui.os.android) { //如果是安卓 11//结束刷新 12_selfView.endPullToRefresh(); 13 }