HTML5+ 入门教程

HTML5+ 入门教程

一、HTML5+ 简介

HTML5+ 是中国 DCloud 公司推出的基于 HTML5 的扩展规范，它扩展了 JavaScript 的能力，使开发者可以调用原生功能如摄像头、地图、支付等，同时保持跨平台特性。

二、环境准备

1. 安装 HBuilderX

HBuilderX 是 DCloud 推出的 HTML5+ 开发工具，下载地址：https://www.dcloud.io/hbuilderx.html

2. 创建项目

1. 打开 HBuilderX
2. 文件 → 新建 → 项目
3. 选择 “5+App” 项目类型

三、基本结构

一个基本的 HTML5+ 应用目录结构如下：

myapp/
├── css/            # 样式文件
├── img/            # 图片资源
├── js/             # JavaScript 文件
├── manifest.json   # 应用配置文件
└── index.html      # 主页面

四、manifest.json 配置

这是应用的配置文件，示例：

{
    "name": "MyApp",
    "appid": "__UNI__XXXXXX",
    "description": "我的第一个HTML5+应用",
    "versionName": "1.0.0",
    "versionCode": "100",
    "plus": {
        "distribute": {
            "android": {
                "permissions": [
                    ""
                ]
            }
        }
    }
}

五、HTML5+ API 使用

1. 设备信息

document.addEventListener('plusready', function() {
    // 获取设备信息
    var device = plus.device;
    console.log("设备型号: " + device.model);
    console.log("设备厂商: " + device.vendor);
    console.log("UUID: " + device.uuid);
});

2. 摄像头调用

function captureImage() {
    plus.camera.getCamera().captureImage(function(path) {
        console.log("拍照成功: " + path);
        document.getElementById('preview').src = path;
    }, function(error) {
        console.log("拍照失败: " + error.message);
    });
}

3. 地理位置

function getLocation() {
    plus.geolocation.getCurrentPosition(function(position) {
        console.log("经度: " + position.coords.longitude);
        console.log("纬度: " + position.coords.latitude);
    }, function(error) {
        console.log("定位失败: " + error.message);
    });
}

4. 本地存储

// 存储数据
plus.storage.setItem('username', '张三');

// 读取数据
var username = plus.storage.getItem('username');
console.log(username);

// 删除数据
plus.storage.removeItem('username');

六、UI 组件

1. 原生 Toast

function showToast() {
    plus.nativeUI.toast("这是一个提示消息", {
        duration: "short",
        verticalAlign: "bottom"
    });
}

2. 等待对话框

var waiting = null;

function showWaiting() {
    waiting = plus.nativeUI.showWaiting("加载中...");
}

function hideWaiting() {
    if (waiting) {
        waiting.close();
    }
}

七、打包发布

1. 在 HBuilderX 中，点击 “发行” → “原生App-云打包”
2. 选择平台（Android/iOS）
3. 配置打包选项
4. 点击 “打包” 按钮
5. 下载打包后的安装包

八、进阶功能

1. 扫码功能

function scanQRCode() {
    plus.barcode.scan(function(result) {
        console.log("扫描结果: " + result);
    }, function(error) {
        console.log("扫描失败: " + error.message);
    }, [plus.barcode.QR]);
}

2. 文件操作

function writeFile() {
    plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
        fs.root.getFile("test.txt", {create: true}, function(fileEntry) {
            fileEntry.createWriter(function(writer) {
                writer.write("Hello HTML5+");
                console.log("文件写入成功");
            });
        });
    });
}

3. 网络请求

function requestData() {
    var xhr = new plus.net.XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://api.example.com/data");
    xhr.send();
}

九、调试技巧

1. 真机调试：连接手机，在 HBuilderX 中选择 “运行” → “运行到手机或模拟器”
2. 控制台日志：使用 console.log() 输出日志
3. 远程调试：Android 可以使用 Chrome 远程调试，iOS 使用 Safari 远程调试

十、注意事项

1. 所有 HTML5+ API 调用需要在 plusready 事件之后
2. 敏感权限需要在 manifest.json 中声明
3. 不同平台可能有差异，需要进行兼容性测试

结语

HTML5+ 结合了 Web 开发的便捷性和原生应用的功能性，是开发跨平台移动应用的有效解决方案。通过本教程，你已经掌握了 HTML5+ 的基本使用方法，接下来可以通过实践项目来巩固这些知识。