网站开发的环境,专业网站建设企业网站制作,哪个网站做的游戏好玩,网站主播以下内容为使用vue3 开发H5 中碰到的几个点#xff0c;个人愚见。不定期进行补充。
框架端
1. 安装 vite插件 vitejs/plugin-legacy 。
npm add -D vitejs/plugin-legacy使用#xff1a; 在vite.config.js 中引入
import legacy from vitejs/plugin-legacy;
export defau…以下内容为使用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 vconsoleconst vConsole new Vconsole()说明 插件地址 vConsole README_CN 引用后页面上会出现一个绿色的 vConsole 按钮。如果开发过小程序的话对这个页面会感到非常熟悉 实际开发中在 new Vconsole() 时应当根据环境进行。保证不在生产环境出现调试按钮 。 必须要在生产环境debug的话那有这个就非常不错了 目的 可以在真机运行时进行调试查看相关 打印和请求等报错。方便调试。
代码层面
1. meta 标签的设置
使用 在html 文件中添加 metanameviewportidviewportcontentuser-scalableno, initial-scale1, maximum-scale1, minimum-scale1, widthdevice-width, viewport-fitcover /说明
key说明user-scalable是否允许缩放initial-scale初始倍数maximum-scale最大倍数minimum-scale最小倍数
建议在真机中对上述的属性进行修改并且查看效果。可以更好的理解。 最重要的是 viewport-fitcover 属性。 实际的工作中部分H5页面是在原生app中打开为了H5完成展示和交互体验一般会将WebView全屏展示H5。这时候因为H5需要考虑头部的留海和底部的切换区域所以一般会使用定位属性进行布局。因为原生的webview有内置的安全距离属性如果没有添加viewport-fitcover 的话比如在设置top:0时定位的元素会直接到导航栏位置。反正添加了之后会出现在留海下方也就是安全区域顶部的起始点。具体了解 可见 安全区域
目的 H5 页面顶部和底部布局时配合 safe-area-inset-XXXX 可以做到几行代码兼容大部分机型的布局。
2. H5 标签添加点击态
使用 在html 文件中的 body标签上添加 ontouchstart
body ontouchstartdiv idapp/divscript typemodule src/src/main.js/script
/body说明 在写常规的web端页面时我们直接是对需要点击的标签添加 active 伪类来实现点击态效果就是点一个标签的时候标签的样式进行变化。 但是同样的写法放到H5 的时候发现无效。实际并不是点击事件未触发而是在移动端上 触屏事件是touch 触发的。
目的 使用了上述方法后就可以正常的使用 active伪类 了。
