html5plus学习

前端 > App开发 App开发

发布时间 : 2025-05-16 15:23

阅读 :

一、介绍
1. 1.相关概念
2. 1.html5plus介绍
二、使用
1. 1.uniapp开发的App端使用（内置html5+引擎）
三、项目中使用的技术

一、介绍

1.相关概念

webview容器：作为混合开发的载体，HTML5Plus通过WebView实现原生能力扩展

1.html5plus介绍

概念：网页技术（html/css/js）+ 手机原生能力调用
用途（当用H5开发App时，需要调用摄像头、文件系统等原生功能，又不想写Java/Swift代码）
- 弥补H5的短板（扫码，读取文件）
- 让网页应用接近原生体验（使用原生弹框，状态栏沉浸式效果）
- 快速开发跨平台App（一套代码同时生成Android和iOS安装包，无需学习Java/Swift）
使用条件（H5+技术打包的原生应用中可用）
- uni-app打包的原生App
  - 所有vue页面可以直接使用plus
  - 通过<web-view>加载内嵌h5项目
- 5+App项目：通过HBuilder打包的5+App项目，底层集成了5+ Runtime引擎，该引擎在App启动时向所有Webview注入全局plus对象，使HTML/JS可直接调用设备原生API
- 动态创建的 Webview（待验证）
  - 通过 plus.webview.create() 创建且配置 plusrequire: “all”
```
    // UniApp或5+App中动态创建Webview
    const wv = plus.webview.create(
        'https://your-h5-page.com', 
        'custom-webview',
        { plusrequire: 'all' }  // 关键配置：允许H5使用plus API
    );
    wv.show(); // 显示Webview
```
- 原生App集成5+SDK（已有原生App需嵌入H5页面并调用设备能力）

二、使用

1.uniapp开发的App端使用（内置html5+引擎）

注意：
- 条件编译使html5+：小程序及h5没有html5+扩展规范
- uni-app不需要 plus ready，在html中使用plus的api，需要等待plus ready
- 事件监听：普通h5+使用document.addEventListener，uni-app使用plus.globalEvent.addEventListener
简单使用：

    // #ifdef APP-PLUS
    var model = plus.device.model;
    console.log('应用的 model 为：' + model);
    // #endif

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

示例
- _doc/photo.jpg 是一个永久存储的路径，文件会在应用的沙盒环境中保存，直到用户卸载应用或者清除数据

<template>
	<view>
		<u-button type="primary" @click="takePhoto">拍照</u-button>
		<image v-if="photo" :src="photo" alt="拍摄的照片" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				photo: undefined
			}
		},
		methods: {
			takePhoto() {
				// 获取设备默认的摄像头对象 
				let cmr = plus.camera.getCamera();
				cmr.captureImage((path) => {
					this.photo = path;
				}, (error) => {
					console.log(error, '失败')
				}, {
					resolution: "high", // 设置拍照分辨率，可以根据需求调整
					filename: "_doc/photo.jpg" // 设置保存图片的路径
				})
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.io.resolveLocalFileSystemURL('_doc/photo.jpg', function(entry) {
				console.log('文件存在:', entry.fullPath);
			}, function(error) {
				console.log('文件不存在:', error.message);
			});
			// #endif
		}
	}
</script>

2.uniapp开发的App端内嵌h5项目的使用

// utils/plusReady.js
export const plusReady = (fn) => {
  if (window.plus) {
    setTimeout(fn, 0); // 异步确保执行顺序
  } else {
    const handler = () => {
      fn();
      document.removeEventListener('plusready', handler); // 执行后解绑
    };
    document.addEventListener('plusready', handler, false);
  }
};

// 使用示例
import { plusReady } from '@/utils/plusReady';
plusReady(() => {
  const appid = plus.runtime.appid; // 安全调用
  console.log('App ID:', appid);
});

三、项目中使用的技术

1.webview

作用：管理应用窗口界面，实现多窗口的逻辑控制管理操作
使用示例：
- webview创建tabbar

	let pages = ['weixin.html', 'contact.html', 'find.html', 'my.html'];
	mui.plusReady(function() {
		/* 1.获取当前窗口的WebviewObject对象 */
		let ws = plus.webview.currentWebview();
		for (var i = 0; i < pages.length; i++) {
			/* 2.创建新的Webview窗口 */
			let wv = plus.webview.create(pages[i], pages[i], {
				top: '0px',
				bottom: '56px'
			}, {});
			/* 3.隐藏Webview窗口 */
			wv.hide();
			/* 4.在Webview窗口中添加子窗口 */
			ws.append(wv);
		}
		/* 5.显示Webview窗口 */
		plus.webview.show(pages[0]);
		mui('.mui-bar-tab').on('tap', 'a', function(){
			var href = this.getAttribute('href');
			/* 5.显示Webview窗口 */
			plus.webview.show(href);
		})
	})

camera

作用：管理设备的摄像头，可用于拍照、摄像操作

使用示例：

拍照

    let cmr = plus.camera.getCamera();
    cmr.captureImage(function(path) { // path：虚拟路径_doc/
        plus.gallery.save(path, function() {
            console.log("保存图片到相册成功");
        });
        var imgs = document.createElement('img');
        imgs.width = 100;
        imgs.height = 100;
        plus.storage.setItem("imgSrc", path)
        // 生成 WebView 可识别的file://路径
        const realPath = plus.io.convertLocalFileSystemURL(path);
        imgs.src = realPath;
        mui('#camera-img')[0].appendChild(imgs);
    })

gallery

作用：模块管理系统相册

使用示例：

获取照片

    plus.gallery.pick(
        function(e) {
            for (let i = 0; i < e.files.length; i++) {
                var imgs = document.createElement('img');
                imgs.width = 100;
                imgs.height = 100;
                imgs.src = e.files[i]
                mui('#gallery-img')[0].appendChild(imgs);
            }
        },
        function(e) {
            console.log('取消选择图片');
        }, {
            multiple: true,
            filter: 'image'
        }
    )

nativeUI

作用：管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等

使用示例：

previewImage：预览图片

    plus.nativeUI.previewImage([
        "_www/logo.png",
        "http://img-cdn-qiniu.dcloud.net.cn/icon1.png",
        "http://img-cdn-qiniu.dcloud.net.cn/icon2.png",
        "http://img-cdn-qiniu.dcloud.net.cn/icon3.png"
    ], {
        current: 0,
        background: '#000000',
        indicator: 'number',
        loop: true,
        onLongPress: function(e) {}
    });

Storage

作用：管理应用本地数据存储区，用于应用数据的保存和读取
特点：
- 跨域操作：不受Webview跨域限制
- 数据持久化：App重启后仍然保留，生命周期与沙盒目录
- 没有容量限制：（html5+官网说的）
应用场景：*轻量级持久化键值库，专为小文本设计
- token/userId
- app主题：”theme”:”dark”
- 页面间的临时传参：orderId: ‘12345’
使用示例：

// 存储键值
plus.storage.setItem(key, value);
// 获取存储的键值
plus.storage.getItem(key)

audio

作用：提供音频的录制和播放功能
使用示例：

<!-- 注意：成功的回调是录音结束 -->
let recorder = plus.audio.getRecorder();
function startAudio() {
	recorder.record({
		filename: "_doc/audio/" + Date.now() + ".wav"
	}, function (recordFile) {
		console.log("录音文件保存成功: " + recordFile);
	}, function (error) {
		console.log("录音失败: " + JSON.stringify(error));
		recorder.stop();
		recorder = null;
	});
}
function endAudio() {
	recorder.stop();
	recorder = null;
	console.log("录音已结束")
}