HTML5 Plus在HBuilder中怎么配置SDK与权限实现原生功能

HTML5 Plus是HBuilder提供的扩展能力，能够让前端代码调用移动设备的原生功能，比如摄像头、定位、本地存储等。要实现这些能力，需要在HBuilder中完成SDK和权限的相关配置。

一、创建支持HTML5 Plus的项目

首先打开HBuilder，点击新建项目，选择移动App类型，模板选择空模板或者Hello H5+模板，后者已经预置了部分HTML5 Plus的示例代码，适合新手快速上手。项目创建完成后，会在根目录生成manifest.json文件，这个文件是配置的核心入口。

二、配置HTML5 Plus SDK模块

打开manifest.json文件，切换到模块权限选项卡，这里可以看到所有支持的HTML5 Plus原生模块，比如Camera（摄像头）、Geolocation（定位）、Barcode（扫码）等。根据项目需要勾选对应的模块，勾选后HBuilder会自动将对应的SDK资源打包到应用中。

如果需要自定义SDK的配置，比如扫码模块的扫码类型，可以切换到代码视图，在plus节点下的modules中添加对应配置，示例如下：

{
    "name": "HelloH5",
    "short_name": "HelloH5",
    "plus": {
        "modules": {
            "Barcode": {
                "support": ["qr", "ean13"]
            }
        }
    }
}

三、配置应用权限

原生功能需要对应的系统权限才能正常调用，依然在manifest.json的模块权限选项卡中，勾选对应模块后，系统会自动添加基础权限。如果需要额外权限，可以切换到权限配置选项卡，手动添加Android和iOS的权限声明。

比如调用摄像头需要添加Android的android.permission.CAMERA权限，iOS的NSCameraUsageDescription权限，配置示例如下：

{
    "plus": {
        "distribute": {
            "android": {
                "permissions": [
                    "android.permission.CAMERA",
                    "android.permission.ACCESS_FINE_LOCATION"
                ]
            },
            "ios": {
                "plist": {
                    "NSCameraUsageDescription": "需要访问摄像头用于拍照",
                    "NSLocationWhenInUseUsageDescription": "需要访问位置信息用于定位"
                }
            }
        }
    }
}

四、验证配置是否生效

完成配置后，可以编写简单的测试代码验证原生功能是否可以正常调用。以下是调用摄像头拍照的示例代码：

// 调用摄像头拍照
function takePhoto() {
    // 检查HTML5 Plus是否就绪
    if (window.plus) {
        plus.camera.getCamera().captureImage(function(path) {
            // 拍照成功，返回图片路径
            console.log("拍照成功，图片路径：" + path);
            // 显示图片
            var img = document.getElementById("photo");
            img.src = plus.io.convertLocalFileSystemURL(path);
        }, function(error) {
            // 拍照失败
            console.log("拍照失败：" + error.message);
        });
    } else {
        // 等待plus就绪
        document.addEventListener("plusready", function() {
            takePhoto();
        }, false);
    }
}

将代码写入项目的index.html中，连接手机或者启动模拟器运行项目，点击触发takePhoto函数，如果能够正常打开摄像头并拍照，说明SDK和权限配置已经生效。

五、常见配置问题排查

• 如果调用原生功能时报错plus is not defined，需要检查是否在plusready事件后执行代码，或者项目是否正确创建了移动App类型。
• 如果权限申请不生效，需要检查manifest.json中的权限配置是否正确，Android打包时需要重新生成自定义基座，iOS需要检查plist配置的描述是否符合规范。
• 如果勾选了模块但功能依然无法使用，需要检查HBuilder是否为最新版本，旧版本可能存在模块兼容性问题。

HTML5_PlusHBuilderSDK配置权限配置修改时间：2026-07-08 20:27:14