HBuild+Mui学习笔记（一）：真机运行提示错误总结

最新推荐文章于 2023-12-31 12:41:35 发布

汤圆学Java

最新推荐文章于 2023-12-31 12:41:35 发布

阅读量1.1w

点赞数

分类专栏： # H5+Mui

本文链接：https://blog.csdn.net/jalon2015/article/details/46525353

版权

H5+Mui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、问题出处：http://ask.dcloud.net.cn/question/6571

问题标题：Uncaught TypeError: undefined is not a function at js/mui.min.js:6
真机运行提示上面这个错误，但是程序可以正常运行，是个警告吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">

        mui.init();

        mui.plusReady()
        {
            alert("---");
        }   
        function hh()
        {
            plus.webview.create("http://www.baidu.com").show();
        }
    </script>
</head>
<body>    
<h1>
    <button class="mui-btn mui-btn-primary" οnclick="hh()">Button</button> 
</h1>
</body>
</html>

解决办法：mui.plusReady代码块写错了

mui.plusReady(function(){
//业务代码
});

2、问题出处：http://ask.dcloud.net.cn/question/6581?notification_id-30889__rf-false__item_id-11044#!answer_11044

问题标题：真机运行提示错误：Cannot call method 'addEventListener' of null at index1.html:25

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
//----------- 创建子页面：一个index.html和一个main.html  ---------------
/*
 * mui.init({
    subpages:[{
      url:'main.html',
      id:'main.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px；
        bottom:'0px'//默认为0px，可不定义；
      }
    }]
  });
 */  

 //---------打开新页面-----------------就是这个位置报的错
    document.getElementById('main').addEventListener('tap', function() {
  //打开main.html页面
  mui.openWindow({
    url: 'main.html', 
    id:'main'
  });
});

//------------每次页面重新加载时调用------------
     mui.plusReady(function(){
            console.log(plus.webview.currentWebview().getTitle());
        });

        function clickMe()
        {
            alert(plus.webview.currentWebview().getURL());
        }
    </script>
</head>
<body>    
<h1>
    <button class="mui-btn mui-btn-primary" οnclick="clickMe()">点我</button> 
</h1>
<h2>
    <button class="mui-btn mui-btn-primary" οnclick="location.reload()">刷新</button>
</h2>
<h3>
    <button id="main" class="mui-btn mui-btn-primary">Tap我</button>
</h3>
</body>
</html>

问题原因：这是因为js加载到 document.getElementById('main').addEventListener这行代码时，下方的dom节点尚未生成，故document.getElementById('main')返回为空；

解决办法：
办法一：放入mui.ready中

mui.ready(function(){
    document.getElementById('main').addEventListener('tap', function() {
        //打开main.html页面
        mui.openWindow({
            url: 'main.html', 
            id:'main'
        });
    });
});

办法二：将如上js代码放到</body>节点之后；

3、问题出处：http://ask.dcloud.net.cn/question/4907

问题标题：预加载页面preload方法经常返回undefined

原因：preload方法调用了createWindow方法，createWindow方法里判断了window.plus准备好没，没有准备好直接返回空了，所以造成了undefined

解决办法：所有涉及5+的代码，都要等待plusReady事件发生后才能使用，因此建议使用如下方式：

mui.plusReady(function(){
    var productView = mui.preload({
        url: '/pages/weimall/productview.html',
        id: '/pages/weimall/productview.html',
    });
});