笔记

9.28
利用grunt搭建了一个静态文件服务器，并添加了浏览器自动打开页面+监听自动刷新

"connect-livereload": "~0.5.3",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-connect": "~0.10.1",
"grunt-open": "~0.2.0"

 引入模块加载器require.js

 

9.29
根据UI稿标注，确定了移动端元素大小的自适应方案。
使用rem，因为chrome移动端模拟器只能支持最小6px的字号，考虑到调试和方便计算：
    以二倍屏&&html{font-size：10px}&&全屏宽度==(设计稿px宽/10/2)个rem为css取值基准

//UI 是640的标注
document.documentElement.style.fontSize=window.innerWidth/32+'px';
//UI稿640=DPR*maxWidth (window.devicePixelRatio)
//设屏宽320px=32rem，屏宽分成32rem,1rem=10px 

//标注上所有px，基于公式[css=标注/20]转换为css的rem

 

10.10
解决本地开发环境调用server端接口的跨域问题，暂用Access-Control-Allow-Origin *

10.21
打通分享再呼起进入的流程，交互demo部署测试环境；

10.23
include file等功能纯html无法实现，调研尝试使用服务端语言php、nodejs、shtml

10.25
基于项目需求和技术风险考虑，决定放弃使用服务端语言，调研并测试成功以下前端解决方案：
nodejs-express-ejs-supervisor服务端环境开发，grunt-ejs编译发布为静态化文件html，自定义config.json保存js&&css静态文件Root等等

10.26
code1—code2调用native—code3
ios可以顺利执行code1，native，code3
Android只执行code1，native
呵呵，Android同步执行也就罢了，code3竟然也给我断掉了。解决，settimeout搞成延时异步。

11.30
静态服务添加代理grunt-connect-proxy 完美解决开发跨域问题

11.2
安装sass，添加grunt编译，添加connect中间件即时编译，加入监听
    不想用ruby，在git上发现可以用node-sass && grunt-sass

    npm源管理http://segmentfault.com/a/1190000000473869
    http://snoopyxdy.blog.163.com/blog/static/60117440201422695653698/
    真是日了狗了，node-sass费劲周折又是nrm换源又是换代理的总算是装上了，配置了outFile之后竟然不会自动写文件，还要我手动调用fs，醉了...
    好在找到了grunt-sass，再给connect配上node-sass-middleware，即时编译即时刷新，非常完美

//node-sass 安装测试

var sass = require('node-sass');
var fs= require('fs');
var outFilePath="a.css";
sass.render({
    file: "a.scss",
    // sourceMap: true,
    outputStyle: 'compact',//nested expanded compact compressed
    outFile: outFilePath
}, function(err, result) {
    console.log(result.css.toString());
    if(!err){
      // No errors during the compilation, write this result on the disk
      fs.writeFile(outFilePath, result.css, function(err){
        if(!err){
          //f ile written on disk
        }
      });
    }
});

    var sassMiddleware = require('node-sass-middleware');
    var sassSnippet = sassMiddleware({
        /* Options */
        src: "build/scss/", //请求为xx.css的时候，会在这个文件夹里寻找xx.scss,并编译出xx.css放到dest中
        dest: "build/css/", //dest未设置时，默认为src
        debug: true,
        outputStyle: 'compact',
        prefix: '/build/css' //html引入的<link rel="stylesheets" href="css/home.css"/>中需要忽略掉的父目录(该中间件会判断xx.css的文件，全部去dest里定义的路径里去取，所以此处需要设置忽略)(绝对目录"/"一定要带着)
    });

 

11.4 
node-sass-middleware不爽，多终端多页面打开时，监听到scss修改会同时刷新所有页面，这会导致sass会同时编译N次
需要去掉中间件，搞成监听scss，编译css，刷新页面

11.6
解决单个页面内，不同业务状态下，多元素显隐控制逻辑

1

 

 

 

 

 

adf