菜单 搜索
首页 前端知识 如何用H5的方式开发App,Vue开发App

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

2024-08-10 22:08:36 前端知识 前端哥 906 288 我要收藏

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/15228.html
标签
uniapph5
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Jquery （第三章笔记）

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

vue jQuery 混用实现 点击日历展示list

2024-08-18 00:08:34

推荐使用Zabuto Calendar：轻量级的jQuery日历插件

2024-08-18 00:08:33

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

推荐一款强大的jQuery日期范围选择插件——jQuery Date Range Picker

2024-08-18 00:08:31

jQuery的DOM操作

2024-08-18 00:08:21

jQuery结构简析(1)，看这篇足矣了

2024-05-10 22:05:53

使用 echarts 数据发生变化，可图表却没有重新渲染

2024-08-18 00:08:12

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
1

npm的使用

2024-08-18 00:08:131000
2

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
3

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
4

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
5

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
6

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
7

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
8

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
9

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
10

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！