apicloud apicloud

注册
查看: 4958|回复: 10

[新手教程] ApiCloud 开发经验汇总 (2014-12-4 更新)

主题:
50
帖子:
190
云币:
501

[新手教程] ApiCloud 开发经验汇总 (2014-12-4 更新)

4958 10 | 发表于 2014-11-18 00:05:15 |阅读模式 | |
本帖最后由 毛腿 于 2014-12-4 00:45 编辑

各种莫名的问题 并非官方bug造成,各种环境因素决定了难以预料的类似bug以及全设备兼容问题 以下问题均在andriod4.4 以及IOS8.1下测试得知:

1:加入footer,主框架会出现垂直滚动条(可上下移动大约5个像素),此问题出现在部分android设备上(至少在酷派y70-c上出现) IOS正常。
如果要在底部footer自己实现tabBar,在 footer 样式中 不能加line-height 属性,否则高度会超出设备高度,出现滚动条
footer,#footer { height: 50px;line-heigh:50px;  background-color: #2B404D; width: 100%;  }//红色部分不能要
.tab {display:-webkit-box;-webkit-box-orient:horizontal;height:100% }
    .tab .item {display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;-webkit-box-flex:1;color:#fff}
    .tab .item-hov { background-color:#406073}


2:安卓下webkit性能没有IOS强,所以在有些时候需要用setTimeOut 来加载一些操作

4:为button 和 input 增加 样式  outline:medium;可去除 安卓下 点击后出现难看边框;增加
appearance:none;-webkit-appearance:none; 可去除默认样式(安卓)

5:BaiduMap 各种Bug,基本无法用,我希望不是bug,而是我搞错了,定位成功的 望指教下https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=599&extra=page%3D1

6:因为被缩放后,1px被显示出来的时候也被缩放了,如Iphone5s 分辨率为 640的宽,被缩放到320后,页面上的所有元素都是x2显示的,那么 1px 看上去和原生的1px就粗糙了
这是 正常的 实际上1px 被 缩放到了 2px 或者 3px




这是处理后的 真1px



用渐变方案 1px 被放到2px 50%就是1px

.border-top {
  background-image:-webkit-linear-gradient(top,#e4e4e4 50%,transparent 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position:top;
}

.border-bottom {
  background-image:-webkit-linear-gradient(bottom,transparent 50%,#e4e4e4 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position:bottom;
}

.border-left {
   background-image:-webkit-linear-gradient(left,transparent 50%,#e4e4e4 50%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
   background-position:left;
}

.border-right {
   background-image:-webkit-linear-gradient(right,#e4e4e4 50%,transparent 50%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
   background-position:right;
}

一个div 只能用 一个样式 不能同时使用 .border-bottom 和 .border-top 如果要上下都有border,就在下面建个div 在设置 border-top


7:让加载大尺寸js文件 异步进行,加快页面载入速度。比如使用Jquery 以及 jquery插件。(如果载入的js文件比较大并且多的时候,在低端手机上 错吨效果明显,使用异步加载,可以完美解决)

function LoadScript(src, callback, charset) {
        var script = document.createElement('script');
        script.setAttribute('language', 'javascript');
        if (charset) {
            script.setAttribute('charset', charset);
        }
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('defer', '');
        script.setAttribute('src', src);
        document.getElementsByTagName("head")[0].appendChild(script);
        if (document.all) {
            script.onreadystatechange = function () {
                if (this.readyState == 4 || this.readyState == 'complete' || this.readyState == 'loaded') {
                    if (callback) {
                        callback();
                    }
                }
            };
        } else {
            script.onload = function () {
                if (callback) {
                    callback();
                }
            };
        }
    }

LoadScript("../script/jquery.js",function(){
这是载入完jquery.js 后 执行的代码
},"utf-8");


8:如果 一个 button 的 tapmode 中 是载入另外一张图片,如果没有预加载该图片,在点击的时候 才加载图片,会有很不爽的感觉
    //预加载图片
    function  = PreloadImages(arr) {
        var newimages = [],
     loadedimages = 0
        var postaction = function () { } //此处增加了一个postaction函数
        var arr = (typeof arr != "object") ? [arr] : arr

        function imageloadpost() {
            loadedimages++
            if (loadedimages == arr.length) {
                postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
            }
        }
        for (var i = 0; i < arr.length; i++) {
            newimages = new Image()
            newimages.src = arr
            newimages.onload = function () {
                imageloadpost()
            }
            newimages.onerror = function () {
                imageloadpost()
            }
        }
        return { //此处返回一个空白对象的done方法
            done: function (f) {
                postaction = f || postaction
            }
        }
    };


使用方法:在apiready前
PreloadImages(['../image/czb_hov.png', '../image/sys_hov.png']);


9:数据传递中的,数据安全问题

把用户信息放在 hreader 中 进行传递 以下是我封装的post,先到服务器获取签名,然后携带签名再传递给服务器,签名验证通过 再返回数据 这下应该安全了吧

Post: function (url, PostData,CallBack) {
        var NetWorkStatus = PublicData.GetNetWorkSatus();
        if (NetWorkStatus == 0) {
            CallBack({ Result: 0 }, { statusCode: -1, msg: '请开启网络访问', code: 'fail' });
            return;
        }

        var curUserInfo = CurUserInfo.GetCurUserInfo();
        if (curUserInfo.vk == "") {
            $api.post(APIUrl.GetSign, { values: { Miei: api.deviceId } }, function (ret, err) {
                if (ret.Result == 1) {
                    curUserInfo.vk = ret.Data.vk;
                    CurUserInfo.SetCurUserInfo(curUserInfo);
                    DoPost();
                }
            },"json");
        } else {
            DoPost();
        }

        function DoPost() {
            var option = {
                url: url,
                method: 'post',
                cache: false,
                timeout: 30,
                dataType: 'json',
                returnAll: false,
                headers: {
                    CustomerID: curUserInfo.u_uid,
                    vk: curUserInfo.vk,
                    Miei: api.deviceId,
                    app_val: '1.0'
                },
                data: {
                    values: PostData
                }
            };

            api.ajax(option, function (ret, err) {
                CallBack(ret, err);
            });
        }

    }


10:当FrameGroup 和 navigationBar 同时存在时,滑动切换FrameGroup 的同时要设置navigationBar 的选中状态;点击navigationBar 的item时,要切换到相应的FrameGroup 。由于这两个操作都会导致对方的回调,造成回调死循环。所以我们要做2个开关,来阻止回调死循环
   var NavigationCallBackEnable = false;
    var FrameGroupCallBackEnable = false;


    navigationBar  的 CallBack


    function callback(ret, err) {
            if (ret) {
                if (NavigationCallBackEnable) {
                    FrameGroupCallBackEnable = false; // 当点击NavigationBar的item时,阻止 FrameGroup 回调
                    api.setFrameGroupIndex({
                        name: 'prod-list-frameGroup',
                        index: ret.index,
                        scroll: false
                    });
                }
            }


           NavigationCallBackEnable = true; // 加载完后 允许 点击 NavigationBar的item时,进行FrameGroup的切换
            return;
      
        }


    FrameGroup 的 CallBack
   function CallBack(ret , err){
        if (ret) {
                var name = ret.name;
                var index = ret.index;
                if (FrameGroupCallBackEnable) {
                    NavigationCallBackEnable = false; // 当FrameGroup滑动切换时,阻止 NavigationBar回调
                    navigationBar.config({ key: "selectedIndex", value: index });
                }
                FrameGroupCallBackEnable = true; // 加载完后 允许 FrameGroup滑动切换时,进行NavigationBar中item的选中状态切换
            }
   }


10:实现丝般顺滑的页面滚动 只适用于IOS 安卓无效 ,很简单 改造 body 和 html 的样式body, html { height: 100%;background-color:#fff;  }
.IOSscroll { position : relative; overflow-y:auto; -webkit-overflow-scrolling:touch;}

------------------------------------------------------------------------
  FixIOSScroll: function () {
        if (api.systemType == "ios") {
            $("body,html").addClass("IOSscroll");
        }
    }


在 apiready 中 调用 FixIOSScroll() 方法
不断更新中....














1

查看全部评分

主题:
11
帖子:
60
云币:
126
发表于 2014-11-18 08:00:54 来自手机 |
为啥第三条我用onclick,可以取消呢

主题:
50
帖子:
190
云币:
501
 楼主| 发表于 2014-11-18 10:50:13 |
本帖最后由 毛腿 于 2014-11-18 11:01 编辑
梁红博 发表于 2014-11-18 08:00
为啥第三条我用onclick,可以取消呢

我测试了 onclick的 此问题已经被修复了 ,但感觉延时严重

主题:
0
帖子:
90
云币:
99
发表于 2014-11-18 11:04:38 |
感谢楼主的总结和经验分享,我们会持续优化,让这种“坑”越来越少

主题:
2
帖子:
32
云币:
142
发表于 2014-11-18 23:40:17 |
支持LZ,我今天也用安卓机测试了,还以为是官方的引擎不兼容,后来发现确实需要延长加载时间。
大家一块来捉虫!

主题:
50
帖子:
190
云币:
501
 楼主| 发表于 2014-11-22 12:39:35 |
更新了 顶一下

新手上路

UID:13670

主题:
5
帖子:
20
云币:
51
发表于 2014-11-30 02:28:59 |
点击过程中 总是和原生的安卓有点不太一样  这样好像用户体验变得差了 。。。

主题:
41
帖子:
287
云币:
1474
发表于 2014-11-30 02:54:39 |
好贴帮顶,顺便收藏
个人博客:http://hanc.cc

主题:
50
帖子:
190
云币:
501
 楼主| 发表于 2014-12-2 23:02:22 |
更新了 当FrameGroup 和 navigationBar 同时存在时,滑动切换FrameGroup 的同时要设置navigationBar 的选中状态;点击navigationBar 的item时,要切换到相应的FrameGroup 。由于这两个操作都会导致对方的回调,造成回调死循环。所以我们要做2个开关,来阻止回调死循环

主题:
50
帖子:
190
云币:
501
 楼主| 发表于 2014-12-4 00:12:10 |
更新了

10:实现丝般顺滑的页面滚动 只适用于IOS 安卓无效 ,很简单 改造 body 和 html 的样式
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表