一 常见问题

1 DOM结构

关于mui页面的dom，你需要知道如下规则。

1-1.固定栏靠前

-1 所谓的固定栏，也就是带有 .mui-bar 属性的节点，都是基于fixed定位的元素；

-2 常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;

-3 这些元素使用时需遵循一个规则：放在 .mui-content 元素之前，即使是底部工具条和底部选项卡，也要放在 .mui-content 之前，否则固定栏会遮挡住部分主体内容（.mui-content容器内容）。

1-2.一切内容都要包裹在mui-content中

除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮挡。

原因：固定栏基于fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮挡，mui为了解决这个问题，定义了如下css代码：

  1. .mui-bar-nav ~ .mui-content {
  2.     padding-top: 44px;
  3. }
  4. .mui-bar-footer ~ .mui-content {
  5.     padding-bottom: 44px;
  6. }
  7. .mui-bar-tab ~ .mui-content {
  8.     padding-bottom: 50px;
  9. }

你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。

2 页面元素

2-1.始终为button按钮添加type属性

若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

3 窗口管理

3-1.页面初始化：必须执行mui.init方法

mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法。

3-2.页面跳转：抛弃href跳转

当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用mui.openWindow方法打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面。

注意：此条针对调用5+App有效，一般的wap页面中调用webview无效。

4 事件管理

4-1.页面关闭：勿重复监听backbutton

mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写 mui.back 方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行。

比如监听返回事件，若仅使用addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。

4-2.手势操作

点击：忘记click

快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：

  1. element.addEventListener('tap',function(){
  2.     //点击响应逻辑
  3. });

二 常见错误

1 执行环境类错误

1-1.Uncaught ReferenceError: plus is not defined

-1 在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，否则可能会报”plus is not defined”的错误 问题来源↓ ；
-2 mui为简化开发，将plusReady事件封装成了mui.plusReady()方法，凡涉及到HTML5+的api，建议都写在mui.plusReady方法中；
-3 在常规wap网页开发中，无法调用5+扩展api，所以无法使用plus相关的操作。

1-2.href标签的url不跳转

引入mui框架的wap网页中标签的href会被直接屏蔽掉问题来源↓ 。
如果一定要使用href方式跳转，可以引入以下一段JS代码：

  1. mui.init();
  2. window.onload=function(){
  3.      var els=$("a");
  4.      for(var i=0;i<els.length;i++){
  5.         els[i].addEventListener('tap',function(){
  6.               openCustURL(this.getAttribute('href'));
  7.         })
  8.      }
  9. }
  11. function openCustURL(vurl){
  12.       mui.openWindow({
  13.             url:vurl,
  14.             show:{
  15.                    autoShow:true,
  16.                    aniShow:'slide-in-right',
  17.                    duration:400
  18.             },
  19.             waiting:{
  20.                    autoShow:false,
  21.                    title:'正在加载...'
  22.             }
  23.       })
  24. }

1-3.弹出框触发一次，弹出N多次

一定要注意，不要多次引用或者。
否则会造成如果有弹出框，你重复引用多少次弹出框就会弹出多少次 问题来源↓ 。

1-4.picker选择器弹出不正常

扩展组件poppicker依赖 mui.picker.js/.css mui.poppicker.js/.css 请务必在 mui.js/css 后中引用,也可统一引用压缩版本 mui.picker.min.js 问题来源↓

重要：扩展组件的__引用一定要在引用mui.js/css之后，不然在运行的时候根本就执行不了组件初始化。

1-5.gulp压缩后Cannot set property ‘innerHTML’ of undefined

若有些代码写法不够规范，使用gulp等工具对代码进行压缩后，浏览器解释会出现问题（遇到：浏览器不解释以下内容，F12查看，div内部只有 <h4> 正常显示出来了），因此在通过js赋值innerHTML时，找不到对应的容器，报错。

错误案例示范代码：

  1. //错误案例示范
  2. <div class="read-title-datail bgwhite">
  3.     <h4 class="bookname"></h4>
  4.     <p>
  5.         <span class="bookauthor">爱看作者</span>
  6.         <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined state">连载中</button>
  7.         <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined categoryname">古代言情</button>
  8.     </p>
  9.     <p class="bookWords"><span class="words"></span>&nbsp;<span class="price">0.06元/千字</span></p>
  10. </div>

修改后代码：

  1. //修改后代码
  2. <div class="read-title-datail bgwhite">
  3.     <div class="bookname"></div>
  4.     <div>
  5.         <span class="bookauthor">爱看作者</span>
  6.         <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined state">连载中</button>
  7.         <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined categoryname">古代言情</button>
  8.     </div>
  9.     <div class="bookWords"><span class="words"></span>&nbsp;<span class="price">0.06元/千字</div>
  10. </div>

2 真机调试类错误

2-1.真机调试时ajax请求不到数据

  1. error: function(xhr, type, errorThrown) {  
  2.     //异常处理  
  3.     console.log(type);  
  4.     console.log(xhr);  
  5.     console.log(errorThrown);  
  6. }

在浏览中输入请求网址可以获取到数据，但是真机调试console.log(type);打印为abort 问题来源

解决思路：
-1 请求地址不要用本地的127.0.0.1，改为本机的ip(比如：192.168.1.60)
-2 手机务必连接电脑的同一个WIFI，并保证连接成功且网络状况良好（网络状况不好的情况也会请求失败）

参考文章

MUI框架入门 MUI遇到的问题汇总 mui框架使用的过程中遇到的几个问题 MUI中的疑难杂症