html5 手机开发框架 - mui开发过程和一些问题

文章标签: mui开发,html5 mui
2017-7-24 15:22:31     人阅读    

一、  url跳转

 

预加载和opendialog 第一种跳转方式,预加载,预加载和直接使用 opendialog相比,他的代码很多,不如后者清晰,但是他的速度很快,没有延迟,而使用open的在打开的时候界面会有反应延迟03~0.5秒左右,相差在客户体验上

 

二、  页面嵌套和webview

 

在使用tab的使用最好使用webview方式集成,如果不使用webview,而是直接一个页面,原生态的很多效果或者js都不执行,问题很多

 

Listview 上拉和下拉效果,如果直接在别的页面嵌套进去,就可能出现

1listview不显示,必须设置高度才能显示,自适应失效

2listview显示,但是有bug,上拉或者下拉不能用,或者不自然

 

三、  页面其他的一些bug

Listview 之类的如果没有设置标题栏,标题栏的地方会空白

 

四、  很多坑

  通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);

五、  Android 真机环境  列表下拉刷新失效的问题

浏览器、模拟器中没有问题,但是在真机中下拉无法触发

如果想使用正常的下拉刷新,必须使用父子界面,也就是一个list弄成2个页面,2个页面都采用webview的方式嵌入

 

并且如果采用父子页面双webview的话,子页面不能有标题,因为子页面下拉刷新的时候刷新动态是在子页面菜单上面展示的,,,,,所以必须是子页面没有标题,父页面才能有标题….

 

还有如果标题上有一些动作(添加、删除) 只能考虑在父页面上

六、   mui下拉刷新 click事件无法响应问题

使用mui的事件监听事件 tap

mui("#refreshContainer").on('tap', '.ulDiv', function (event) {

this.click();

});

 

 

如果下拉列表项中有其他事件:

 

mui("#refreshContainer").on('tap', '.icon-comment', function (event) {

this.click();

event.stopPropagation();//阻止li事件的点击

});

 

  我是这样用的,先在a标签上写上onclick="function_1()",
然后绑定tap事件,在tap事件里面调用click,这样就可以用click
$("#ul_Id").on('tap', 'a', function (event) {
   this.click();
});

 

七、  网页预加载preload功能在很多老版本android手机中不执行的问题

min特有的 预加载功能在老版本手机不能顺利执行,体验会降低

解决方案:通过动态判断手机是否支持 ,如果不支持,则采用其他方式

setInterval 循环中添加次数,如果大于10次不成功则代表不支持(正常的1次就行通过)

出现问题的代码

var mainPage = mui.preload({

                                             "id": 'main',

                                                        "url": 'main.html'

                                         });

                                              

                                               var main_loaded_flag = false;

                                               mainPage.addEventListener("loaded",function () {

                                                        main_loaded_flag = true;

                                               });

       在上面的代码中  mainPage.addEventListener("loaded",function () {

       这个函数没有正常执行,也就是 mui.preload 预加载失败,则下面的跳转就失败了

 

                                               var toMain = function() {

                                                        //使用定时器的原因:

                                                        //可能执行太快,main页面loaded事件尚未触发就执行自定义事件,此时必然会失败

                                                        var id = setInterval(function () {

                                                                 if(main_loaded_flag){

                                                                           clearInterval(id);

                                                                           $.fire(mainPage, 'show', null);

                                                                           mainPage.show("pop-in");

                                                                 }

                                                        },20);

                                               };

                                              

改成如下方式,做手机兼容:

var toMain = function() {

                                                        var id = setInterval(function () {

                                                                 checkPreloadSuccess ++;

                                                                 if(checkPreloadSuccess>10){

                                                                           checkPreloadSuccess=0;

                                                                           console.log('手机不支持  Preload 采用openWindow');

                                                                           mui.openWindow({

                                                                              url: 'main.html',

                                                                              id: "main"

                                                                           });

                                                                           clearInterval(id);

                                                                 }   

                                                                 if(main_loaded_flag){

                                                                           clearInterval(id);

                                                                           $.fire(mainPage, 'show', null);

                                                                           mainPage.show("pop-in");

                                                                 }

                                                        },20);

                                               };

                                              

 

八、  手机定位部分手机有问题

无法获得定位,会提示权限问题

九、   Mui自带的Ajax请求经常出现参数接收不到的情况,建议使用如下ajax请求

 

 

$.ajax({

                                type:"post",

                              url:'http://192.168.3.9:8080/kerun/a/login?__ajax',

                                data:jsondata,

                                async:true,

                                success:function(json){

                                    console.log('result = ' +JSON.stringify(json));

                                    if(json.success)

                                        {

                                            //mui.alert("登陆成功");

                                            console.log('直接跳转到首页');

                                            //直接跳转到首页

                                            toMain();

                                        }else

                                        {

                                            mui.alert(str["msg"]);   

                                        }

                                },

                                error:function(){

                                    console.log('request error');

                                }

                           });

十、   

 


原文地址:http://www.itmmd.com/201707/806.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

  上一篇
下一篇  android学习笔记-Android Test 学习总结
精彩回复
我要追加问题,请求站长解决!
姓名: