• 跟着慕课网做了第一个webApp,实现一个移动端的相册管理器 首先,页面的布局很简单:一个放置小图的ul,和一个放置大图的容器(在点击之后才显示,小图情况下是隐藏大图的) html代码 webApp相册的实现 ...

    跟着慕课网做了第一个webApp,实现一个移动端的相册管理器

    首先,页面的布局很简单:一个放置小图的ul,和一个放置大图的容器(在点击之后才显示,小图情况下是隐藏大图的)

    html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webApp相册的实现</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--<link rel="stylesheet" href="../style/base.css">-->
        <script src="../js/zepto.min.js"></script>
        <link rel="stylesheet" href="../style/animate.css">
        <link rel="stylesheet" href="../style/index.css">
    
    </head>
    <body>
    <div>
        <ul class="img-container" id="container">
        </ul>
    
        <div class="large animated fadeInDown " id="large_container" style="display: none">
            <img id="large_img">
        </div>
    </div>
    
    <script src="../js/index.js"></script>
    
    </body>
    </html>
    css样式就不说了,很简单

    具体说一下js的实现过程

    1、小图页面,为了适配更多的设备,要动态的获取对应屏幕的大小来动态设置显示图片的宽高

    var render = function () {
        var padding = 2;
        var winWidth = zWin.width();
        var picWidth = Math.floor((winWidth - padding * 3) / 4);
        var tmpl = '';
        for(var i = 1;i <= total;i++){
            var p = padding;
            var imgSrc = '../image/'+i+".jpg";
            if(i % 4 == 1){
                // 如果是每一行的第一张图,则没有padding
                p = 0;
            }
            tmpl += '<li data-id="'+i+'" class="animated zoomIn" style = "width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;' +
                'padding-top:'+ padding+'px;"><canvas id="cvs_'+i+'" ></canvas></li>';
            //用canvas将图片画在画布上,而不是直接使用img
            var imageObj = new Image();
            imageObj.index = i;
            imageObj.onload = function () {
                var cvs = $('#cvs_'+this.index)[0].getContext('2d');
                cvs.width = this.width;
                cvs.height = this.height;
                cvs.drawImage(this,0,0);
            }
            imageObj.src = imgSrc;
    
        }
        $('#container').html(tmpl);
    }

    2、在触摸小图时,视频中老师讲到用一个代理去实现,这个地方还有点没懂,代码如下

    $('#container').delegate('li','tap',function () {
        //触摸的事件绑定,使用代理
        var _id = cid =  $(this).attr('data-id');
        loadImg(_id);
    });


    3、在小图页面点击图片时,跳转到相应的大图并且显示放置大图的容器,那么要有一个loadImg的函数

    函数,加载图片的时候,要看图片时一张横图还是竖图,进而设置图片的显示的宽高

    var loadImg = function (id,callback) {
        $('#large_container').css({
            width:zWin.width(),
            height:zWin.height()
        }).show();
    
        var imgsrc = '../image/'+id+'.large.jpg';
        var imageObj = new Image();
        imageObj.onload = function () {
            var w = this.width;
            var h = this.height;
            var winWidth = zWin.width();
            var winHeight = zWin.height();
            var realw = winHeight * w / h;
            var paddingLeft = parseInt((winWidth - realw) / 2);
            var realh = winHeight * h / w;
            var paddingTop = parseInt((winHeight - realh) / 2);
    
            wImage.css('width','auto').css('height' ,'auto');
            wImage.css('padding-top','0').css('padding-left','0');
            if(h / w > 1.2){
                //图片是一张长图
                wImage.attr('src',imgsrc).css('height',winHeight).css('padding-left',paddingLeft);
    
            }else{
                //图片是一张横图
                wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',paddingTop);
            }
        }
        imageObj.src = imgsrc;
        callback&&callback();
    
    }
    4、显示大图之后,要实现图片的左右滑动,这就用到了zepto.js。这里面加入了移动端touch的相关代码,可以实现我们所需要的大部分移动端滑动,比如左滑右滑双击等。左右滑动时,要有一个把之前的设置的样式清除的一个动作,所以这里用到了removeClass,removeEventListener。这里的animated bounceInRight就是animated里面已经设置好的一些样式,直接设置类名就可以实现一个左右滑动的效果。

    $('#large_container').swipeLeft(function () {
        cid++;
        if(cid > total){
            cid = total;
        }else{
            loadImg(cid,function () {
                domImage.addEventListener('webkitAnimationEnd',function () {
                    wImage.removeClass('animated bounceInRight');
                    domImage.removeEventListener('webkitAnimationEnd');
                },false);
                wImage.addClass('animated bounceInRight')
            });
        }
    });
    5、单击大图时,关闭大图片及存放其的容器

    $('#large_container').tap(function () {
        $(this).hide();
    });

    整个代码在火狐浏览器下可以很好的运行,但是谷歌浏览器还不能实现左右滑动的效果,不知道是不是版本适配的问题???有待解决!!!






    展开全文
  • 结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。 WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。 开发者们都知道在...

    结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。

    WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。

    开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。

    WebApp与Native App有何区别呢?

    Native App:

    1、开发成本非常大。
    一般使用的开发语言为JAVA、C++、Objective-C。

    2、更新体验较差、同时也比较麻烦
    每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些应用程序即使不需要用户手动更新,但是也需要有一个恶心的提示)。

    3、非常酷
    因为native app可以调用IOS中的UI控件以UI方法,它可以实现WebApp无法实现的一些非常酷的交互效果

    4、Native app是被Apple认可的
    Native app可以被Apple认可为一款可信任的独立软件,可以放在Apple Stroe出售,但是Web app却不行。

    Web App:
    1、开发成本较低
    使用html5 + CSS3 + js 等web开发技术就可以轻松的完成web app的开发。效果上面能够完全模拟传统应用程序效果。

    2、升级较简单
    由于不需要通过苹果商店发布,所以升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉

    3、维护比较轻松
    和一般的web一样,维护比较简单,它其实就是一个站点

    Webapp说白了就是一个针对Iphone、Android优化后的web站点,它使用的技术无非就是HTML或HTML5、CSS3、JavaScript,服务端技术JAVA、PHP、ASP。

    当然,因为这些高端智能手机(Iphone、Android)的内置浏览器都是基于webkit内核的,所以在开发WEBAPP时,多数都是使用 HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时,若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话,这也就失去了WEBAPP的本质意义了,且有些效果也无法实现的,所以在此又回到了我们的主题–webapp的布局方式和技术。

    在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发 Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,你需要对HTML5和CSS3有一定的了解。如果你已经对此有 所了解,那现在就开始往下阅读吧……

    1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
    1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
    2 <meta content=”yes” name=”apple-mobile-web-app-capable” />
    3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
    4 <meta content=”telephone=no,email=no” name=”format-detection” />

    第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
    user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小。
    (注意:据说HTC G7自身系统浏览器不支持这一条规则,能对页面进行放大,一旦放大导致页面布局错乱,解决方法:定义页面的最小宽度 min-width,body{min-width: 300px;})

    iOS 7.1的Safari为meta标签新增minimal-ui属性,在网页加载时隐藏地址栏与导航栏。<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

    第二个meta标签是ios设备(不只iphone)中的safari私有meta标签,它表示:允许全屏模式浏览,开启对Web Aapp程序的支持。;

    第三个meta标签也是ios系统的私有标签,它指定在web app状态下,ios设备中顶端的状态条的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

    第四个meta标签表示:使设备浏览网页时对数字不启用电话功能(不同设备解释不同,itouch点击数字为存入联系人,iphone为拨打电话),忽略将页面中的数字识别为电话号码。
    若需要启用电话功能将telephone=yes即可,具体调用格式可以这样书写代码<a href=”13800138000″>Call Me</a>,若在页面上面有google maps, iTunes和youtube的链接会在ios设备上打开相应的程序组件。

    2、HTML5标签的使用
    在开始编写webapp时,哥建议前端工程师使用HTML5,而放弃HTML4,因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验,可以减少开发者很多的工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。

    3、放弃CSS float属性
    在项目开发过程中可以会遇到内容排列排列显示的布局(见下图),假如你遇见这样的视觉稿,哥建议你放弃float,可以直接使用display:block;

    4、利用CSS3边框背景属性
    这个按钮有圆角效果,有内发光效果还有高光效果,这样的按钮使用CSS3写是无法写出来的,当然圆角可以使用CSS3来写,但高光和内发光却无法使用 CSS3编写,这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂 的样式属性。

    5、块级化a标签
    请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。

    6、自适应布局模式
    在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝 采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、 chrome都能够正常的显示,你无需再次考虑设备的分辨率。

    7、学会使用webkit-box
    上一节,我们说过自适应布局模式,有些同学可能会问:如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。

    8、如何去除Android平台中对邮箱地址的识别
    看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地 址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想 Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中 1 <meta content=”email=no” name=”format-detection” />

    9、如何去除iOS和Android中的输入URL的控件条
    你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?

    答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
    1 setTimeout(scrollTo,0,0,0);

    请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。

    10、如何禁止用户旋转设备
    我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!

    至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位 时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出 发点是正确的,苹果确实不是一般的苹果。

    iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。

    11、如何检测用户是通过主屏启动你的webapp
    看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下 iphoneipodipod touch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动 增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别 是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对 象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp 时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访 问我们的webapp的。在Android中从来没有添加到主屏这回事!

    12、如何关闭iOS中键盘自动大写
    我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

    13、iOS中如何彻底禁止用户在新窗口打开页面
    有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但 是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的 target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技 巧仅适用iOS对于Android平台则无效。

    14、iOS中如何禁止用户保存图片\复制图片
    我们在第13条技巧中提到元素的-webkit-touch-callout属性,同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片了。

    15、iOS中如何禁止用户选中文字
    我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

    16、iOS中如何获取滚动条的值
    桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?
    通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

    17、如何解决盒子边框溢出
    当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

    18、如何解决Android 2.0以下平台中圆角的问题
    如果大家够细心的话,在做wap站点开发时,大家应该会发现android 2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。
    在对一个元素定义圆角时,为完全兼容android 2.0以下的平台,我们必须要按照以下技巧来定义边框圆角:
    1\-webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);
    2\如果对针对边框做样式定义,比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
    3\假如我们有这样的视觉元素,左上角和右上角是圆角时,我们必须要先定义全局的(4个角的圆角值)-webkit-border- radius:5px;然后再依次的覆盖左下角和右下角,-webkit-border-bottom-left-radius:0;-webkit- border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角,还有记住!-webkit这个前 缀一定要加上!

    19、如何解决android平台中页面无法自适应
    虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:
    1 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;” />
    如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width,如果没有请立即加上吧!

    20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式
    新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari仍然会对页面中的5位连续的数字进行自动识别,并且将其重新渲染样式,也就是说你的css对该标签是无效的。
    1 <meta name=”format-detection” content=”telphone=no” />

    我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签,我们都做了如下改写:
    1 <button class=”t-balance”style=”background:none;padding:0;border:0;”>95009.00</button>元

    21、如何检测iOS4 、iOS5或是iOS6?
    iPhone 4带来的革新,retina display绝对是最吸引眼球的一项。正是依赖这视网膜显示屏,iPhone 4的分辨率达到了640×960 pixels,不过为了保持向下兼容性,它采用的仍然是320×480 points。也就是说,在不进行缩放的情况下,显示普通图片时,它会用4个像素来显示图片中的1个像素;而在显示retina图片时,每个像素都对应图片中的1个像素。

    如此一来,老的应用无需修改就可以在iPhone 4上运行了——虽然显示效果差了点,但是不会出现只有左上角那1/4的区域有内容的情况。

    iOS 6发布有许多新的变化,比如smart app banner功能,新版iPhone屏幕也由3:2变长为16:9,分辨率从iPhone 4s的640px*960变成了640*1136,DPI依然是326。平时我们习惯用useragent检测,返回:
    Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0

    但是,这个方法无法分辨是刷机升级到iOS 6的低版本iPhone,还是最新的原装iPhone 5,这里用javascript或者通过 CSS3 的 Media Queries 特性进行区分。

    在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5。

    那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机

    iPhone4/4s的分辨率为640*960 pixels,DPI为是326,设备高度为480px

    iPhone5的分辨率为640*1136 pixels,DPI依然是326,设备高度为568px

    那么我们只需要判断iphone手机的device-height(设备高)值即可区别iPhone4和iPhone5

    方式一,直接写到样式里面
    /*由于isPhone4inches = (window.screen.height==568);*/
    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    .class{}
    }
    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 or iPod Touch 5th generation*/
    .class{}
    }

    方式二,链接到一个单独的样式表,把下面的代码放在<head>标签里

    <link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" />
    <link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" />

    使用JS

    //通过高度来判断是否是iPhone 4还是iPhone 5
    isPhone4inches = (window.screen.height==480);
    isPhone5inches = (window.screen.height==568);

    22、如何实现Web App添加到主屏幕
    如果你之前通过apple-mobile-web-app-capable这个meta标签来将网页添加到主屏幕的话,这种方法只支持iPhone 的3.5〃屏幕,而iPhone 5会比较悲催,页面顶部和顶部会出现一条黑色区域。即便你提供了一个大尺寸的启动界面(640*1096),iPhone 5依然会将其压缩至640*920。

    对iOS6的解决方案:

    你需要放弃之前使用的viewport属性width=device-width或者width=320。如果你不指定viewport,它也可以很正常的显示:

    <meta name="viewport" content="initial-scale=1.0">


    或者你也可以指定一个非320的宽度:

    <meta name="viewport" content="width=320.1">


    如果你不想影响iPhone 4s以前的safari,也可以用js动态设置viewport:

    if (window.screen.height==568) { // iPhone 4"
    document.querySelector("meta[name=viewport]").content="width=320.1";
    }


    对于启动画面,可以用media query来调整:

    <link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
    <link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

    23、如何设置webapp的主屏默认标题?
    iOS6可以通过meta标签来给主屏webapp指定标题:
    <meta name="apple-mobile-web-app-title" content="XXX网站欢迎你">

    24、iOS6文件上传限制
    iOS6引入了HTML5 文件上传API,支持单个文件/多文件上传。
    <input type="file"><!--单文件-->
    <input type="file" multiple><!--多文件-->
    但是,由于iOS的资源管理机制的限制,你只能上传照片和视频,不能上传其它格式文件,也不支持getUserMedia api(camera api)。

    25、iOS广告条Smart App Banner
    如果你的网站同时提供的有app在itunes app store,可以通过一个简单的meta标签来提示用户,让用户下载安装你的native app(或者是hybrid app):

    <meta name="apple-itunes-app" content="app-id=xxx">

    也支持itunes affiliate program(推广联盟):

    <meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
    <meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">

    需要注意的是,app banner占位为156px的高度——高分屏为312px。

    26、CSS3 Filter
    详细请阅读《-webkit-filter是神马?》http://www.qianduan.net/what-is-webkit-filter.html

    27、Safari 全屏
    这个很赞,在横屏模式下,点击Safari右下角的icon即可全屏。 有些像 Mac OS X 的全屏方法,缺点是只支持横屏的场景。

    28、Animation Timing API
    这个对游戏开发者非常有用,详情可访问Animation Timing API(http://www.w3.org/TR/animation-timing/),也可以看下Paul Irish的这个教程http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/。

    29、CSS image set
    考虑到位用户节省流量,iOS6这个属性非常有用。你可以为CSS选择器指定多个特定的图片,用于区分高分屏和非高分屏:

    -webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)

    可以支持background-image之类的属性。

    这个是webkit私有属性,其它浏览器不支持。希望os x下也开始支持吧,这样就不用 background-size来区分视网膜屏了。

    30、CSS 3 cross-fade

    iOS 6支持一些最新的CSS3 image values标准,包括cross-fade。这样我们可以在同一个选择器上使用多张图片,以实现半透明或者动画的效果:

    background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

    31、Web View更新:

    需要注意的是,webview中的javascript速度,比nitro引擎的Safari慢3.3倍。

    嗯,上面说的hybrid模式就是用webview组件封装的webapp,phonegap之类的第三方开发工具即是这种模式。

    32、同步调试
    iOS 6中Safari和webview,支持用桌面Safari同步调试了。像在pc端上一样调试webapp或者hybrid app对前端开发者无疑是极大的方便。方法很简单:

    第一步,手机上设置Safari开启 web inspector(设置–>safari–>高级)
    第二步,手机连上电脑
    第三部,打开电脑上的Safari,然后菜单–》开发,即可看到设备。点击即可调试。

    33、link标签apple-touch-icon

    通过设置相应的apple-touch-icon标签,添加到主屏幕的图标就会使用我们指定大小的图片。以下是针对ios不同设备的设置方法。

    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">


    (默认iphone的大小为60px,ipad1为76px,retina屏则是2倍大小。)

    图标搜索的优先级如下:

    如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。

    如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。

    如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。

    如果未在区域指定用link标签指定图标,会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。

    注:ios7不再为icon添加特效(圆角和高亮),ios7以前则默认为icon添加特效,,如果不希望系统添加特效,则可以将apple-touch-icon.png替换为apple-touch-icon-precomposed.png

    34、apple-touch-startup-image

    apple-touch-startup-image是用来为WebApp设置一个类似NativeApp的启动画面。使用方法为:

    <link rel="apple-touch-startup-image" href="/startup.png">

    不过和apple-touch-icon不同,apple-mobile-web-app-capable不支持sizes属性,所以使用media来控制普屏、retina屏和横竖屏分别加载不同的启动画面。

    // iPhone
    <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
    
    // iPhone Retina
    <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    
    // iPhone 5
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
    
    // iPad portrait
    <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
    
    // iPad landscape
    <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
    
    // iPad Retina portrait
    <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    
    // iPad Retina landscape
    <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />


    参考文献:meta标签的使用:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
    WebApp配置:
    http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

    展开全文
  • 最近做的一个webapp里有一个聊天功能,聊天时可以发送相册图片、发送拍照图片及发送文件。 一看这个功能,简单呐,我记得之前就做过类似的上传头像的功能,于是 <input type="file" accept="image/*" capture=...

    最近做的一个webapp里有一个聊天功能,聊天时可以发送相册图片、发送拍照图片及发送文件。

    一看这个功能,简单呐,我记得之前就做过类似的上传头像的功能,于是

    <input type="file" accept="image/*" capture="camera">

    一顿操作后打包真机测试,结果...凉凉,我的手机直接给出多个选项,相机相册文件等等,连美图秀秀都出现了。这不对啊,我要的是直接打开系统相机。百度之后发现大多数人都是通过这种方法来做的,但是这个方式好像并不能实现我的需求。于是换种思路:

    这里使用HTML5+来实现,直接上代码:

    // 打开相册并获取图片相关信息
    plus.gallery.pick((p) => {
         plus.io.resolveLocalFileSystemURL(p, (entry) => {
               entry.file((file) => {
    		 var fileReader = new plus.io.FileReader()
    		 fileReader.onloadend = function(evt) {
                           // console.log(evt.target.result)
                           file.file = evt.target.result
                           // console.log(file.file)
                           // console.log(file.size + '--' + file.name + '--' + file.type + '--' + file.lastModifiedDate)
                           that.uploadFile(file)
                      }
                      fileReader.readAsDataURL(entry, 'utf-8')
    	    })
          }, (e) => {
               console.log('图片文件读取错误:' + e.message)
          })
    }, (e) => {
         console.log('失败:' + e.message)
    }, {
         filter: 'image'
    })
    
    
    // 拍照并获取拍的照片
    var cmr = plus.camera.getCamera()
    cmr.captureImage((p) => {
        plus.io.resolveLocalFileSystemURL(p, (entry) => {
            entry.file((file) => {
            	var fileReader = new plus.io.FileReader()
            	fileReader.onloadend = function(evt) {
                    // console.log(evt.target.result)
                    file.file = evt.target.result
                    // console.log(file.file)
                    // console.log(file.size + '--' + file.name + '--' + file.type + '--' + file.lastModifiedDate)
                    that.uploadFile(file)
                }
                fileReader.readAsDataURL(entry, 'utf-8')
            })
        }, (e) => {
            console.log('图片文件读取错误:' + e.message)
        })
    }, (e) => {
        console.log('失败:'+ e.message)
    }, {
        filename: '_doc/camera/',
        index: 1
    })

    最后一个打开文件管理选取文件上传稍微麻烦一点,借用了一个插件(pickFile.js):

    // pickFile.js是一个插件,可以打开文件管理
    pickFile.PickFile(function(src){  
        //  console.log(src + '777')
         plus.io.resolveLocalFileSystemURL(src, (entry) => {
            entry.file((file) => {
                	var fileReader = new plus.io.FileReader()
                	fileReader.onloadend = function(evt) {
                        // console.log(evt.target.result)
                        file.file = evt.target.result
                        // console.log(file.file)
                        // console.log(file.size + '--' + file.name + '--' + file.type + '--' + file.lastModifiedDate)
                        that.uploadFile(file)
                    }
                    fileReader.readAsDataURL(entry, 'utf-8')
                })
        }, (e) => {
            console.log('图片文件读取错误:' + e.message)
        })
    })

    这里是上传文件的功能:

    uploadFile (file) {
        this.latestHs = true
        var fileObj = dataURLtoFile(file.file, file.name)
        // var file = $('#test')[0].files[0]
        var guid = require('uuid/v1')()
        var name = file.name
        var type = file.type
        var size = file.size
        var lastModifiedDate = file.lastModifiedDate
        var formData = new FormData()
        formData.append('file', fileObj)
        formData.append('guid', guid)
        formData.append('name', name)
        formData.append('type', type)
        formData.append('size', size)
        formData.append('lastModifiedDate', lastModifiedDate)
        AddFile(formData).then(res => {
            // console.log(res.data + '111')
            if (res.data === 'True') {
                var data = {
                    guid: guid,
                    name: name,
                    token: `Bearer ${localStorage.getItem('access')}`
                }
                // console.log(JSON.stringify(data) + '999999')
                GetFileInfo(data).then(res => {
                    // console.log(JSON.stringify(res) + 'ooooooo')
                    this.onSuccess(res)
                })
            } else {
                console.log('上传失败败')
            }
        }).catch(() => {
            console.log('上传失败')
        })
        //将base64转换为文件对象
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(',')
            var mime = arr[0].match(/:(.*?);/)[1]
            var bstr = atob(arr[1])
            var n = bstr.length
            var u8arr = new Uint8Array(n)
            while(n--){
                u8arr[n] = bstr.charCodeAt(n)
            }
            //转换成file对象
            return new File([u8arr], filename, {type:mime})
            //转换成成blob对象
            //return new Blob([u8arr],{type:mime});
        }
    }

     

    展开全文
  • webapp 性能优化

    2019-06-29 11:59:30
    webapp 不像传统页面,它生命周期更长,在手机端上,硬件环境并没有pc上那么好。所以性能的优化尤为重要。 webapp的性能优化主要分为两个方面网络请求优化和页面渲染优化, 我们对于性能优化主要通过这连个方面来...

    webapp 不像传统页面,它生命周期更长,在手机端上,硬件环境并没有pc上那么好。所以性能的优化尤为重要。 webapp的性能优化主要分为两个方面 网络请求优化 和 页面渲染优化 , 我们对于性能优化主要通过这连个方面来处理。

    压缩资源文件

    我们在使用某些框架的时候(例如:JQuery), 会发现有两个文件 jquery.js 和 jquery.min.js, jquery.min.js 的体积会小很多,这样在请求的时候会比较快。

    所以在项目中使用到的资源文件(js、css、image)在发布之前需要进行压缩处理, 这里有些在线的压缩的工具 在线压缩, 如果使用写项目管理工具, 可以考虑用 gulp 请求。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    minifycss = require('gulp-minify-css');

    gulp.task('js', function(){
    return gulp.src('./test.js')
    .pipe(sourcemaps.init())
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./'));
    });

    gulp.task('css', function(){
    return gulp.src('./test.css')
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('/'));;
    });

    合并请求

    开发过程中,维护一个很长的js或是css文件是一个很困难的事情,常常会吧它分为很多的小得js和css文件,但是如果按照传统的方式写script/link 标签加载,会多很多请求,有http 1请求的原因,每个请求都会有一个rtt(请求回路)时间,一旦请求数量增多,那么请求的时间也会变长。 在发布之前我们可以使用一些工具将这些资源文件合并为一个, 我们常使用gulp

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    minifycss = require('gulp-minify-css');

    gulp.task('js', function(){
    return gulp.src('./app/**/**.js') //app 下所有的js 文件
    .pipe(sourcemaps.init())
    .pipe(concat('./app.js')) //合并所有文件
    .pipe(gulp.dest('./'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./'));
    });

    gulp.task('css', function(){
    return gulp.src('./app/**/*.css')
    .pipe(concat('./app.css')) //app 下所有的 css文件
    .pipe(gule.dest('./'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('/'));;
    });

    cdn 和 gzip

    CDN 的全称是 Content Delivery Network ,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

    GZIP 最早由 Jean-loup Gailly 和 Mark Adler 创建,用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式。
    HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了,效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。

    我们可以将静态的资源发布到cdn上,并开启 gzip 会大大的提高页面加载数据

    lazyLoad

    webapp 首屏加载速度是一个重要的指标,那么怎么让我们首页最快速度加载出来呢?首页中我们能直接看到的只有一屏,那么剩下的我们可以做 lazyload, 先加加载能直接看到,让后异步延迟加载剩下的内容。

    数据缓存

    webapp 中有很多和后台的交互,首页加载的时候可以先使用上次的缓存数据,等请求成功后再刷新这部分的显示, 在一些短暂时间的重复请求,可以使用 sessionStorage 缓存这些数据, 使用 一些手段 设置缓存时间,短暂时间的内的重复请求就可以直接从缓存中获取数据了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //封装请求方法
    function getData(url, params, onloadSuccess){
    var key = url; //使用 url + params 做key
    for(var str in params){
    key += str += params[str];
    }
    if(sessionStorage.getItem(key)){
    //如果有缓存直接从缓存中取
    onloadSuccess(JSON.stringify(sessionStorage.getItem(key)));
    reutrn ;
    }
    $.ajax({
    url: url,
    data: data,
    dataType: 'json',
    type: 'post',
    success: function(data){
    sessionStorage.setItem(key, data); //缓存数据
    onloadSuccess(data);
    }
    });
    }

    css动画GPU加速消除闪屏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    .animate{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    }

    js动画

    有些动画需要一些js控制无法使用css动画的情况,我们可以考虑使用js动画来做。可以使用window.requestAnimationFrame.

    window.requestAnimationFrame() 这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接收一个函数作为参数,改函数在重绘前调用。

    它稳定性比 setTimeout 要好,但是并不是所有的浏览器都支持这个api, 我们需要一个兼容性代码处理。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
    return window.setTimeout(callback, 1000 / 60);
    };
    })();

    布局优化

    PC 上有很多用float来做的布局,float的布局在需要更大的计算量,在页面渲染的时候严重影响到了加载速度,尽量考虑用 inline 和 inline-block 替代, flex box 是专为响应式设计布局方式,在移动端兼容性良好,可以考虑大范围使用,这里推荐下阮一峰大大的教程 Flex 布局教程:语法篇

    优化页面上的dom数量

    在mobile端,如果页面中的dom数量过多,在页面滚动的时候会出现卡顿,闪烁等等不良的情况,所以我们要删除一些页面上不必要的dom元素或者将一些dom元素作为延迟加载。

    优化dom查询性能

    先看一下这个部分的代码

    1
    2
    3
    for(var i = 0; i< 100; i++){
    var a = $('.test');
    }

    上面的代码每次循环的时候都会去进行一次dom查询,显然是不必要的消耗,我们需要在dom查询之前缓存,避免不必要的dom操作。

    1
    2
    3
    4
    var a = $('.test');
    for(var i = 0; i< 100; i++){
    // do somethings
    }

     

    转载于:https://www.cnblogs.com/axl234/p/5780432.html

    展开全文
  • 图片艺廊管理网站说明 数据库设计: 主要由三张表:用户表、图片表、用户图片对应关系表。 用户表: 主要字段如下: 用户ID 整型 主键 自增长; 用户姓名 字符型 ; 用户密码 字符型 ;...

                                                                                         图片艺廊管理网站说明

    • 数据库设计:

    主要由三张表:用户表、图片表、用户图片对应关系表。

    • 用户表:

    主要字段如下:

    用户ID     整型    主键    自增长;

    用户姓名   字符型  ;

    用户密码   字符型  ;

    • 文件表:

     主要字段如下:

    文件ID     整型    主键    自增长;

            文件名     字符型;

            文件类别   字符型;

    • 用户图片对应关系表:

      主要字段如下:

             文件ID    整形;

             用户姓名   字符型;

             主键(文件ID,用户姓名);

             外键 文件ID参照文件表(文件ID),用户姓名参照用户表(用户姓名);

    •  网站设计前端与后端设计

               本网站后端主要是由dao层、filter层、javaBean层、servletHandle层、untilBean层组成,前端主要是由css层、error层、images层、personalIndex层、index.jsp、regist.Jsp组成。

    后端详细说明:

    1. dao层:存放操作数据库java类,主要组成如下。

        ImageDao:实现对Image表的增删改查功能,涉及到与user_file表的组合查询,和数据库分页技术.

    userDao:实现对user表的增删改查功能,涉及到与user_file表的组合查询。

    1. Filter层:用来处理REQUEST、FORWARD对JSp、servlet发起的每一次请求或请求转发的过滤,用来重新设置,请求与响应的contenType和编码,防止JSp、servlet之间转发、重定向时而会引起乱码的现象。
    2. javaBean层:这里要是实体bean:UserBean、IamgeBean与关系Bean:User_iamgeBean。用来dao层向servlet层传数据时对数据进行包装。
    3. servletHandle层:用来向前台发送数据,处理各种业务逻辑。

    AddImageServlet:处理页面增加图片的请求,向数据库中插入记录,并向jsp返回结果

    deleteImageServlet:处理页面删图片的请求,向数据库中删除记录,并向jsp返回结果

    LoginImageServlet:处理页面加载图片的请求,从数据库中获取记录,并向jsp返回结果

    UpdateUserPass:处理页面修改密码的请求,向数据库中修改记录,并向jsp返回结果

    UserLoginServlet:处理页面加载用户的请求,从数据库中获取记录,并向jsp返回结果

    UserRegistServlet:处理页面注册用户的请求,向数据库中插入记录,并向jsp返回结果

    1. untilBean层:采用工厂设计模式写了一个对数据库操作的工具类;主要是数据库的链接和操作数据库的静态方法。

    前端详细说明:

    1. css层:主要是存放JSP页面的css样式表,每一张jsp对应一张样式表
    2. Error层:用来存放404(服务器找不到请求的网页)与500(服务器内部错误)发生时,所展示图片,当服务器错误时来给用户以更好地体验效果。
    3. images层:用来存放jsp页面上所用到的图片。
    4. personalIndex层:主要是存放网页主页上jsp,和img层;详细说明如下:

       AddImage.jsp:增加图片的界面

       PersonalIndex.jsp:用户主页,照片展示页面

    Update Pass.jsp:用户修改密码界面

    Img层:用来存放用户所上传的图片。

    1. index.jsp:登陆界面
    2. Regist.jsp:注册界面

     

    • 网站制作过程遇到的困难
    1. 在网页制作过程中,涉及到各种差错处理、页面加载数据等等:例如用户名为空、用户名密码不匹配、加载数据失败等等一系列错误信息和图片链表等数据该如何在JSP中显示,首先链表的显示就要用到循环语句,而java老师常说jsp中尽量不要嵌入java代码。

    于是我就想到了用EL表达式,而循环控制用到java标准标签库相关知识;又因为Servlet层向jsp层传的参数作用在不同的范围有session层、request层的数据,而el表达式恰好很方便的能解决这些问题。

    1. 在制作过程中,由于要求用到数据库分页技术,那么这将涉及到大量的数据,这些数据该如何展示,第一次想到的是页面分页展示,却又对如何分页展示没有头绪。

       经历过大量试探之后,想到了一个数据库分页展示的方法,第一次加在数据的时候;首先将查询的结果集缓存到本地,用CachedRowSet将rs中的数据取出来,规定好一页15条记录。采用分页查询获取记录的前15条;封装成对象链表,向前台传入传入链表并展示。当点击下一页的时候。从servlet层取出第二页数据并展示,中间涉及到很多差错控制逻辑。

    1. 网页制作过程中有时遇到乱码问题。比如用response.getWriter()方法展示一些文字就会乱码,每次都要设置request的编码,和response的contenType很麻烦。

    于是就想到了用过滤器来过滤每一次请求,并为其设置编码格式;和resonpse的contentType。

    1. 网页图片上很多的类别,刚开始不知道该如何按类别来加载这些图片,如何在servlet层处理这些逻辑。

       最后处理是在IamgeDao中增加一个按类别、按用户名加载图片的方法,在servlet层进行调用,根据a链接传来的参数来加载图片数据传到jsp层。

     

    注意:演示视频中需要大量的数据需要插入数据库。请先把personal/Img文件中存在的图片全部删除后在进行操作!

     

    注:工程源码已上传至csdn

    展开全文
  • 写在前面webApp开发有一段时间了,随着自己的知识面和技能水平不断提升,一个“重构“的想法变得越来越强烈,当然,重构之前,一个确切的方案是相当关键的,也可以说是重中之重, 吸取之前草率上阵的教训,这次要...
  • XX资产管理系统 前端技术栈 HTML/css/javascript vue/node.js/ES6 网络请求原理 对vue的要求略高,其他技术会用就行 项目运行环境 node版本 v10.15.2 (10以下不能运行) vue版本 3.7.0 vue项目运行依赖 axios...
  •  这一篇主要写点在公司的要求下发布的webApp,发布的地方主要有应用宝、百度助手、91手机应用中心,安卓市场上。  一,应用宝市场  1,首先登陆http://open.qq.com/腾讯开放平台(可以用QQ账号快速登陆),...
  • 1. 上传组件 使用KindEditor的上传组件: 2. 上传组件的JS实现 ...workspace/taotao-manage/taotao-manage-web/src/main/webapp/js/kindeditor-4.1.10/examples/multi-image-dialog.html 2.3 实现 ...
  • Web App与Native App

    2015-08-24 17:29:34
    结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。 WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。 开发者们都知道...
  • Webapp day01 回顾: ①jQuery:简化DOM操作,常用于DOM操作频繁,数据增删改查不是特别多的场景 ②bootStrap:在网站或者网络应用程序开发的开源前端框架,在响应式的开发,偏向于pc端 ③angularJS:实现SPA...
  • ssm+js+ajax+bootstrap社团管理系统 简述 小白尝试ssm、ajax、bootstrap。此博客纯属自己学习ssm框架时的心得与笔记。 系统描述 该系统采用ssm框架,使用eclipse ee编译器,采用java语言编程,tomcat服务器,是一...
  • web app :http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/master/README.md... mobileTech A useful tools or tips list for mobile web application developing 这个...
1 2 3 4 5 ... 20
收藏数 554
精华内容 221
关键字:

相片管理webapp