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

96
小豌豆书吧
2017.10.11 21:55* 字数 644

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

前端汇总
Web note ad 1