webAPP踩坑记录

   最近公司突然给我们下了一个任务  一个星期要做出一个系统网站 外加手机app   2个同事负责 web开发  我负责手机app 的开发

   今天终于初级版本做完了，记录一下手机app踩过的坑与优化之路

  用到技术 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="#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>

快捷键 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>

//选项卡页面对象
        var barItemArray = [{
                id: 'material',
                name: '材料',
                url: '../../water/material/index.html',
                tips: 0,
                icon: 'icon-cailiao',
                iconActive:'icon-cailiaoActive'
            },
            {
                id: 'parts',
                name: '部件',
                url: '../../water/parts/index.html',
                tips: 0,
                icon: 'icon-bujian',
                iconActive:'icon-bujianActive'
            },
            {
                id: 'production',
                name: '生产作业',
                url: '../../water/production/index.html',
                tips: 0,
                icon: 'icon-zuoye',
                iconActive:'icon-zuoyeActive'
            },
            {
                id: 'inspection',
                name: '检验',
                url: '../../water/inspection/index.html',
                tips: 0,
                icon: 'icon-jianyan',
                iconActive:'icon-jianyanActive'
            }
        ];

_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 也有差异

　

if(mui.os.android) { //如果是安卓 下拉刷新
   _selfView.setPullToRefresh({
   support: true,
   height: '50px',
   range: '100px',
   style: 'circle',
   offset: '1px'
   }, loadDownData);
}
if(mui.os.android) { //如果是安卓
      //结束刷新
      _selfView.endPullToRefresh();
}