uniapp vue3+vite 小程序转H5

记录一下小程序转H5遇到的问题

目录

1.图片src无效时显示白框

 2.请求显示跨域

3.小程序中样式写100vh正好满屏，在H5中100vh会因为标题栏的问题超出一部分

4.H5端不支持保存图片的API

5.H5打包文件引用路径不对 

6.打包后有些样式丢失

7.打包后uni的方法丢失，报错xxx is not a function

---

1.图片src无效时显示白框

解决方法：css设置状态

img[src=""],

img:not([src]) {

  opacity: 0;

  border: none;

  visibility: hidden;

  max-width: none;

}

 2.请求显示跨域

使用配置了不检测同源的谷歌浏览器

参考文章

https://blog.csdn.net/weixin_43316300/article/details/106552310?ops_request_misc=&request_id=&biz_id=102&utm_term=%E6%80%8E%E4%B9%88%E5%85%B3%E9%97%AD%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5%E6%A3%80%E6%9F%A5&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-4-106552310.142^v86^insert_down28v1,239^v2^insert_chatgpt&spm=1018.2226.3001.4187

3.小程序中样式写100vh正好满屏，在H5中100vh会因为标题栏的问题超出一部分

在App.vue文件中加入样式  
   
子页面样式  
    
  
这样写apph5、小程序页面都能满屏

4.H5端不支持保存图片的API

前提：通过canvas绘制图片，canvasToTempFilePath接口在H5端返回的是base64格式的。

使用方法保存图片

  H5SavePicture(base64) {
      var arr = base64.split(",");
      var bytes = atob(arr[1]);
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      var blob = new Blob([ab], { type: "application/octet-stream" });
      var url = URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.href = url;
      a.download = new Date().valueOf() + ".png";
      var e = document.createEvent("MouseEvents");
      e.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      a.dispatchEvent(e);
      URL.revokeObjectURL(url);
    },

5.H5打包文件引用路径不对 

在 manifest.json文件添加以下代码

 "h5" : {
        "router" : {
            "base" : "./"
        }
    }

6.打包后有些样式丢失

可能是node的问题，删除node_modules， 清除NPM缓存后重新npm i 即可

参考文章 NPM报错 Error: EPERM: operation not permitted, unlink......的解决办法_代码DJ的博客-CSDN博客

7.打包后uni的方法丢失，报错xxx is not a function

解决方法：在manifest.json文件中关闭H5的摇树功能

 "optimization": {
            "treeShaking": {
                "enable": false
            }
        }