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

灰太狼 2022-07-16 10:43 436阅读 0赞

## 前言： ##

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

## 一  概述 ##

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

学习路线：

![Center][]

准备工作1：学习HTML5/CSS3/JS

请参见网上视频教程，可登陆极客学院等在线教育网站。

准备工作2：学习HTML5 plus

参见学习网站 [http://www.html5plus.org/doc/zh\_cn/accelerometer.html][http_www.html5plus.org_doc_zh_cn_accelerometer.html]

或者登陆：[http://ask.dcloud.net.cn/docs/][http_ask.dcloud.net.cn_docs]

准备工作3：了解HTML5 plus Runtime和HTML5 plus SDK

参见[http://ask.dcloud.net.cn/docs/][http_ask.dcloud.net.cn_docs]

准备工作4：下载HBuilder

下载地址：[http://www.dcloud.io/index.html][http_www.dcloud.io_index.html]

此工具作为[前端开发][Link 1]工具，不需要配置环境。打包APP，可在云端执行。离线打包手册，后续给出。

准备工作5：新建项目

HBuilder工具使用视频：[http://edu.yuantuan.com/course/87][http_edu.yuantuan.com_course_87]  《DCloud基础班之玩转HBuilder》

HBuilder项目开发实战视频：[http://edu.yuantuan.com/course/98][http_edu.yuantuan.com_course_98]  《DCloud项目实战之极速开发新闻客户端》

## 二 具体实施 ##

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

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

![Center 1][]

2 在左侧新建项目

![Center 2][]

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

![Center 3][]

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

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

![Center 4][]

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

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

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

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

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

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

libs  放置了一些开发环境包和库，有[jQuery][Link 1]的、json的等等

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

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

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

7 打包运行

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

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

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

![Center 5][]![Center 6][]

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

![Center 7][]

[Center]: /images/20220716/5ba80208c0ca451d9c6e9578c7f71e9e.png
[http_www.html5plus.org_doc_zh_cn_accelerometer.html]: http://www.html5plus.org/doc/zh_cn/accelerometer.html
[http_ask.dcloud.net.cn_docs]: http://ask.dcloud.net.cn/docs/
[http_www.dcloud.io_index.html]: http://www.dcloud.io/index.html
[Link 1]: http://lib.csdn.net/base/22
[http_edu.yuantuan.com_course_87]: http://edu.yuantuan.com/course/87
[http_edu.yuantuan.com_course_98]: http://edu.yuantuan.com/course/98
[Center 1]: /images/20220716/d3daad30d8ae468282ac81760ebfaa6a.png
[Center 2]: /images/20220716/7e15cbb81f89482cb0cd1d2e7541599d.png
[Center 3]: /images/20220716/514fa3ce147042b99601b6c4b3bbdf0d.png
[Center 4]: /images/20220716/2f5fd30a47334d10904447f8433e006f.png
[iOS]: http://lib.csdn.net/base/1
[Center 5]: https://img-blog.csdn.net/20160111154955886?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: /images/20220716/6e61bb742d8b4725b6307e086abc15e4.png
[Center 7]: /images/20220716/bda59df982914c0e9e5578bbade2b117.png