财新数据可视化实验室前端工程师卢达分享，可视化项目 平安银行2014年度“体检报告” 的开发经验。他为大家介绍必备工具，一步一步剖析开发过程，更偷偷传授秘笈。文字信息密度极高，助你快速理解开发思路。
作者：财新数据可视化实验室 前端工程师 卢达
项目概述
项目名称：平安银行2014年度“体检报告”
项目目标：在移动端，以纵向翻页的形式，展示平安银行2014年度主要数据和业务介绍。
必备工具和使用的技术
开发语言：HTML5、CSS3、JavaScript
使用类库：jQuery.js、Swiper.js、jWeixin.js
开发工具：SublimeText2、Chrome、PhotoShop
开发过程
一、准备工作：
1. 与设计师确定总体的展现形式和需求，确定开发量、可行性以及所使用的工具。
2. 确定动画部分完全使用CSS3。翻页使用Swiper.js类库实现方案。
引入相关类库
jQuery.js主要用于快捷的编写相关基础程序。
Swiper.js实现翻页的主程序。
jWeixin.js实现自定义微信分享信息的功能。（此功能需要后台人员配置服务器）
3. 拿到设计草图，整理页面的展示思路。
4. 编写基础代码，测试基本功能。
二、深入开发：
1. 将设计图按需求，分别制作成相应的文件。
按动画需求将设计图中的图层，分别存为相应的图片文件。
合并背景图，以减少请求数和图片的加载时间。
2. 分析代码和样式可以共用部分，编写相关代码（如每页的标题和结论）。
3. 每页单独编写代码和测试。
编写封面动画代码。
编写第一版前两页“头脑敏捷，频出创新风暴”和“四大动力源造就一颗大心脏”代码:
这两页的内容都分为多个页面，所以采取了自动+手动横向滑动切换的效果。（后因需求改为多页直接纵向滑动翻页）
编写其他页面代码：
动画使用CSS3来实现。
图表（如柱状图等）使用CSS，按照数据的相对数值来控制样式。
4. 合并单页代码，生成主页面并调试。
翻到当前页时，动画才开始播放。这里利用CSS后代选择器的特性。判断动画是否播放。
将程序传到测试服务器上，使用相应手机对页面进行测试，主要测试样式是否正确、运行是否流畅。（测试机主要有：iPhone4S、5S、6、6plus，三星S3、Note2等）。
修改已发现的BUG。
三、收尾工作：
1. 增加页面的相关提示信息（如翻页提示等）。
2. 增加Loading页面，增加有好度（Loading页面主要用于，首页包括主程序、首页图片等加载完成后，再显示首页，避免用户看到不完整的页面）。
3. 添加分享信息，测试相关功能。
4. 完成后提交到测试服务器，给设计人员和客户测试。
5. 根据修改意见调整代码。
：）项目上线！
经验总结
使用CSS来实现动画，减少JS的操作，可以提高代码的执行效率。
图片使用背景图合并的方法，可以减少页面加载时间。
Loading页面的加入，可以避免用户看到不完整的页面，提高用户体验。
熟练使用好类库可以减少开发时间。
开始开发之前确定好总体需求，分析页面的通用部分，可以事半功倍。
关于这个问题，还是看看官网是怎么说的吧:
翻译一下：
听上去蛮不错的，那么我们就开始用它来做一个app吧！
创建应用
如果按照Cordova( http://cordova.apache.org/ )官网所述，直接用npm全局安装 cordova ，并创建应用，你可能遇到以下错误：
此时不要紧张，卸载 cordova ，使用 yarn 重新安装一下，猜测可能和npm版本不兼容。
安装好 yarn 和 cordova 之后，使用cli命令 cordova create MyApp 创建project，此时你可能会遇到以下错误：
这是什么原因呢？
原来我们没有将 yarn 的bin目录加入到环境变量 path ，作为一个Windows僵尸粉，判断出这点还是不难的。执行以下命令，找到 yarn 的bin目录所在：
将 d:\Users\gy.wang\AppData\Local\Yarn\bin 此目录添加到windows环境变量 path
配置好环境，重新打开CLI窗口，我们终于可以顺利地创建 cordova 应用，cordova使用默认模板创建好一个Project。
添加Android平台
在项目根目录下，运行命令 cordova build android 来编译你的项目，你可能遇到以下错误：
原因是啥呢？当前cordova要求的Android版本比较高，需要安装 Android SDK Platform 25 才能顺利编译，怎么办？ 装！
打开 Android Studio , 安装SDK
安装成功之后，执行命令 cordova build android ，这次终于成功了！
APK包成功打好，这次我们运行一下，执行命令：
这次我们会遇到 环境坑四
不急，仔细看报错信息的意思是没有可用的设备或模拟器。这个简单，打开Android Studio添加一个:
再次运行 cordova run android ， 哈！ 这次成功了！
什么！闪退！WTF!
运行命令 cordova run android ，将APK包安装到模拟器上结果又报错了！
离成功就差一步了，别泄气！我们慢慢查找原因~
至此，APP终于搞定了！
