如何用H5的方式开发App,Vue开发App

已于 2024-05-25 19:14:37 修改
阅读量2k 收藏 13
点赞数 9
分类专栏： H5 文章标签： 前端 H5 APP
于 2024-01-23 10:51:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37550440/article/details/135766026
版权

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

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

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

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

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

需要注意的是，使用 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如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <H1>TEST</H1>
  <script>
    document.addEventListener('plusready', function () {
      var webview = plus.webview.currentWebview();

      plus.key.addEventListener('backbutton', function () {
        webview.canBack(function (e) {
          if (e.canBack) {
            webview.back();
          } else {
            webview.close(); //hide,quit
            //plus.runtime.quit();
          }
        })
      });
    });
  </script>
</body>

</html>

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

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

<template>
  <div style="">
    <div class="home" v-if="this.$route.meta.hidden">
      <div>
        <p class="title">
          <span style="color: rgb(200,200,201);">Sewage Outlet</span>
          <img
            style="    align-self: center;"
            width="18px"
            height="19px"
            src="../../assets/imgs/home.png"
            alt=""
          />
          <span
            style="font-size:16px;align-self: center; font-family: PingFang;"
            >入河排污口</span
          >
        </p>
      </div>
      <div class="circleBack">
        <div class="circle">
          <img
            src="../../assets/imgs/jietu1.png"
            alt=""
            style="width: 90%;height: 90%;border-radius: 50%;"
          />
          <img
            src="../../assets/imgs/circle1.png"
            alt=""
            style="width: 169px;position: absolute;margin: 0 auto;bottom: -18px;"
          />
        </div>
      </div>
      <!-- 按钮栏 -->
      <div class="buttonGroup">
        <div class="left-cont" @click="jump('baseinfo')">
          <img
            src="../../assets/imgs/one-docu.png"
            alt=""
            style="width: 31px;height: 26px;position: absolute;top: 25px;left: 35px;"
          />
          <img
            src="../../assets/imgs/line1.png"
            alt=""
            style="width: 17px;height: 54px;position: absolute;top: 56px;left: 13px;"
          />
          <span
            class="button-word"
            style="position: absolute;top: 110px;left: -10px;"
            >一口一档</span
          >
        </div>
        <div class="middle-cont" @click="jump('rhpwkSituation')">
          <img
            src="../../assets/imgs/one-pic.png"
            alt=""
            style="width: 26px;height: 26px;"
          />
          <img
            src="../../assets/imgs/line2.png"
            alt=""
            style="width: 7px;height: 25px;position: absolute;bottom: -17px;left: 43px;"
          />
          <span
            class="button-word"
            style="position: absolute;top: 117px;left: 22px;"
            >一口一图</span
          >
        </div>
        <div class="right-cont" @click="jump('reportAbnormal')">
          <img
            src="../../assets/imgs/quetion-back.png"
            alt=""
            style="width: 24px;height: 24px;position: absolute;top: 25px;left: 28px;"
          />
          <img
            src="../../assets/imgs/line3.png"
            alt=""
            style="width: 18px;height: 54px;position: absolute;top: 54px;left: 60px;"
          />
          <span class="button-word button-word-problem" style="">问题反馈</span>
        </div>
      </div>
      <!-- 详情栏 -->
      <div class="detail">
        <div class="detail-line"></div>
        <div class="detail-content">
          <p class="content-word">
            {{ statics.name }}
          </p>
        </div>
        <div class="detail-line  mt8"></div>
        <div class="detail-content">
          <div class="detail-word">
            <p>
              排口类型:
              <span>{{
                statics.pollutionData ? statics.pollutionData.pc_pkType : "-"
              }}</span>
            </p>
            <p>
              排口编码: <span>{{ statics.uniqueId }}</span>
            </p>
            <p>
              责任主体:
              <span>{{
                statics.pollutionData
                  ? statics.pollutionData.sy_principalName
                  : "-"
              }}</span>
            </p>
            <p>
              所属街道:
              <span>{{
                statics.region ? statics.region.sshortname : "-"
              }}</span>
            </p>
            <p>
              排入河流:<span>{{
                statics.river ? statics.river.name : "-"
              }}</span>
            </p>
          </div>
        </div>
        <div class="detail-line mt6"></div>
        <div class="detail-content">
          <div class="detail-word">
            <p>排放标准<span></span></p>
          </div>
        </div>
        <timeBox></timeBox>
        <!-- <div class="timeBox">
          <span
            style="font-weight: bold;  line-height: 5px;color: #717171;font-size: 12px;display: block;"
            >Am</span
          >
          <span
            style="font-weight: bold; color: #717171;font-size: 30px;display: block;margin-left: -3px;"
            >12:00</span
          >
          <span
            style="font-weight: 500;  line-height: 5px;color: #717171;font-size: 12px;display: block;"
            >23.12.2</span
          >
        </div> -->
      </div>

      <div class="bottom">
        <div class="bottom-word">
          <span>北纬-N:29.52</span>
          <span style="padding:0 5px"></span>
          <span>东经-E:106.52</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import api from '@/api/rhpk';
