2_移动端前端开发注意事项

移动端开发一般使用HTML5

3.移动端前端基础架构
单词释义：
a)mkdir: make directory 建立一个新的子目录（DOS命令）
2)cd: change directory 变更目录

创建目录结构:mobile>mkdir wxshop_sk ()
变更到目录wxshop_sk:mobile>cd wxshop_sk
创建static 目录：wxshop_sk>mkdir static
创建css目录：static/mkdir css [进入static: wxshop_sk>cd static]
创建images目录: static/mkdir images
创建js目录: static/mkdir js
创建sass目录: static/mkdir sass

变更到js目录：static/cd js
创建libs: js/mkdir libs
创建plugs: js/mkdir plugs
创建views: js/mkdir views

查看js目录下的文件/文件夹：js/dir
转到js上级目录static: js/cd ..

进到sass目录 : static/cd sass
创建libs: sass/mkdir libs
创建plugs: sass/mkdir plugs
创建layout: sass/mkdir layout
转到sass上级目录static: sass/cd ..
转到static上级目录wxshop_sk: static/cd ..

查看整个wxshop_sk的目录结构：wxshop_sk>tree

E:
    --static
      --css
      --images
      --js
        --libs
        --plugs
        --views
    --sass
        --layout
        --libs
        --plugs

涉及和需要学习知识：前端架构
推荐文章前端架构那些事儿：http://kb.cnblogs.com/page/210101/

4.sass对css的管理
安装ruby: http://rubyinstaller.org/
安装sass: gem install sass
或者安装Compass: gem install compass
acer>gem -v → 2.5.1

Sass语法：
演示:（window系统）
wxshop_sk>cd static
static>cd sass
sass>mkdir common
sass>cd common
创建一个scss文件：
common>cd.>test.scss
生成css文件：
common>sass test.scss test.css
查看文件内容：
common>type test.css

5.requirejs模块化加载js
参考文章：http://www.haorooms.com/post/js_require_zz

6.固定头部制作.

1、思考制作方式：

-1）图片字体库制作
-2）图片制作
****图片切图--雪碧图（减少http请求）***

2、统一的模板（所有页面共有的）

3、页面布局（细节把控）

-1）html布局

4、css页面制作

-1）细节、知识点

5、举一反三，制作同类导航

<br />

7.微商城slide图片制作

1.、能够制作slide图片
2.学会使用swiper插件：http://www.swiper.com.cn/api/

8_商品列表页面制作

知识点：
1、用sass写transform 见http://www.jianshu.com/p/bec8add113d4
2、弹性盒子布局：http://www.jianshu.com/p/42e66bca482b
3、移动端尽量使用rem：http://www.jianshu.com/p/c491ac12082f
4、css实现小三角:http://www.jianshu.com/p/04f5adc8885c
5、sass @mixin方式改变小三角上边框的颜色：http://www.jianshu.com/p/5c293267c822

移动前端开发项目学习记录