0%

问题描述

小程序内嵌 webview 网站显示不正常,单独把网站地址放置浏览器正常工作

问题思考

肯定是网站的地址参数问题

断定理由:

  • 理由 1:网站是可以打开,只是显示不正确
  • 理由 2:相同地址不同参数,一个现实正常一个现实不正常

把问题的原因告诉做内嵌网站的那个同事 A 了,结果找到一天都没有找到原因。他跟另外一个同事说:可能是我升级环境导致的问题,由 vue2 升级到 vue3 导致(无语,完全跟这无关啊)

根据与另外一个 B 同事的尝试,最后发现的问题,地址多了一个换行符导致。(额,哪里会多拼一个换行符出来了,直接调试定位到以下代码)

具体原因

vscode 安装 prettier,自动格式化后把超过长度限制的拼接地址加了换行。

解决办法

总结

  • 切忌:不要纯手工手动拼接 url,直接将 url 参数转成对象,然后根据对象生成 url 参数(这也是以前的同事为了偷懒导致的问题)

以上:如发现有问题,欢迎留言指出,我及时更正

问题描述:

多线程下载:简单多个任务下载无问题,大批量下载任务,出现部分任务丢失问题

问题现象:

  • 问题 1:添加完任务后,update 不自动执行,需要通过直接调用 Update 才执行(没有深究其原因,就先临时这么处理了,于是就引发后面的诡异问题)
  • 问题 2:简单多个任务下载无问题,大批量下载任务,出现部分任务丢失问题

思考问题 2:

既然不大量下载就没有问题,那就弄个最简单的批量下载来复现问题,接下来就发现了以下新问题 3

  • 问题 3:共享队列刚刚添加完 item,update 的时候队列总是为空

思考问题 3

  • 思考 1:多线程导致数据不一致问题,添加在一个线程,update 在另外一个线程(已添加了锁,不应该是这个问题)
  • 思考 2:哪里把数据又删除了 或者把队列重置了(仔细检查了一遍删除相关代码无问题,把所有队列赋值的地方加个断点调试一下,发现只有 1 处地方,运行发现执行了 2 次,原因:CDLWork 对象 init 两次导致)

回顾一下代码

阅读全文 »

情境

  • 对比效果

    为啥看不清我女朋友… (开玩笑)

  • 代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

    ...
    const expWidth = this.eW || width;
    const expHeight = this.eH || height;
    ...
    const commonParams = {
    x: x,
    y: y,
    width: width,
    height: height,
    destWidth: expWidth,
    destHeight: expHeight,
    fileType: this.fType,
    quality: Number(this.qlty),
    };

    uni.canvasToTempFilePath(
    Object.assign(commonParams, {
    canvasId: "avatar-canvas",
    success: (r) => {
    ...
    },
    fail: (res) => {
    triggerFail(res.errMsg);
    },
    complete: () => {
    triggerFinish();
    },
    }),
    this
    );

原因

截图的尺寸宽高固定值,而没有根据设备的像素比来动态设置,自然在高分辨率下截图出一个小尺寸图片,然后将其拉伸到大一点的尺寸显示就变得模糊了

解决方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const commonParams = {
x: x,
y: y,
width: width,
height: height,
destWidth: expWidth,
destHeight: expHeight,
fileType: this.fType,
quality: Number(this.qlty),
};

const sysInfo = uni.getSystemInfoSync();
this.pixelRatio = sysInfo.pixelRatio;

//说明:根据像素比来截去图片,避免高分辨率查看图片模块的情况
const expWidth = (this.eW || width) * this.pixelRatio;
const expHeight = (this.eH || height) * this.pixelRatio;

uni.canvasToTempFilePath(
Object.assign(commonParams, {
canvasId: "avatar-canvas",
success: (r) => {
...
},
fail: (res) => {
triggerFail(res.errMsg);
},
complete: () => {
triggerFinish();
},
}),
this
);

参考文献

以上:如发现有问题,欢迎留言指出,我及时更正

实现

1
2
3
4
5
6
7
8
9
.circle {
background: gold;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
1
<div class="circle">text</div>

效果

总结:

  • 需要固定宽高,否则会导致文字被压扁

参考文献

以上:如发现有问题,欢迎留言指出,我及时更正