技术说明
一、前端技术
1、页面搭建
前端页面搭建使用html5+css3+js的方式，使用的框架有mui、jquery等，还有一些其他工具框架进行辅助，主要功能是实现移动端的页面展示，并且能兼容浏览器内核。手机网页开发。这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。
前端页面搭建使用html5的方式，编码格式为utf-8，采用viewport的方式自适应移动端和端的显示
首先创建一个index.html文件，前端页面以这样的方式搭建。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="numDiv">0</div>
<button type="button" id="start">start</button>
<button type="button" id="stop">stop</button>
</body>
</html>
其次，创建一个count.js文件：
var countNum = 0;
function count(){
    postMessage(countNum);
    countNum++;
    setTimeout(count,1000);
}
count();
再创建一个index.js文件
var numDiv;
var work = null;
load = function () {
    numDiv = ElementById('numDiv');
    ElementById('start').onclick = startWorker;
    ElementById('stop').onclick = function () {
        if(work){
            inate();//停止，释放掉资源
            work = null;//work重新初始化
        }
    };
};
function startWorker(){
    if(work){
        return;
    }
    work = new Worker('count.js');
    ssage = function (e) {
        numDiv.innerHTML = e.data;
    };
}
2、页面兼容性及渲染
不滥用Float
Float在渲染时计算量比较大，尽量减少使用
不滥用Web字体
Web字体需要下载，解析，重绘当前页面，尽量减少使用
不声明过多的Font-size
过多的Font-size引发CSS树的效率
减少重绘和回流
a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 减少drawImage
Viewport可以加速页面的渲染，请使用以下代码
< meta name=”viewport” content=”width=device-width, initial-scale=1″>
动画优化
a) 尽量使用CSS3动画
b) 合理使用requestAnimationFrame动画代替setTimeout
c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
GPU加速
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用
PS：过渡使用会引发手机过耗电增加
3、meta相关总结
HTML5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
    <meta name="apple-mobile-web-app-capable" content="yes" />
   
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
4、逻辑处理
在页面中实现的页面主要有以下几类：
（1）列表的展示
通过查询后台数据在前端页面实现列表的展示，以【业务审批】为例，业务审批页面为当前用户或者是当前管理者下边待审批的业务列表，这个列表是在页面初始化的时候通过向后台传输用户唯一标识（openid），查询出当前用户所属的所有业务，然后以json串的方式返回前端，在前端取出json串采用循环的方式将列表展示在页面。
（2）单个业务的详查
以【业务审批】为例，在这个列表页面，点击单条记录的时候通过传递当前业    务号来查询这个业务的详细信息，并展示到详情页面。
（3）业务的操作
在业务的详情页面，通过对当前页面的信息增加，并对当前业务进行审批通过、回退等具
体操作向后台发送业务状态，完成业务的操作。
（4）用户的绑定
jsp用什么前端框架
用户在菜单的每一个按钮都会绑定触发获取用户身份的操作，如果获取当前的用户身份没有对第三方的系统绑定，则调到绑定用户身份的页面，在这个页面通过向后台发送绑定用户的信息，进行绑定，绑定之后则每次都可以查询到用户的信息。如果用户要求解绑，在【我的信息】中有对用户解绑的操作，从而对用户解除绑定。
（5）不需要验证用户信息的页面
工具箱和一些推送消息的按钮，不需要获取用户身份，只是给用户提供一些工具性的页面。
二、后台技术
1、后台参数传递说明
前端项目和后台项目可以放到一个服务器，把页面作为移动web页面来处理，通过在
页面中使用调用后台的方法，ajax等一些异步传输的方式，获取前端页面需要的参数，来对页面进行填充。
前端页面可以是jsp页面，也可以是纯html页面，传递参数的时候需要在同域服务器下，对服务器请求以及返回参数。
服务器端可以使用webservice的方式发布服务，前端通过调用服务来返回数据。或者服务器使用其他Struts框架，那么前端使用ajax的方法来获取数据。
2、后台说明
用户验证用户身份，需要在回调地址写一个servlet用于获取用户的openid，具体的操作是，在前端诱导用户触发授权地址，由服务器重定向到后台的回调地址中，这个地址带code和当前业务标识，在servlet中通过获取access-token和code，通过访问接口地址获取userid，再通过userid换取openid，通过openid和当前的业务标识，来重定向到具体的前端页面，并将openid传到前端页面，进行下边的操作。
3、系统后台逻辑处理
在租赁系统中，后台提供区别于不同交易的接口，不同的业务处理，使用不用的逻辑方法，在前端使用方法的时候，为前端提供需要调用的方法，通过调用当前方法，接收前端参数，对参数进行判断、逻辑处理、数据查询等操作，最后再通过json的形式传给前台。
后台系统可以使用不同的框架进行开发，可以是发布webservice的方式，或者是Struts等发布servlet的方式，前端根据后台框架，采用不同的处理方式对后台进行访问，后台采取相对应得方式对前端的数据提取和处理。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。