做项目碰到的一些安卓与ios的不兼容(以及vue项目中安卓和ios的环境判断),做个记录

vue环境下设置项目的默认字体

<script setup>
import { ref, reactive, onMounted } from "vue";
const fontFamilyType = ref(""); // 字体

// 判断安卓和ios环境
function isAndroid() {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return userAgent.indexOf("android") > -1;
}
function isiOS() {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod|ios/.test(userAgent);
}

onMounted(() => {
  getData();
  if (isAndroid()) {
    console.log("安卓环境");
    fontFamilyType.value = "normal";
  } else if (isiOS()) {
    console.log("苹果环境");
    fontFamilyType.value =
      '-apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
  } else {
    console.log("其他环境");
    fontFamilyType.value = "normal";
  }
});
</script>

<template>
  <div :style="{ fontFamily: fontFamilyType }">
    Calories(kcal)
  </div>
</template>

<style scoped lang="less"></style>

屏幕截图(html-to-image)

// 这里只做js部分(vue3使用)
	import * as htmlToImage from 'html-to-image';
	let imgcanvas = ref('') // 图片标签img的src指向
	const captureScreen =() => {
		// 截图的容器
		var target = document.querySelector('.container')
		setTimeout(async ()=>{
			// 下面的await在安卓和H5上,只需要执行一次,拿到地址即可
			// 在苹果设备上需要最低执行三次才能拿到地址渲染出完整图片(做项目遇到的坑,前两次均渲染不全)
			const dataUrl = await htmlToImage.toPng(target)
			const dataUrl2 = await htmlToImage.toPng(target)
			const dataUrl3 = await htmlToImage.toPng(target)
			const dataUrl4 = await htmlToImage.toPng(target)
			imgcanvas.value = dataUrl4  //(base64格式的图片地址)
		},100)
	};

截图的区域如果有字体,尽量用本地字体,或者使用异步等待,否则可能导致截图出来的字没有字体
如果截图区域的字有不期望的样式例如截图前没换行,截图后换行了,直接在代码里面加固定死不换行即可(截图后还是原来的样式,只是样式会参考当前截图的容器了,如果空间不足就会导致换行,隐藏写死样式固定不换行即可)

微信浏览器自动播放音频(兼容Android和iOS)