跨平台APP----使用DCloud公司产品跨平台开发(系列三)

前言：

随着跨平台开发越来越流行，像DCloud这种平台还会越来越多。 --------谷震平

一 概述

我（个人观点）已经分析了Hybrid开发模式的优缺点，也分析了使用该模式的平台的优缺点。所以，选择了DCloud这样的平台。为什么？？？每个人有每个人的选择。我只能告诉你，DCloud适合我这个程序员。

学习路线：



准备工作1：学习HTML5/CSS3/JS
请参见网上视频教程，可登陆极客学院等在线教育网站。

准备工作2：学习HTML5 plus
参见学习网站 http://www.html5plus.org/doc/zh_cn/accelerometer.html
或者登陆：http://ask.dcloud.net.cn/docs/

准备工作3：了解HTML5 plus Runtime和HTML5 plus SDK
参见http://ask.dcloud.net.cn/docs/

准备工作4：下载HBuilder
下载地址：http://www.dcloud.io/index.html
此工具作为前端开发工具，不需要配置环境。打包APP，可在云端执行。离线打包手册，后续给出。

准备工作5：新建项目
HBuilder工具使用视频：http://edu.yuantuan.com/course/87 《DCloud基础班之玩转HBuilder》
HBuilder项目开发实战视频：http://edu.yuantuan.com/course/98 《DCloud项目实战之极速开发新闻客户端》

二 具体实施

【此处演示在Mac上的操作，使用HBuilder版本为6.7.1】

1 打开HBuilder之后，进入如下界面



2 在左侧新建项目



3 请选择“移动APP”，将会弹出如下界面



4 填上应用名称，然后去选择模板，一共有5个选择，3个模板，2个示例，都有相应介绍。

先选择Hello mui示例，确定以后，项目管理器将有新建的项目《DCloud开发APP教学例程》【不建议用中文】。



5 对上面的项目结构目录解析如下：
css 放置该项目使用过的样式表
example 放置本示例中所用HTML页面（也就是手机页面）
fonts 目前不用管，里面只有一个tff文件
images 里面是本项目中使用的所有图片
js 放置本项目中所使用的一些JS库和文件
libs 放置了一些开发环境包和库，有jQuery的、json的等等
manifest.json是手机APP的配置文件，有改入口文件，添加权限等功能
还有就是几个HTML文件了，index.html是首页，也是入口文件。其余不再解释。

6 选择index.html打开，理清本项目的相关运行机制。因为是官方网站的项目，所以不会有错误。

7 打包运行
在windows系统上，需要装手机模拟器，去云端打包好下载到本地，拖到模拟器中即可。也可以真机调试，和Andriod原生开发一样。
在Mac系统上，使用自带的iOS开发模拟器即可。也可以插上数据线连上手机，Hbuilder可自动识别，加载刚开发的项目。
去选择“运行”->”手机运行”，点击模拟器即可。







8 在Mac自带的模拟器体验APP运行