webAPP踩坑记录

Posted 2020-10-18

   最近公司突然给我们下了一个任务  一个星期要做出一个系统网站 外加手机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>

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 //选项卡页面对象
 2         var barItemArray = [{
 3                 id: ‘material‘,
 4                 name: ‘材料‘,
 5                 url: ‘../../water/material/index.html‘,
 6                 tips: 0,
 7                 icon: ‘icon-cailiao‘,
 8                 iconActive:‘icon-cailiaoActive‘
 9             },
10             {
11                 id: ‘parts‘,
12                 name: ‘部件‘,
13                 url: ‘../../water/parts/index.html‘,
14                 tips: 0,
15                 icon: ‘icon-bujian‘,
16                 iconActive:‘icon-bujianActive‘
17             },
18             {
19                 id: ‘production‘,
20                 name: ‘生产作业‘,
21                 url: ‘../../water/production/index.html‘,
22                 tips: 0,
23                 icon: ‘icon-zuoye‘,
24                 iconActive:‘icon-zuoyeActive‘
25             },
26             {
27                 id: ‘inspection‘,
28                 name: ‘检验‘,
29                 url: ‘../../water/inspection/index.html‘,
30                 tips: 0,
31                 icon: ‘icon-jianyan‘,
32                 iconActive:‘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({
 3    support: true,
 4    height: ‘50px‘,
 5    range: ‘100px‘,
 6    style: ‘circle‘,
 7    offset: ‘1px‘
 8    }, loadDownData);
 9 }
10 if(mui.os.android) { //如果是安卓
11       //结束刷新
12       _selfView.endPullToRefresh();
13 }