HTML5+app开发学习之快速入门篇

最新推荐文章于 2025-03-24 16:55:49 发布

cug-jdc

最新推荐文章于 2025-03-24 16:55:49 发布

阅读量5.4k

点赞数 2

分类专栏： H5+app开发文章标签： H5+app HTML5 跨平台移动开发 Hbuilder

本文链接：https://blog.csdn.net/qq_19924321/article/details/108668286

版权

HTML5+app开发学习之快速入门篇

5+app开发概念理解相关
开发环境与支持
快速入门实战

5+app开发概念理解相关

见博文：学习跨平台移动应用开发必须理解的一些概念

开发环境与支持

开发环境
HBuilderX，HBuilderX内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案，具有如下特点：

内置HTML5+ API语法提示，提高开发效率；
集成真机运行环境，方便开发后即时在真机上查看运行效果；
集成应用云端打包系统，不用部署xcode和Android
sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。

下载地址：http://www.dcloud.io/

平台支持
iOS 8.0及以上
Android 4.4及以上

快速入门实战

创建HelloWorld应用
启动HBuilderX
在菜单栏中选择“文件”-> “新建”->“项目”，打开“新建项目”对话框，选择“5+ App”，在项目名称中输入“HelloWorld”，选择模板中勾选“默认模板”

注意： 新建5+ App项目需要联网分配一个appid，在真机联调、打包发行时都需要这个ID，所以不联网将无法获取appid。
创建完成后，会在项目管理器中显示新建的“HelloWorld”项目。

配置环节
在项目管理器中双击“manifest.json”文件，打开应用配置页面：

对于要打包的原生应用而言，其各种配置均在此处。具体配置教程见：Manifest.json文件配置，或者点击配置页面上的“配置指南”链接。

调用HTML5+ API
在项目管理器中双击“index.html”文件，对于HTML5+应用的页面有一个很重要的“plusready”事件，此事件会在页面加载后自动触发，表示所有HTML5+ API可以使用，在此事件触发之前不能调用HTML5+ API，所以应该在此事件回调函数中调用页面初始化需要调用的HTML5+ API，而不应该在onload或DOMContentLoaded事件中调用：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

最低0.47元/天解锁文章