mui:接口的使用

简介: 本文介绍了HTML5及其扩展HTML5+的基本概念,以及在移动应用开发中常用的mui框架中的plusReady事件与ready事件的区别。plusReady事件确保了HTML5+ API在页面加载完成后可被调用,适用于需要调用原生功能的应用场景。文中还提供了GET和POST请求的示例代码,展示了如何使用mui.ajax方法进行数据交互。

概念

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);
    }
});






相关文章
|
JSON 数据格式
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
layui富文本编辑器文档layedit组件的调用和图片上传接口的使用
443 0
|
2月前
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
Elementplus如何在input中添加icons,表单中添加icon
Elementplus如何在input中添加icons,表单中添加icon
|
小程序
微信小程序 - 自定义组件支持外部class或者style样式 (Component - externalClasses)
微信小程序 - 自定义组件支持外部class或者style样式 (Component - externalClasses)
835 0
微信小程序 - 自定义组件支持外部class或者style样式 (Component - externalClasses)
|
JavaScript
elementUI封装 el-dialog
elementUI封装 el-dialog
elementUI封装 el-dialog
|
JavaScript 前端开发
mui 日期控件的用法
mui 日期控件的用法
178 0
|
小程序 前端开发 容器
【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)
【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)
227 0
|
JavaScript 前端开发 API
Mui常用的方法
Mui常用的方法
Mui常用的方法
【MUI】HBuilder class="mui-switch"开关监听
【MUI】HBuilder class="mui-switch"开关监听
197 0
【MUI】HBuilder class="mui-switch"开关监听