首页 前端知识 如何用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
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!