zoukankan      html  css  js  c++  java
  • native+web开发模式之web前端经验分享

    十一长假后的第一天上班,心情不错,准备给大家分享一篇文章,是我在开发58同城客户端3.0的一些经验。所涉及到的主要在web前端这块,分三个部分,html,css,js下面来详细说明:

    ****************** html篇 *****************

    1、所有页面文件统一使用html5文档声明,添加如下;
    <!DOCTYPE html>

    2、html标签添加 lang属性, lang=”zh-CN”,以示中文;

    3、编码格式统一为“utf-8”;
    <meta charset=”utf-8″ />

    4、为移动端网页添加必要的meta值;
    <meta name=”viewport” content=”initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width” />
    <meta name=”format-detection” content=”telephone=no” />
    <meta name=”format-detection” content=”email=no” />
    <meta name=”format-detection” content=”address=no;”>
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
    <meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
    <link rel=”apple-touch-icon-precomposed” href=”http://pic2.58.com/m58/img/icon58b.png” />
    <link rel=”apple-touch-startup-image” href=”http://pic2.58.com/m58/img/icon58b.png” />

    以上各个属性及值的意义也很直观,不懂的可在网上查询了解。

    5、为了兼容低版本的android和ios系统,在编写html页面时尽量少用或不用html5新增标签,页面结构简洁,标签嵌套合理,尽量减少不必要的多层嵌套;

    6、由于客户端app的head和foot区域均为native实现,只有内容区域是web,在body标签内统一添加<div id=”ct”>content</div>;(注:只是建议)

    ****************** css篇 *****************

    1、webview,目前我们的页面只在webkit上做兼容,对于特殊的css编写必须加上“-webkit”前缀;

    2、目前css3新增了比较实用的属性,在webkit上可以使用,可减少对背景图片的依赖比如:
    处理背景渐变效果可用:background:-webkit-gradient(linear,0% 0%,0% 100%,from(#f9fbfc),to(#edeff1));
    处理某个元素的移动旋转可用:-webkit-transform:rotate(360deg)
    等等…

    3、在编写css时尽量避免使用 float 属性,如遇到左右浮动布局,可用以下代码替代:
    在此样式display:-webkit-box;下的元素会在同一行上显示,还可以继续扩展,用新增的属性做更多的配置,具体可在网上查询了解。

    4、处理css所用到的背景图时,为了提高图片的显示质量可选择使用png24的图片格式,对于颜色值较少的图标可选择使用png8的图片格式;

    5、可延续pc端的方法使用图片整合来减少http的请求,建议在整合图片时分类处理;

    6、给统一添加的“ct”div设置样式:
    #ct{100%;height:auto;overflow:hidden;}
    注:为了适配不同分辨率下的机型,给“ct”设置宽度为100%,页面会根据不同分辨率自动缩放,页面中的个性化适配也可借助js来完成。

    ****************** js篇 *****************

    1、目前客户端3.0的前端页面是用jqmobi 1.0 作为基础框架,即每个模版页都要引用此框架;
    此框架的使用方法和jquery是一样的,会用jquery就会使用它,(注:我们在用)

    2、事件注册,移动端的设备均为触摸操作所以在注册事件时建议使用touch事件,目前android 和ios支持的touch事件有以下几种:
    touchstart,手指触摸到屏幕上时触发
    touchmove,手指在屏幕上移动时触发
    touchend,手指离开屏幕时触发
    touchcancel,系统取消或中断操作时触发
    还有一些其他事件比如 监听旋转事件,缩放事件等等,可根据需求合理应用

    3、由于移动端的浏览器和webview对js的执行性能稍显微弱,尽量避免使用js过于频繁的操作dom元素;

    4、由于3g,2g网络存在不稳定性等原因,尽量避免过多的ajax异步请求,尤其是大数据量的请求;

    5、webview内的页面滚动处理采用系统默认滚动,避免使用js模拟处理滚动效果,android性能极差;

    以上是我经历这个项目后总结的一些经验和技巧,有不合理之处欢迎提出指正,以后也会有更多的内容分享给大家!

  • 相关阅读:
    《SpringBoot揭秘 快速构建微服务体系》读后感(二)
    《SpringBoot揭秘 快速构建微服务体系》读后感(一)
    《Java多线程编程核心技术》读后感(十八)
    4.Go-结构体、结构体指针和方法
    3.GO-项目结构、包访问权限、闭包和值传递引用传递
    3.Flask-SQLAlchemy
    3.django Model
    2.深入类和对象
    2.shell编程-函数的高级用法
    mysql命令
  • 原文地址:https://www.cnblogs.com/youngforlife/p/2817801.html
Copyright © 2011-2022 走看看