《app内嵌h5项目》所遇到的问题

李哈哈要奋发
673 阅读4分钟

1. 分享问题

微信和企微打开h5不可以直接通过点击按钮分享好友和朋友圈，只能点击右上角弹出面板进行分享。微信小程序和App可以直接点击按钮调取分享。

2. 部分手机进入首页空白，只出现头部一点静态样式

3. 文章过滤二维码有些不成功

4. 后台管理系统第一次打包成功，后面再打包报错

解决办法：每次打包前更新下某个依赖，为5.0.2版本则更为5.0.1版本，为5.0.1版本则更为5.0.2版本。

npm i element-china-area-data@5.0.2

npm i element-china-area-data@5.0.1

5. vue3+vite项目在windows7 运行报错

  1. 描述：最近换了公司的台式机，运行成功但控制台报错，一些比较新的语法报错，思考是不是nodejs的版本不对，查阅vite官网发现NodeJS版本必须14.18+，win7系统默认情况下只能安转node13.14.0及以下版本，安装node14以上版本时会弹出需要更高版本的错误。

image.png

将电脑系统升级后安装了高版本的nodejs，仍然报错SyntaxError:Unexpected token .;

image.png 点击去查看是说?.语法的问题。一开始一直在想是不是babel语法转换等配置的问题， image.png

  1. 解决办法：最后发现是谷歌浏览器版本过低，升级到最新版本问题就解决了。

6. *部分低版本安卓手机进入首页完全白屏

手机类型：OPPO R11s Plus和VIVO X9

7. vite构建的项目某个页面热更新失败

解决办法：组件名的大小写写错了

8. (苹果12系统ios16.4.1）固定顶部的标题导航栏，随着van-list页面滚动一点点走位下移不回去

  1. 图片描述：

image.png

  1. 分析：

网上很多出现这样问题的原因是固定元素写在滚动元素内导致的。处理办法是分开写。

但本项目的导航栏和滚动模块是分开的兄弟节点，body和最外层的父元素都设置了高度，List的直系父元素container没有设置，当列表加载会溢出body和外层的父元素，我想是这影响的，相当于body也在滚动。

image.png

  1. 解决办法：需给超出子元素的直系父元素(非直系不行)设置高度及overflow-y: scroll，防止高度溢出到body影响到nav-wrap。
原代码：
.home-box {
    min-height: 100vh;
    overflow: hidden;
    background: #FFFFFF;
}
修改为：
.container {
    height: 100vh;
    overflow-y: scroll;
    background: #FFFFFF;
    -webkit-overflow-scrolling: touch;
}

如果给home-box设置overflow-y: scroll，则home-container和container不能给固定高度；如果给home-container设置overflow-y: scroll，则container不能给固定高度，需随List的高度而变化，否则触底加载没反应。

9. ios在app内嵌h5页面使用vant-list上拉加载不成功，然后整个页面卡掉，按钮点击没反应。

描述: 在网页打开正常翻页加载；

分析：是不是ios滚动安全区域的问题，为什么页面会卡死按钮点击不了，控制台也没报错；

解决办法： 按前一个问题的处理方法（给固定高度再overflow-y:scroll）就可以了。

10.* (苹果12系统ios16.4.1）设置背景颜色和边框阴影(background-color/box-shadow/border)有时失效

使用了vant-sticky组件实现吸顶，问题8的问题存在且没有监听到滚动(上滑固定在顶部下滑没恢复)，且样式高度会留白，所以自己用原生写的吸顶效果，

image.png

image.png

然后又有样式问题：展开背景色消失，合起正常。

image.png

解决调试：

  1. 是否是var()样式引入不支持，改成普通也没用； --pass
  2. 是否是样式被别的覆盖了没显示，给指定样式添加!important没用； --pass
  3. 是否是写在其他vant组件内（PullRefresh）影响了，一开始就提出来了，所以不是。--pass
  4. 样式文件名首字母大小写移入错误；--pass
  5. 将导航栏固定在顶部（原本滚动区域根据导航栏高度自适应），这时展开正常，合起有问题； --pass
  6. 样式写法（&.）太新了不支持；--pass
  7. 将页面简化，只留下顶部导航栏，结果同5；--pass

最后觉得是不是系统原因，跟代码没关系，一直觉得就background这种简单的样式不会有兼容性问题，结果一搜还真有人出现同样的问题！

解决办法：

  1. 掉圆角border-radius;
  2. 纯色背景也用背景替代。

image.png

11* (苹果12系统ios16.4.1）没数据时上拉固定在底部的导航栏消失不见。

问题描述： 模块高度适应在底部，不设置定位，本地刚好占满整个屏幕，手机上看底部导航栏有遮盖一点，向上可以拉出来；改成固定在底部，没数据用力上拉的时候导航栏消失不见；

12* 在vue3+vite项目下按需引入vant报错Failed to resolve import解决方案

image.png

在vite.config.js配置中添加代码块：

libs: [
    {
      libraryName: 'vant',
      esModule: true,
      resolveStyle: name => `../es/${name}/style`
    }
]

image.png

13.vue3的路由路由时，params传参失效问题

image.png

点击链接查看更新日志:

image.png

image.png

14.安卓手机在微信打开某个h5页面长按保存图片失败，但有些页面可以

原因：安卓手机微信H5中无法长按保存base64图片、blob形式图片。

描述：该页面生成海报预览时，为blob格式的URL

运用：

export const imageToBlob = async url => {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = 'Anonymous';
        const canvas = document.createElement('canvas');

        img.onload = () => {
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            canvas.toBlob(resolve);
        };
        img.onerror = reject;
        img.src = url;
    });
};

export const Blob2ImageFile = (blob, {name, type}) => {
    return new window.File([blob], `${name}`, { type:  type || blob.type });
}
avatar
文章
阅读
粉丝