使用vue3 开发H5 ,需要注意的部分点

以下内容为使用vue3 开发H5 中碰到的几个点,个人愚见。不定期进行补充。

框架端

1. 安装 vite插件 @vitejs/plugin-legacy

npm add -D @vitejs/plugin-legacy

使用:
vite.config.js 中引入

import legacy from '@vitejs/plugin-legacy';
export default defineConfig({plugins: [// 示例legacy({targets: ['Chrome 63'],additionalLegacyPolyfills: ['regenerator-runtime/runtime'],modernPolyfills: true}),... // 其他配置 ]
});

说明: 插件说明以及具体配置 戳 github

目的: 为打包后的文件提供传统浏览器兼容性支持。具体讲就是,vue3 开发的H5 如果不进行这个配置,可能会在不同版本的 iOS/Android 手机上出现打开页面,但是空白的情况。

2. 调试使用 vConsole

npm install vconsole

使用:
在项目的 main.js 中引入

import Vconsole from 'vconsole'const vConsole = new Vconsole()

说明: 插件地址 vConsole README_CN
引用后页面上会出现一个绿色的 vConsole 按钮。(如果开发过小程序的话,对这个页面会感到非常熟悉)
实际开发中,在 new Vconsole() 时,应当根据环境进行。保证不在生产环境出现调试按钮 。
必须要在生产环境debug的话,那有这个就非常不错了
目的: 可以在真机运行时,进行调试,查看相关 打印和请求等报错。方便调试。

代码层面

1. meta 标签的设置

使用:
在html 文件中,添加

  <metaname="viewport"id="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover" />

说明:

key说明
user-scalable是否允许缩放
initial-scale初始倍数
maximum-scale最大倍数
minimum-scale最小倍数

建议在真机中,对上述的属性进行修改并且查看效果。可以更好的理解。
最重要的是 viewport-fit=cover 属性。
实际的工作中,部分H5页面是在原生app中打开,为了H5完成展示和交互体验,一般会将WebView全屏展示H5。这时候,因为H5需要考虑头部的留海和底部的切换区域,所以一般会使用定位属性进行布局。因为原生的webview有内置的安全距离属性,如果没有添加viewport-fit=cover 的话,比如在设置top:0时,定位的元素会直接到导航栏位置。反正,添加了之后,会出现在留海下方,也就是安全区域顶部的起始点。(具体了解 可见 安全区域)

目的: H5 页面,顶部和底部布局时配合 safe-area-inset-XXXX 可以做到几行代码兼容大部分机型的布局。

2. H5 标签添加点击态

使用:
在html 文件中的 body标签上,添加 ontouchstart=""

<body ontouchstart=""><div id="app"></div><script type="module" src="/src/main.js"></script>
</body>

说明:
在写常规的web端页面时,我们直接是对需要点击的标签添加 active 伪类来实现点击态效果(就是点一个标签的时候,标签的样式进行变化)。
但是同样的写法,放到H5 的时候发现无效。实际并不是点击事件未触发,而是在移动端上 触屏事件是touch 触发的。

目的: 使用了上述方法后,就可以正常的使用 active伪类 了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/750367.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

相机拍照与摄影学基础

1.相机拍照 相机可能形状和大小不同&#xff0c;但基本功能相同&#xff0c;包括快门速度、光圈和感光度&#xff0c;这些是摄影的通用概念。即使是一次性相机也是基于这三个理念工作的。不同类型相机在这三个概念上的唯一区别是你可以控制这些功能的程度。这三个参数被称为相…

Redis在缓存方面的应用有哪些?如何避免缓存击穿、缓存雪崩等问题?Redis如何实现分布式锁?有哪些注意事项?

Redis在缓存方面的应用有哪些&#xff1f;如何避免缓存击穿、缓存雪崩等问题&#xff1f; Redis在缓存方面的应用广泛且多样&#xff0c;包括但不限于以下几个方面&#xff1a; 页面缓存&#xff1a;Redis可以将Web页面的内容片段&#xff0c;包括HTML、CSS和图片等静态数据&a…

【ESP32接入国产大模型之MiniMax】

1. MiniMax 讲解视频&#xff1a; ESP32接入语言大模型之MiniMax MM智能助理是一款由MiniMax自研的&#xff0c;没有调用其他产品的接口的大型语言模型。MiniMax是一家中国科技公司&#xff0c;一直致力于进行大模型相关的研究。 随着人工智能技术的不断发展&#xff0c;自然语…

基于opencv的图像处理系统的设计与实现

概要 随着计算机技术的飞速发展&#xff0c;图像技术在各领域的研究和应用日渐深入和广泛。opencv是近年来推出的开源、免费的计算机视觉库,利用其所包含的函数可以很方便地实现数字图像处理。本文旨在对opencv进行一个快速全面简介,通过介绍图像处理的相关函数&#xff0c;使读…

安卓UI面试题 56-60

56. 简述IntentService原理分析 ? HandlerThread其实就是为了我们在 子线程中减少自己创建Looper以及运转Looper而出现的, 那么这次的IntentService其实封装的更巧妙,使用 HandlerThread的时候我们还需要创建Handler对象出来, 但是使用IntentService连Handler对象也不用我们…

前端小白的学习之路(HTML5 二)

提示&#xff1a;<svg>与<canvas> 目录 目录 一、svg标签 1.简介 2.常用属性 3.标签 4.使用示例 二、canvas标签 1.简介 2.常用属性与方法 3.使用示例 1)绘制基础图案 2)绘制组合图案(一个爱心) 3)做一幅动图 三、svg与canvas的区别 一、svg标签 1.简…

Kubernetes kafka系列 | k8s部署kafka+zookeepe集群(可外部通信)

直通车 zookeeper搭建 请参考yaml kafka.yaml --- apiVersion: v1 kind: Service metadata:name: kafka-hslabels:app: kafka spec:ports:- port: 9092targetPort: 9092name: serverclusterIP: Noneselector:app: kafka --- apiVersion: v1 kind: Service metadata:name: ka…

(一)、机器人时间同步方案分析

1、是否有必要进行时间同步 目前的自动驾驶系统包括 感知、定位、决策规划、控制 等模块&#xff0c;这些模块的正常运行需要依靠各种不同类型的传感器数据的准确 融合。尤其是激光雷达与相机这两种传感器在感、知定位模块中起着至关重要的作用。机械式旋转扫描激光雷达本身较低…

web canvas系列——快速入门上手绘制二维空间点、线、面

文章目录 ⭐前言⭐基本用法&#x1f496;设置一个 canvas 2D 上下文&#x1f496;绘制矩形常用方法属性&#x1f496;绘制一个红蓝交替的矩形 &#x1f496;绘制路径常用方法属性&#x1f496;画一个点&#x1f496;画一条线&#x1f496;画一个三角形面&#x1f496;画一个笑脸…

Map集合遍历键找值方式

1.4 Map集合遍历键找值方式 键找值方式&#xff1a;即通过元素中的键&#xff0c;获取键所对应的值 分析步骤&#xff1a; 获取Map中所有的键&#xff0c;由于键是唯一的&#xff0c;所以返回一个Set集合存储所有的键。方法提示:keyset()遍历键的Set集合&#xff0c;得到每一…

【leetcode热题】 两数之和 II - 输入有序数组

给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#xff0c;则 1 < index1 < index2 < numbers…

Rust 程序设计语言学习——所有权

这一节主要来学习 Rust 语言的其他特性&#xff0c;所有权、引用与借用、Slice 类型。 1 所有权 Rust 的核心功能&#xff08;之一&#xff09;是所有权&#xff08;ownership&#xff09;。虽然该功能很容易解释&#xff0c;但它对语言的其他部分有着深刻的影响。 所有程序…

Jenkins: 搭建Jenkins服务,调通Webhook链路

实现 jenkins docker 自动化发布 1 &#xff09;jenkins 下载 地址&#xff1a;https://www.jenkins.io/download/选择合适的版本&#xff0c;比如 mac 上 $ brew install jenkins-lts建议使用 docker 搭建&#xff0c;下面用 mac上整体流程演示 2 &#xff09;jenkins 管理…

代码分支管理

代码分支管理规范 一、分支管理要求 分支管理 • 将代码提交到适当的分支,遵循分支管理策略。 • 随时可以切换到线上稳定版本代码,确保可以快速回滚到稳定版本。 • 同时进行多个版本的开发工作,确保分支清晰,避免混淆。提交记录的可读性 • 提交描述准确,具有可检索性,…

Explain 关键字

优质博文&#xff1a;IT-BLOG-CN explain关键字可以模拟优化器执行 SQL 查询语句&#xff0c;从而知道 MySQL 是如何处理 SQL 语句的。分析查询语句或表结构的性能瓶颈。执行语句&#xff1a;explain SQL语句。表头信息如下&#xff1a; 一、ID 参数 select 查询的序列号&…

MySQL实现事务隔离的秘诀之锁

在MySQL中&#xff0c;有多种锁类型&#xff0c;我们先了解三种概念的锁&#xff0c;以便对接下来的内容有更好理解。 表级锁&#xff08;Table Lock&#xff09;&#xff1a;对整个表加锁&#xff0c;其他事务无法修改或读取该表的数据&#xff0c;但可以对其他表进行操作。页…

【数据结构和算法初阶(C语言)】二叉树铺垫--栈帧的创建与销毁--细节全解

前言&#xff1a; 学习这么久以来&#xff0c;可能有很多疑问&#xff1a;局部变量怎么创建的&#xff1f;为什么局部变量的值是随机的&#xff1f;函数是怎么传参的&#xff1f;传参的顺序是怎么样的&#xff1f;形参和实参是什么样的关系&#xff1f;函数调用是怎么做的&…

由浅到深认识C语言(11):结构体

该文章Github地址&#xff1a;https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.csdn…

【全开源】JAVA情侣扭蛋机情侣游戏系统源码支持微信小程序+微信公众号+H5

一、功能介绍 会员功能、情侣扭蛋 收到的券、送出的券 合伙代理、意见反馈 我们技术使用JAVA后台服务 前后端分离 springbootmybatisplusmysql 用户端 uniapp&#xff08;vue语法&#xff09;管理后台 vueelementUi 适配小程序H5公众号&#xff0c;一套源码&#xff0c;无…

Jenkins 面试题及答案整理,最新面试题

Jenkins中如何实现持续集成与持续部署&#xff1f; Jenkins通过自动化构建、测试和部署应用程序来实现持续集成与持续部署&#xff08;CI/CD&#xff09;。这个过程包括以下步骤&#xff1a; 1、源代码管理&#xff1a; Jenkins支持与多种版本控制系统集成&#xff0c;如Git、…