import timeBox from "../comm/timeBox.vue";

export default {
  data() {
    return {
      id:1380,
      statics:{}

    };
  },
  created() {
    this.getData()
  },
  components: {
    timeBox
  },
  methods:{
    jump(route) {
			this.$router.push({
				path: route,
        query:{
          news:this.statics
        }
			});
		},
    getData(){
      let data ={
        id:1380
        // name: '谢家湾街道鹅公岩大桥桥下北80米雨洪排口'
        }
      api.getPkInfo({...data}).then(res=>{
         if(res.code==0){
          this.statics=res.data
         }
      })
    },
  }
};
</script>

<style scoped lang="less">
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;

.home-main {
  height: 100%;
  padding: 20px 20px 0px 20px;
}
.mt55 {
  margin-top: 55px;
}
.mt8 {
  margin-top: 8px;
}
.mt6 {
  margin-top: 6px;
}
</style>
<style>
.home {
  min-height: 812px;
  font-size: 12px;
  position: relative;
  overflow: hidden;
}
.van-cell {
  height: 100%;
  line-height: 100% !important;
}
.van-icon-arrow-left::before {
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 20px;
  color: #07c160;
}
.title {
  display: flex;
  justify-content: space-around;
  margin-top: 54px;
  padding: 0 54px;
  text-align: center;
  font-size: 22px;
}
.circle {
  width: 202px;
  height: 202px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 22px;
  background: url("../../assets/imgs/circle.png") no-repeat center/cover;
  position: relative;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttonGroup {
  width: 90%;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 90px;
  display: flex;
  justify-content: space-evenly;
}
.detail {
  position: relative;
  width: 90%;
  margin: 0 auto;
  margin-top: 54px;
}
.detail-line {
  width: 50px;
  height: 2px;
  background-color: rgb(81, 160, 106);
}
.left-cont {
  background: url("../../assets/imgs/left.png") no-repeat center/cover;
  width: 90px;
  height: 90px;
  margin-top: -30px;
  position: relative;
}
.middle-cont {
  background: url("../../assets/imgs/middle.png") no-repeat center/cover;
  width: 94px;
  height: 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-cont {
  background: url("../../assets/imgs/right.png") no-repeat center/cover;
  width: 90px;
  height: 90px;
  margin-top: -30px;
  position: relative;
}
.button-word {
  font-size: 12px;
  font-family: PingFang;
  font-weight: bold;
  color: #8daa92;
  line-height: 10px;
}
.button-word-problem {
  position: absolute;
  top: 110px;
  left: 42px;
}
.content-word {
  font-size: 12px;
  font-family: PingFang;
  font-weight: bold;
  color: #595757;
  line-height: 10px;
  margin-top: 10px;
}
.detail-word {
  font-size: 10px;
  font-family: PingFang;
  font-weight: 500;
  color: #595757;
}
.detail-word p {
  margin-top: 9px;
}
.timeBox {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: PingFang;
}
.bottom {
  background: url("../../assets/imgs/bottom-back.png") no-repeat center/cover;
  width: 100%;
  height: 80px;
  margin-top: 41px;
  position: absolute;
  bottom: 0;
}
.bottom-word {
  font-size: 24px;
  font-family: PingFang;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.bottom-word span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

 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 相机 指纹等需要配置

流氓也是种气质 _Cookie
关注
  • 9
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Html5的移动端APP开发框架
smile的专栏
08-30 4万+
快速增长的APP应用软件市场，以及智能手机的普及，手机应用：Native（原生）APP快速占领了APP市场，成为了APP开发的主流，但其平台的不通用性，开发成本高，多版本开发等问题，一直困扰着专业APP开发企业，和APP服务提供商。 安卓和IOS的操作方式，开发模式，界面UI显示方面的差别，也使得原生APP的不同版本体验有很大的区别，光是做兼容性调测，都要花费开发企业不少的时间。 近年来，另一种
H5基本开发1——（H5简单概述）
m0_59749255的博客
11-16 5144
HTML是用来描述网页的一种语言HTML指的是超文本标记语言，是一种用于创建网页的标准标记语言标记语言是一套标记标签HTML使用标记标签来描述网页HTML文档的后缀名：.html或者.htm，两种后缀名没有区别，都可以使用HTML5是HTML最新的修订版本，2014年10月由万维网联盟W3C完成标准制定HTML5的设计目的是为了在移动设备上支持多媒体http协议：超文本传输协议—tcp。
H5手机App开发入门：概念篇
02-24
表面上看，手机App都是同样的东西，就是手机上的应用程序，点击图标就能运行，但是它们的底层技术不一样。按照开发技术，App可以分成三大类。原生应用（nativeapplication，简称nativeApp）Web应用（webapplication，简称WebApp）混合应用（hybridapplication，简称hybridApp）这三类App的技术模型都不一样，各有优缺点。企业一般会选择其中一种作为主要技术栈，构建自己的手机App。H5这个词，可以理解成就是混合App模型，只不过它特指混合App的前端部分。因为混合App的前端就是HTML5网页，所以简称H5。这个词是国内独有的，基本上都
HTML5移动应用开发入门经典
12-29
《HTML5移动应用开发入门经典》总共分为24章，以示例的方式对如何使用HTML5及相关技术进行移动应用开发做了全面而细致的介绍。《HTML5移动应用开发入门经典》首先讲解了HTML5的起源以及它为什么适用于移动设备，然后讲解了HTML5的基本元素以及所做的改进、canvas（画布）、视音频、微格式、微数据、拖曳等新增特性，还讲解了WebSocket、WebWorkers、Web存储、离线Web应用程序、地理定位等新增的API。同时，《HTML5移动应用开发入门经典》还针对不同平台（如iOS、BlackBerry、Android）的移动设备、不同的浏览器，就如何开发高可用性的移动应用程序进行了
一文带你使用Vue完成移动端(apk)项目_开发手机app vue怎么用
最新发布
2401_84411018的博客
05-01 558
【代码】一文带你使用Vue完成移动端(apk)项目_开发手机app vue怎么用。
一站式解决：H5开发全攻略，看这篇让你省时又省力
linwu的博客
07-16 965
使用属性可以自定义表单元素的样式，使其更符合您的设计需求。textarea {通过使用伪元素，可以自定义滚动条的样式，使其更加美观。使用伪元素，可以自定义输入框的占位文本样式，使其更加吸引人。
比较H5开发与安卓开发
jakelihua
01-07 1263
H5开发通常使用HTML、CSS、JavaScript，项目结构相对简单。而安卓开发使用Java或Kotlin，项目结构更复杂，包含Java代码、XML布局文件等。
11个有用的移动网页开发App和HTML5框架
01-31
在过去的两年里，触屏设备飞速增长。iOS和Android设备让开发者和设计师开始重新思考他们的网页应用，以提供更好的触屏体验。移动Web应用相对于本地的App有很多优势，虽然也有很多设计和开发上的挑战。这里列出了一系列有用的框架来帮助基于HTML的webapp开发。他们支持大部分流行的智能手机和平板。Lungo.js是第一个应用HTML5和CSS3特性的移动开发框架。它可以帮助开发者创建iOS，Android，Blackberry和WebOS平台的应用。Lungo.js不需要任何web服务器的支持就能帮助用户实现HTML5的功能，例如WebSQL,Geolocation，History，
移动端H5网页开发必备知识
苏纯的博客
11-16 5983
工欲善其事必先利其器，今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。后面笔者还会再出移动端常见问题汇总。 像素 像素即一个小方块，它具有特定的位置和颜色。图片、电
H5移动web开发
zhaoyifei01的博客
03-07 1049
H5面试题
H5初体验~一个新手H5前端开发的笔记，自学必看
2401_84166794的博客
04-07 1003
1.优势（1）跨平台性！兼容性好，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上。（2）开发和维护的成本较低，开发周期较短。（3）本地存储特性。基于H5开发的轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。2. 缺点在性能上：同样的交互，用H5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核3.使用场景。
写给后端开发工程师的H5前端开发知识
SmartCodeTech的博客
03-16 2322
一、引言 web发展到目前为止已经有将近30年的历史，在web兴起的早期，并没有前端这个概念。最初所有的开发工作都是由后端开发工程师完成，随着业务越来越复杂，工作量逐渐的增加，项目中的可视化部分和一部分交互功能的开发工作逐渐从业务中剥离出来，形成了前端开发。大约在2000年左右，雅虎等公司开始设立前端工程师职位，从2005年开始，正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要，前端领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都快速发展
uniapp+uview 学习笔记（二）—— H5开发
summer_gf的博客
03-18 2306
本文主要介绍使用uniapp框架和uview组件库进行H5开发，仅供学习参考。
Uni-app h5应用开发到部署
weixin_59525835的博客
02-04 2152
注意只能扩展web和小程序平台，不能扩展app打包。并且扩展小程序平台时只能基于指定的基准平台扩展子平台，不能扩展基准平台。打包完成后如果想在本地预览，需要在该项目的终端全局安装 npm install http-server -g。本地运行时可以点击运行到浏览器-》chrome即可打开h5应用页面进行调试。2、配置完H5后点击发行，选择自定义发行-》build:pro。1、打开manifest.json文件配置H5。项目中会生成打包文件，但是本地运行不起来。扩展节点，可实现自定义条件编译平台。
前端开发总结
Peanutfight的博客
05-01 1306
文章目录前言一、H5开发1.vscode使用live server1.h5获取url参数二、css样式1.设置属性保持同一水平 前言 记录一下工作，学习中遇到的H5开发的小技巧~ ~ 不定期更新 一、H5开发 1.vscode使用live server 1.插件直接搜索live server安装 2.设置setting.json "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.port": 9000, //设置本地服
H5+APP的几种实现形式
huangzhixin1996的博客
09-04 4633
如何实现H5+App
微信H5开发（一）
热门推荐
boke的博客
04-14 1万+
H5开发，一般是指移动端的页面开发。移动端可分为app和普通浏览页面。从嵌入的环境来归类：可以分为app、微信H5及手机浏览器里面打开的页面。 以前粗略的涉略过h5开发的一些知识，感觉H5并不是很难。在这半年内，接手并完成了两个微信H5项目（一期）的过程中，发觉h5开发过程中需要注意的细节有很多，碰到的兼容问题也有一些。在这里我先总结下，H5项目的一些思路及碰到的难点和解决方法。 在刚接到H5...
web前段工程师
weixin_43815060的博客
11-27 285
web前端工程师职责开发经验基本技术编辑 Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 职责 随着互联网的迅猛发展和普及，一个新型的行业和新...
uniapp 开发app和h5的区别
07-27
uniapp开发App和H5的区别主要体现在以下几个方面。首先，uniapp是一个使用Vue.js开发所有前端应用的框架，而H5是一种构建Web内容的语言描述方式。\[2\]其次，uniapp不支持DOM操作，而H5端有DOM对象。\[2\]此外，uniapp开发者编写一套代码，可以发布到iOS、Android、Web、各种小程序以及快应用等多个平台，而H5只能在Web端运行。\[3\]因此，uniapp开发App和H5的区别在于开发方式、支持的功能和发布平台的多样性。 #### 引用[.reference_title] - *1* *2* *3* [uniapp 和 HTML5 区别](https://blog.csdn.net/CRMEB/article/details/124985212)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值