以下内容为使用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
伪类 了。