HBuilder实现WebApp,总结MUI使用过程中的坑和方法

MUI尝过的坑和重要知识点总结

1：自带的各种标签的样式权重过高，重写不方便（和BootStrap比较来说，BootStrap更加灵活）
2：链接跳转。常规的a标签加href是无法跳转的，浏览器有效，但是在手机上运行是无效的
需要添加mui的定义的点击事件。
分两种
(1)：页面已存在的跳转标签

   <script>
            document.getElementById('user-guide').addEventListener('tap', function() {
                //打开关于页面
                var newsid=$(this).find(".news-id").html();
                mui.openWindow({
                    url: 'use-guide.html',
                    id: 'use-guide'
                });
            });
        </script>

(2):页面不存在的跳转标签（还可以在链接跳转过程中添加传递的参数）

<script>
            mui("body").on('tap',"#detail-news", function() {
                //打开关于页面
                var newsid=$(this).find(".news-id").html();
                console.log("newsid");
                mui.openWindow({
                    url: 'detail-news.html?'+newsid,
                    id: 'detail-news'
                });
            });
        </script>

接受页面的处理：

var newsid = window.location.href.split('?')[1];

3：页面过长，滑动没有效果
关键类：mui-scroll-wrapper
添加一个js就可以实现页面滑动

mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

4：第三方分享实现

在HBuilder中新创建新webapp项目勾选带登陆和设置的模板

里面包含
第三方登陆
分享
图案锁屏
5：关于模态框
模态框尽量放在根节点的子目录下（不要放在嵌套层），防止最外层的遮罩层的级别过高，覆盖模态框，导致点击事件无法触发响应
6:MUI修改手机物理back的方法
首页的退出修改：

<script> 
             document.addEventListener("plusready", function() { 
                 // 注册返回按键事件 
                 plus.key.addEventListener('backbutton', function() { 
                 // 事件处理 
                     plus.nativeUI.confirm("退出程序？", function(event) { 
                         if (event.index) { 
                             plus.runtime.quit(); 
                         } 
                     }, null, ["取消", "确定"]); 
                 }, false); 
             }); 
         </script> 

         //方法二
         <script>
            var back_first = null;
            mui.back = function() {
                if(!back_first) {
                    back_first = new Date().getTime();
                    mui.toast('再按一次退出应用');
                    setTimeout(function() {
                        back_first = null;
                    }, 2000);
                } else {
                    if(new Date().getTime() - back_first < 2000) {
                        plus.runtime.quit();
                    }
                }
                return false;
            }
        </script>

首页进入子页面后返回上一层的返回按钮注册

 <script> 
         document.addEventListener("plusready", function() { 
             // 注册返回按键事件 
             plus.key.addEventListener('backbutton', function() { 
                 // 事件处理 
                 window.history.back(); 
             }, false); 
         }); 
     </script>

屏蔽返回按钮

            var old_back = mui.back;
            mui.back = function(){
                return false;
            }

7:实现原生APP里的进入导航实现，还可以，对进入的次数做监听
首次进入显示导航，以后进入都不需要导航
首页需要添加的事件

        // 设置启动时的轮播页
    function launchScreen() {
        //读取本地存储，检查是否为首次启动
        var showGuide = plus.storage.getItem("lauchFlag");

//      if(showGuide){ 
//          //有值，说明已经显示过了，无需显示；
//          //关闭splash页面；
//          plus.navigator.closeSplashscreen();
//          plus.navigator.setFullscreen(false);
//      }else{
//          //显示启动导航
//          mui.openWindow({
//              id:'guide',
//              url:'guide.html',
//              show:{
//                  aniShow:'none'
//              },
//              waiting:{
//                  autoShow:false
//              }
//          });
//      }
//测试期间，为了让导航页每次显示，就不做以上判断
//显示启动导航
            mui.openWindow({
                id:'guide',
                url:'guide.html',
                show:{
                    aniShow:'none'
                },
                waiting:{
                    autoShow:false
                }
            });
    }
        </script>

调用方法


<script type="text/javascript">
//只要是MUI都会有初始化的过程
            mui.init()
             //创建子页面 初始化导航
            mui.plusReady(function() {
                launchScreen();
            });
        </script>

guide.html页面的实现

<body>
        <div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
            <div class="mui-slider-group">

                <!-- 第1张 -->
                <div class="mui-slider-item">
                    <img src="img/leader1.jpg">
                </div>
                <!-- 第2张 -->
                <div class="mui-slider-item">
                    <img src="img/leader2.jpg">
                </div>
                <!-- 第3张 -->
                <div class="mui-slider-item">
                    <img src="img/leader3.jpg">
                    <button id='close' class="mui-btn mui-btn-warning mui-btn-outlined"></button>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
        <script type="text/javascript" src="js/mui.min.js" ></script>
        <script>
            mui.back = function() {};
            mui.plusReady(function() {
                plus.navigator.setFullscreen(true);
                plus.navigator.closeSplashscreen();
            });
            //立即体验按钮点击事件
            document.getElementById("close").addEventListener('tap', function(event) {
                plus.storage.setItem("lauchFlag", "true"); 
                plus.navigator.setFullscreen(false);
                plus.webview.currentWebview().close();
            }, false);


        </script>
    </body>

HBuilder实现WebApp,总结MUI使用过程中的坑和方法

猜你喜欢