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






相关文章
|
移动开发 Android开发 iOS开发
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
3091 0
|
前端开发 Linux 开发工具
手把手提高开发体验:dev-container
手把手提高开发体验:dev-container
1505 0
手把手提高开发体验:dev-container
|
存储 监控 安全
ONVIF协议介绍
ONVIF协议介绍
7875 0
|
机器学习/深度学习 人工智能 自然语言处理
VideoWorld:字节开源自回归视频生成模型,支持输入视频指导AI生成视频!弥补文本生成视频的短板
VideoWorld 是由字节跳动、北京交通大学和中国科学技术大学联合推出的自回归视频生成模型,能够从未标注的视频数据中学习复杂知识,支持长期推理和规划任务。
1368 8
VideoWorld:字节开源自回归视频生成模型,支持输入视频指导AI生成视频!弥补文本生成视频的短板
|
Web App开发 移动开发 JavaScript
探索浏览器内核:理解网络世界的幕后英雄
探索浏览器内核:理解网络世界的幕后英雄
|
机器学习/深度学习 存储 自然语言处理
深度学习之多轮对话系统
基于深度学习的多轮对话系统是一种能够在多轮对话中保持上下文连贯并生成自然回复的系统,主要用于客服、智能助理等需要交互式交流的场景。通过深度学习的技术,特别是自然语言处理中的预训练模型和序列生成模型,这类系统已在准确理解、生成自然语言的质量上取得显著进展。
1238 2
|
搜索推荐 Java 数据库
Java中的ElasticSearch集成与实践
Java中的ElasticSearch集成与实践
|
存储 算法 Java
Java性能优化(三):Java基础-HashMap的设计与优化
HashMap核心特性数据结构:HashMap采用哈希表数据结构来存储键值对,利用哈希函数和哈希表快速定位元素位置,提供高效的键值对查询。参数设置初始容量:HashMap允许用户根据使用场景设定初始容量,以优化性能。在预知数据量时,可以通过计算(初始容量=预知数据量/加载因子)来设定合适的初始容量,以减少扩容操作,提高效率。加载因子:加载因子定义了哈希表何时进行扩容的阈值。加载因子较小时,哈希表会更早地进行扩容,减少哈希冲突;加载因子较大时,会提高内存利用率但可能增加哈希冲突。
760 2
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
2730 0
|
缓存 负载均衡 JavaScript
vue3中正向代理与反向代理
vue3中正向代理与反向代理
398 1

热门文章

最新文章