网易移动前端已经实践近4年的移动端适配各种屏幕无痛工具脚本,设计给你的稿子是什么就怎么切,无需特殊处理,页面viewport设置成设计给的宽度,调用fixViewportWidth()即可。 Oapp 原理请查看 O网页链接 另外PPK去年的书也有详细分析。

Prereqs and installation requirements

1.install node and Python.

2.install yeoman.

npm install -g yo

3.[optional]Clone this git repo to your local,and from the root of the repo,run

npm link

to developing the generator locally.

Generator commands

1.generate a new project,run

mkdir myProject
cd myProject
yo webappstarter

or run with --skip-install option to skip install dependencies

mkdir myProject
cd myProject
yo webappstarter --skip-install

install dependencies manually with npm install or just copy node_modules folder from another project which was generated by webappstarter.

2.generate a new module,run

//this command will do:
//add "html/include/view-modulename.html" and inlude it to "html/include/views.html"
//add "scss/_view-modulename.scss" and import it to "scss/_view.scss"
//add "src/app/view/ModuleNameView.js"
//add "src/app/controller/ModuleNameController.js" and require it in src/app/App.js

yo webappstarter:module ModuleName

3.generate a new model,run

//this command will do:
//add "src/app/model/ModelNameModel.js"

yo webappstarter:model ModelName

4.update your project’s boilerplate and structure

//this command will update
//"./src/core" directory
//"./src/lib" directory
//"./src/util" directory
//"./src/widget" directory
//some files in "./src/app/" directory
//some files in "./scss/" directory
//some files in "./html/" directory

yo webappstarter:update

Warning: When you are asked before an overwrite can occur,please be careful.Default “Y” is overwrite,”n” is skip.

More configurations,please take a look at “project” property of “package.json” file after the generator is done. Run gulp to re-build project is required after change the “package.json” file.

Project commands

run this command before you get started.

npm install -g gulp

1.build project,watch change and start browserSync,run

gulp

or run with forever

forever ./node_modules/.bin/gulp