uniapp plus

uni-app App 端内置 HTML5+ 引擎，能够让开发者在使用 JavaScript 编写代码的同时，调用设备原生功能，轻松实现跨平台开发。

条件编译调用 HTML5+

小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

// #ifdef APP-PLUS
var appid = plus.runtime.appid;
console.log(‘应用的 appid 为：’ + appid);
// #endif

uni-app不需要 plus ready

在html中使用plus的api，需要等待plus ready。 而uni-app不需要等，可以直接使用。而且如果你调用plus ready，反而不会触发。

uni-app 中的事件监听

在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现。

// #ifdef APP-PLUS
// 监听新意图事件
plus.globalEvent.addEventListener(‘newintent’, function(){});
// #endif

HTML5+ 引擎的核心功能

• 多视图模式：
  • 支持多页面渲染，类似于原生多 Activity 或多 ViewController 的管理方式。
  • 提供了快速页面切换的能力，性能接近原生。
• 丰富的原生 API：
  • 支持通过 plus 对象调用 HTML5+ 提供的原生 API。
  • 包括文件操作、蓝牙通信、GPS 定位、推送服务等。
• 扩展能力：
  • 支持通过 plus.nativeObj 绘制原生视图，增强 UI 表现力。
  • 可以加载原生插件（即 uni插件市场 中的插件或自行开发的原生插件）。
• 设备功能支持：
  • 完整封装了常见设备功能，如摄像头、传感器、陀螺仪、网络状态等。
• 离线支持：
  • 提供缓存能力和离线资源加载支持，适合弱网环境或完全离线的场景。

使用 HTML5+ 的场景

示例 1：调用原生功能

// 获取设备信息
console.log(plus.device.uuid);
console.log(plus.device.model);

示例 2：操作文件系统

// 创建目录
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
fs.root.getDirectory(‘test’, { create: true }, function(dirEntry) {
console.log(‘目录创建成功：’, dirEntry.fullPath);
});
});

示例 3：调用原生界面

// 启动原生分享功能
plus.share.sendWithSystem({
content: ‘这是一段测试文字’,
href: ‘https://example.com’
}, function() {
console.log(‘分享成功’);
}, function(e) {
console.log(‘分享失败：’, e.message);
});