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

已于 2024-05-25 19:14:37 修改
阅读量2.2k 收藏 14
点赞数 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
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Html5的移动端APP开发框架
smile的专栏
08-30 4万+
快速增长的APP应用软件市场，以及智能手机的普及，手机应用：Native（原生）APP快速占领了APP市场，成为了APP开发的主流，但其平台的不通用性，开发成本高，多版本开发等问题，一直困扰着专业APP开发企业，和APP服务提供商。 安卓和IOS的操作方式，开发模式，界面UI显示方面的差别，也使得原生APP的不同版本体验有很大的区别，光是做兼容性调测，都要花费开发企业不少的时间。 近年来，另一种
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）的移动设备、不同的浏览器，就如何开发高可用性的移动应用程序进行了
H5新特性解读：让前端开发更简单
最新发布
fudaihb的博客
05-10 1356
随着互联网的不断发展，网页技术也在不断更新迭代。其中，HTML5（以下简称H5）作为一项重要的更新，为前端开发者带来了诸多便利和新特性。在本文中，我们将深入探讨H5的种种新特性，以及它们对前端开发的影响。
今日头条H5移动端APP页面
03-02
今日头条H5移动端APP页面，开发的H5的移动应用提供便捷的前端，内容为APP页面模板不含后台的Html+Css+js页面，方便直接套用样式，做的非常漂亮
详解搭建一个vue-cli的移动端H5开发模板
11-21
简介 vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。 技术栈：vue + vux + axios + less 源码地址：https://github.com/Michael-lzg/vue-mobile 功能 搭建项目目录 配置 css 预处理器 配置 UI 组件库 vux 解决移动端适配 配置页面路由缓存 axios 请求封装 工具类函数封装 toast 组件封装 dialog 组件封装 底部导航组件封装 列表页 demo 表单页 demo 搭建项目目录
前端开发总结
Peanutfight的博客
05-01 1327
文章目录前言一、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前端开发知识
SmartCodeTech的博客
03-16 2328
一、引言 web发展到目前为止已经有将近30年的历史，在web兴起的早期，并没有前端这个概念。最初所有的开发工作都是由后端开发工程师完成，随着业务越来越复杂，工作量逐渐的增加，项目中的可视化部分和一部分交互功能的开发工作逐渐从业务中剥离出来，形成了前端开发。大约在2000年左右，雅虎等公司开始设立前端工程师职位，从2005年开始，正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要，前端领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都快速发展
腾讯T2亲自教你！来看看这份超全面的《Android面试题及解析》，详细的Android学习指南
01-28 158
程序员职业生涯真的很短吗? 不短，我就是明证！我今年44岁，世界500强公司，编程20年，软件技术专家，一直都在编程一线，从来离开过。技术上，我深入的使用过Java、.net、Js等等。也许吧，我勉强算的上一个“全栈工程师”。 我看好多回答里说，程序员之所以干不长，那是因为经验不值钱，老程序员和年轻人没有区别，还不能加班，所以自然不受老板待见。我特别不理解，这么荒谬，不合逻辑的言论为什么还会有人相信。我可以非常肯定的说，在软件开发这个行业，只要不虚度光阴，时间会给你丰厚的回报，会建立足够的门槛，保证你长期在
h5（HBuilderX+mui）开发App
pentiumCM的博客
12-25 7156
h5开发App 一、h5开发App分析 优点： 开发成本低，简单、快速、方便，一套代码几乎不用怎么修改就可以同时打包ios、android安装包。相比于App原生开发来说，开发成本要低很多 目前很多第三方SDK也越来越多的开放h5端的接口，生态环境比较活跃。 h5开发App，采用的是web前端的html5技术，各方面应用技术栈成熟，资料齐全。 缺点： h5开发App与原生的相比，说到...
Vue3搭建微信H5的项目配置【前端】
harry_zhaoning的博客
03-16 6227
vue3 微信H5 常用配置和常用代码
比较好的移动端h5框架
08-24
比较好的移动端h5框架
用vue快速开发app的脚手架工具
08-27
Vue 快速开发 App 的脚手架工具 MogoH5+ 一、概述 MogoH5+ 是一个基于 Vue 的多页面应用程序脚手架工具，旨在帮助开发者快速开发安卓和 iOS 应用程序。该工具结合 H5+ 可以快速生成 APP，并且支持多页面网页生成。...
uni-app-master：uni-app是使用Vue语法开发小程序，H5，App的统一框架
11-25
uni-app是一个使用Vue.js开发小程序，H5，App的统一前端框架。官网地址： : Vue.js开发者使用Vue语法编写代码， uni-app框架将其编译到小程序（微信/支付宝/百度/字节跳动/ QQ /钉钉），App（iOS / Android），H5等...
基于Vue的RuoYi APP移动端框架设计源码
04-08
RuoYi APP移动端框架：基于Java开发，包含349个文件，包括89个Markdown文档、88个Vue组件文件、80个JSON配置文件、53个JavaScript文件、16个SCSS样式文件、8个PNG图像文件、4个JPG图像文件、3个CSS样式文件、2个TTF...
一站式解决：H5开发全攻略，看这篇让你省时又省力
linwu的博客
07-16 968
使用属性可以自定义表单元素的样式，使其更符合您的设计需求。textarea {通过使用伪元素，可以自定义滚动条的样式，使其更加美观。使用伪元素，可以自定义输入框的占位文本样式，使其更加吸引人。
Android原生内嵌H5开发小结
易寻资料的博客
01-21 5141
自用笔记 外包公司，为了节约成本，采用Android内嵌H5模式开发，便于在安卓移动端上直接复用页面， 从而提高开发效率。同时改动时候只需改动H5页面，无需改动客户端。 实现的原理： 本质是：Java代码和Javascript调用 H5页面，只是Html的扩展，Javascript用来处理页面的逻辑 Android和H5互调案例: 一.java调用js 1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方
H5基本开发1——（H5简单概述）
m0_59749255的博客
11-16 5150
HTML是用来描述网页的一种语言HTML指的是超文本标记语言，是一种用于创建网页的标准标记语言标记语言是一套标记标签HTML使用标记标签来描述网页HTML文档的后缀名：.html或者.htm，两种后缀名没有区别，都可以使用HTML5是HTML最新的修订版本，2014年10月由万维网联盟W3C完成标准制定HTML5的设计目的是为了在移动设备上支持多媒体http协议：超文本传输协议—tcp。
H5初体验~一个新手H5前端开发的笔记，自学必看
2401_84166794的博客
04-07 1050
1.优势（1）跨平台性！兼容性好，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上。（2）开发和维护的成本较低，开发周期较短。（3）本地存储特性。基于H5开发的轻应用比本地APP拥有更短的启动时间，更快的联网速度，而且无需下载占用存储空间，特别适合手机等移动媒体。2. 缺点在性能上：同样的交互，用H5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核3.使用场景。
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、付费专栏及课程。

余额充值