跨平台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 RuntimeHTML5 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之后,进入如下界面




在左侧新建项目





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





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

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





对上面的项目结构目录解析如下:

css  放置该项目使用过的样式表

example  放置本示例中所用HTML页面(也就是手机页面)

fonts 目前不用管,里面只有一个tff文件

images  里面是本项目中使用的所有图片

js  放置本项目中所使用的一些JS库和文件

libs  放置了一些开发环境包和库,有jQuery的、json的等等

manifest.json是手机APP的配置文件,有改入口文件,添加权限等功能

还有就是几个HTML文件了,index.html是首页,也是入口文件。其余不再解释。


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


7 打包运行

windows系统上,需要装手机模拟器,去云端打包好下载到本地,拖到模拟器中即可。也可以真机调试,和Andriod原生开发一样。

Mac系统上,使用自带的iOS开发模拟器即可。也可以插上数据线连上手机,Hbuilder可自动识别,加载刚开发的项目。

去选择运行”->”手机运行,点击模拟器即可。

 

 



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

 

 


发布了59 篇原创文章 · 获赞 185 · 访问量 47万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章