概念
html5:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,于2014年发布,之后的浏览器必须遵守这个开发规范实现对html,css,javascript的解释,其中css遵守最新的css3规范,javascript遵守最新的ECMAScript6。
html5+:其实还是html5,只是在html5针对手机开发app时补充了对大量原生功能支持,包括摄像头,wifi,震动,gps等等的软硬件功能,通过js封装调用安卓原生接口使得h5开发app更加的强大,所以称之为html5+(app的开发必须要使用html5+)
mui.plusReady
ready和plusReady的区别:
一个是ready的dom页面,另一个是ready的H5的接口。
在本人(仅限某些功能)的尝试中,在plusReady运行不出来的代码中,却可以ready中运行。原因是这些功能已经被mui封装,在调用mui.init时已经配置过了。注意在页面加载时的时序为:
1. 加载html页面
2. 解析html页面(下载script/link等节点引用的资源,如js/css文件)
3. 触发DOMContentLoaded事件*(该事件完成时,mui.ready将会触发)
4. 注入5+ API
5. 触发plusready事件
即plusReady事件是最后才完成的,故不能一味的使用ready代替plusReady。
mui.plusReady
无论做wap网页,还是app开发,只要需要用到mui框架,都需要mui.init初始化框架功能,而plusready仅仅在app开发中使用
plusReady:对于 HTML5+应用的页面有一个很重要的 “plusready”事件,此事件会在页面加载后自动触发,表示所有 HTML5+ API 可以使用, 在此事件触发之前不能调用 HTML5+ API
接口的使用
get
// 记得 添加 http:// var BASE_URL = "http://192.168.124.100:8080/times-model/activity/app-o" // http://192.168.124.100:8080/times-model/activity/app-o/detail?id=1 function getData(){ mui.ajax(BASE_URL + `/detail?id=1`, { success: function(data) { var result = data.data.sponsor mui.toast(result) }, error: function(){ mui.toast("error") } }); }
http://localhost:8081/student/findStuByName?stuName=youren
function initData(detailId){ request.get(BASE_URL + `/activity/app-o/detail?id=${detailId}`, { success: function(data) { var result = data.data; showData(result); } }); }
<script type="text/javascript"> let BASE_URL='http://localhost:8081/student'; function test(){ let name = document.querySelector(".inputVal") // http://localhost:8081/student/findStuByName?stuName=youren mui.ajax(BASE_URL + `/findStuByName?id=${name}`, { success: function(data) { // var result = data.data; console.log(data) }, error:function(){ new Error("error") } }); } function getInfo(stuName){ request.get(BASE_URL + `/activity/app-o/detail?id=${stuName}`, { success: function(data) { var result = data.data; console.log(result) } }); } </script>
post
mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; headers:{'Content-Type':'application/json'}, success:function(data){ //服务器返回响应,根据响应结果,分析是否登录成功; ... }, error:function(xhr,type,errorThrown){ //异常处理; console.log(type); } });