按照现在主流的做法,采用响应式设计,应该不在区分移动端和PC端,但由于项目历史遗留的问题,或者说为了开发速度,还是需要单独的移动端设计。其实我觉得单独的移动端开发也有好处,可以充分利用移动端的各种设计模式以及用户使用习惯,最大限度的使用移动框架的各种组件。
本项目采用了分开的设计,看一下项目总体目录结构:
移动端的代码都在app_m下面,里面的目录结构和app几乎一样,但可以省略一些文件,直接去引用app下面的文件,后面在说。
先看程序加载的时候需要进行哪些区分(index.jsp):
BrowserDetect.init(); window.isMobile=BrowserDetect.isMobile; if(window.isMobile){ loadCss("static/css/angular-material.min.css"); loadCss("static/css/style-cloud-platform-admin-m.css"); } else{ loadCss("static/css/style.css"); loadCss("static/css/style-cloud-platform-admin.css"); }移动端使用的是angular material库;PC端使用的是bootstrap库,bootstrap的css都压缩到了style.css中了。
然后最重要是requirejs的config文件配置:
(function(window){
var appPath=window.contextPath+ '/static/js/'+(window.isMobile?'app_m':'app')+'/';
var globalConfig = {
modulesPath: appPath + 'modules',};
window.globalConfig = window.globalConfig || globalConfig;
})(window);
requirejs.config({
baseUrl: window.globalConfig.appPath,paths:{
'modules': globalConfig.modulesPath,......
在配置文件里需要动态的设置路径,然后把modules路径映射到app_m下,用define引入依赖的时候,一定要使用modules路径打头,这样requirejs就可以正确去加载对应的文件了。
在app_m下的app,js里,需要针对移动的库做一些特殊的配置,剩下几乎和app目录下的app.js一样,这里确实会有很多重复的代码,应该可以进行优化。
还有就是在移动端的controller里面可以直接引用PC的service代码:
'modules/../../app/modules/hardware/server/server.service'比如同样在hardware的server.controller里面,通过上面的路径用define方式,就可以把PC端的service文件引入进来了,因为service都是一样的。 现在的趋势确实是响应式设计比较流行,所以还是应该尽量采用它,上面这种分开的设计,尽量在迫不得已的情况下使用。