mui+vue.js开发app注意事项

1、plus初始化原理及plus is not defined，mui is not defined 错误汇总

关于plus是哪里来的问题

plus是5+Runtime的内部对象。
就像chrome浏览器里有chrome.开头的一些对象方法，5+runtime内部内置了plus对象。
因为plus和mui不一样，plus是引擎级别的，不需要前端框架。而mui是前端框架，所以是要引入mui.js才能使用的。

不要在没有plus和mui的环境下调用相关API

普通浏览器里没有plus环境，只有HBuilder真机运行、打包后、或流应用环境下才能运行plus api。  
在普通浏览器里运行时plus api时控制台必然会输出plus is not defined错误提示。  
mui作为一个前端框架，你必须保证当前页面引入了mui.js。否则也会出现mui is not defined。

不要在plus和mui未完成初始化时调用相关API

就像在dom初始化完成前(DOMContentLoaded)去操作dom，就会报错是一样的道理。  
plus和mui都需要初始化，在初始化完成后调用再调用。  
一般我们在plusready的回调事件里调用plus api。 mui.plusReady(function(){ // 在这里调用plus api  });

2、安卓开发注意事项

安卓低版本不支持es6语法

安卓低版本不支持es6语法：如箭头函数等，同时不支持循环forEach语法，需修改为for循环。

安卓不支持line-height样式

css设置line-height垂直居中，在安卓手机不起作用。使用flex设置align-items:center

 

3、ios开发注意事项

ios日期转换不支持"2017-04-28 23:59:59"日期格式

new Date("2017-04-28 23:59:59").getTime()；//ios输出NAN new Date("2017/04/28 23:59:59").getTime()；//数据正常计算 可使用正则表达式替换方法："2017-04-28 23:59:59".replace(/\-/g, '/')

4、mui+vue.js开发模式

 

根节点添加v-cloak属性，在公共css中设置[v-cloak]{display:none;}可避免页面上出现{{}}等字符；
dom操作需在$nextTick()方法中调用；
ajax请求在plusReady()方法中调用。

5、关闭软键盘

 

 

document.body.addEventListener('tap', function(e) {  var tagName = e.target.tagName.toLowerCase()  if(tagName == 'input' || tagName == 'textarea') {  if(e.target.readOnly) {  document.activeElement.blur();  return false;  }  } else {  document.activeElement.blur(); //把键盘焦点从当前页面中获得焦点的元素上移走  }  });