记录一下小程序转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}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！