H5 技术是一种基于 Web 标准的开发技术，可以用于开发移动端应用程序。如果你想使用 H5 技术开发 App，可以考虑以下几个步骤：

确定开发框架：选择一个适合自己的移动端开发框架，如 Vue、React 或者 Angular 等，这些框架都有提供移动端的解决方案。

设计页面：设计页面时需要注意移动设备的屏幕大小和触控操作特性，为了在移动端获得较好的用户体验，需要精细化页面设计。

开发页面：使用 HTML、CSS 和 JavaScript 等技术来实现页面的开发，并利用框架提供的组件和 API 实现交互逻辑。

测试和发布：使用模拟器或真机进行测试，确保应用程序在不同设备上正常运行。发布应用程序时需要注意遵循相关的规定和法律法规。

需要注意的是，使用 H5 技术开发的应用程序可能无法完全达到原生应用的性能和体验，但是它具有易于开发和维护的优点，并且可以跨平台使用。另外，如果需要访问硬件设备或者其他原生功能，需要使用 WebView 或者插件库来实现。

在普通的 HTML 页面中，是无法直接使用 document.addEventListener('plusready', callback) 的。plusready 事件是 H5+ 规范中定义的一个事件，用于在移动应用中监听设备的准备就绪状态。

如果你想在普通的 HTML 页面中使用 H5+ 的相关功能，需要借助 H5+ 的开发框架或者混合开发环境，如使用Vue、uniapp、 MUI、DCloud、Cordova 等。这些框架或环境提供了对 H5+ 规范的支持，使得你可以在 HTML 页面中使用 document.addEventListener('plusready', callback) 进行监听和处理。

总结来说，在普通的 HTML 页面中，你无法直接使用 document.addEventListener('plusready', callback)，需要借助 H5+ 开发框架或混合开发环境来实现对 H5+ 相关功能的支持。

pc效果图：同时还做了自适应

打包成安装包的效果图：

使用MuMu模拟器打开的效果

1.技术选型我们这里使用Vue+vant

1.1依赖如下：

1.2目录结构如下：

Vant配置：

1.3 index.html如下：

TEST

1.4 home.vue也就是效果图中页面

其中图片路径和渲染数据可替换

2.关于页面自适应：

其中"px2rem-loader": "^0.1.9","postcss-pxtorem": "^5.1.1",主要是这两个依赖style上的样式不会转为rem 尽量使用class

postcss.config.js配置 app定义根节点大小为37.5

可安装插件：

3.如何打包成APP

我们使用Hbuliderx工具进行云打包

先将pc端项目打包好 直接放在这个工程下面即可，unpackage文件夹打包会自动生成不用管，重要的是需要manifest.json文件来记录版本信息和app所需的依赖比如地图的key 相机 指纹等需要配置