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

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

2024-08-10 22:08:36 前端知识 前端哥 925 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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