第14章｜预览渲染怎么刷新-171主机测评

第14章｜预览渲染怎么刷新

这一章专门讲预览怎么刷新，目标是让用户一改设置就能马上看到变化，而不是只等到保存后才知道结果。

01 首屏要刷新

这一节不是只给一句结论，而是把“首屏要刷新”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：首屏要刷新不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。
在这里插入图片描述

代码演示

// 首屏要刷新
private refreshPreview(): void {
const now = new Date();
this.previewTime = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
this.previewDate = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');
}

这里的要点

预览必须随状态刷新，而不是等用户重新进入。
时间、日期和地点要一起更新，避免只改一半。
预览要和最终结果尽量一致，不能前后两套。

首屏要刷新这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

02 时间要实时

这一节不是只给一句结论，而是把“时间要实时”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：时间要实时不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 时间要实时
const now = new Date();
const timeText = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
const dateText = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');

这里的要点

时间格式要统一，不能在不同页面里写成不同样式。
刷新时间时不要让 UI 产生跳动。
时间值要和保存逻辑对齐。

时间要实时这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

03 日期要同步

这一节不是只给一句结论，而是把“日期要同步”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：日期要同步不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。
在这里插入图片描述

代码演示

// 日期要同步
const step = '{03}';
const payload = {
title: '03 日期要同步',
ready: true,
};

这里的要点

先把 03 日期要同步讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

日期要同步这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

04 地点要回显

这一节不是只给一句结论，而是把“地点要回显”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：地点要回显不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 地点要回显
const nextAddress = (this.manualLocation || this.gpsAddress).trim();
if (nextAddress.length === 0) {
promptAction.showToast({ message: '请输入地址', duration: 1200 });
}
this.previewAddress = nextAddress;

这里的要点

手动地址要真正回填到主状态里，不能只停在输入框。
空输入要拦截，脏输入要清理。
地址改完后，预览和历史都要跟着变。

地点要回显这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

05 模板要联动

这一节不是只给一句结论，而是把“模板要联动”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：模板要联动不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 模板要联动
const templateId = this.watermarkTemplate;
const templateMap = new Map<number, string>([
[0, 'classic'],
[1, 'compact'],
[2, 'stacked'],
]);
const activeTemplate = templateMap.get(templateId) ?? 'classic';

这里的要点

模板编号要能映射到明确样式。
切换模板时，预览和结果都要同步。
模板最好不要和其他状态混在一起。

模板要联动这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

06 开关要驱动

这一节不是只给一句结论，而是把“开关要驱动”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：开关要驱动不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 开关要驱动
this.SwitchRow('时', '显示时间', '保存照片时写入拍摄时间', this.showTime, (checked: boolean) => {
this.showTime = checked;
this.refreshPreview();
});

这里的要点

开关不是装饰，它会直接影响预览和结果。
开关变化后要立即刷新，不能让用户猜。
设置页和结果页都要读取同一份状态。

开关要驱动这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

07 空值要兜底

这一节不是只给一句结论，而是把“空值要兜底”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：空值要兜底不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 空值要兜底
const fallbackAddress = this.manualLocation || this.gpsAddress || '未设置地点';
const fallbackTime = this.previewTime || '00:00';
this.previewAddress = fallbackAddress;
this.previewTime = fallbackTime;

这里的要点

空值不是报错，但必须有默认表现。
兜底值要统一，避免页面看起来断开。
默认状态要能解释给用户。

空值要兜底这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

08 变化要立即可见

这一节不是只给一句结论，而是把“变化要立即可见”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：变化要立即可见不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 变化要立即可见
const step = '{08}';
const payload = {
title: '08 变化要立即可见',
ready: true,
};

这里的要点

先把 08 变化要立即可见讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

变化要立即可见这一节的重点不是把内容写满，而是把这一点和整页链路接起来。
在这里插入图片描述

09 重复刷新要安全

这一节不是只给一句结论，而是把“重复刷新要安全”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：重复刷新要安全不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 重复刷新要安全
private refreshPreview(): void {
const now = new Date();
this.previewTime = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
this.previewDate = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');
}

这里的要点

预览必须随状态刷新，而不是等用户重新进入。
时间、日期和地点要一起更新，避免只改一半。
预览要和最终结果尽量一致，不能前后两套。

重复刷新要安全这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

10 刷新不要闪烁

这一节不是只给一句结论，而是把“刷新不要闪烁”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：刷新不要闪烁不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 刷新不要闪烁
private refreshPreview(): void {
const now = new Date();
this.previewTime = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
this.previewDate = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');
}

这里的要点

在这里插入图片描述

预览必须随状态刷新，而不是等用户重新进入。
时间、日期和地点要一起更新，避免只改一半。
预览要和最终结果尽量一致，不能前后两套。

刷新不要闪烁这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

11 刷新要可复用

这一节不是只给一句结论，而是把“刷新要可复用”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：刷新要可复用不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 刷新要可复用
private refreshPreview(): void {
const now = new Date();
this.previewTime = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
this.previewDate = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');
}

这里的要点

预览必须随状态刷新，而不是等用户重新进入。
时间、日期和地点要一起更新，避免只改一半。
预览要和最终结果尽量一致，不能前后两套。

刷新要可复用这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

12 格式要统一

这一节不是只给一句结论，而是把“格式要统一”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：格式要统一不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 格式要统一
const step = '{12}';
const payload = {
title: '12 格式要统一',
ready: true,
};

这里的要点

先把 12 格式要统一讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

格式要统一这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

13 深浅色要兼容

这一节不是只给一句结论，而是把“深浅色要兼容”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：深浅色要兼容不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 深浅色要兼容
const step = '{13}';
const payload = {
title: '13 深浅色要兼容',
ready: true,
};

这里的要点

先把 13 深浅色要兼容讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

深浅色要兼容这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

14 宽窄屏要兼容

这一节不是只给一句结论，而是把“宽窄屏要兼容”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：宽窄屏要兼容不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 宽窄屏要兼容
const step = '{14}';
const payload = {
title: '14 宽窄屏要兼容',
ready: true,
};

这里的要点

先把 14 宽窄屏要兼容讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

宽窄屏要兼容这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

15 结果要一致

这一节不是只给一句结论，而是把“结果要一致”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：结果要一致不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 结果要一致
const step = '{15}';
const payload = {
title: '15 结果要一致',
ready: true,
};

这里的要点

先把 15 结果要一致讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

结果要一致这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

16 状态要来源统一

这一节不是只给一句结论，而是把“状态要来源统一”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：状态要来源统一不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 状态要来源统一
type LocationSource = 'gps' | 'manual';

const source: LocationSource = this.manualLocation ? 'manual' : 'gps';
const record = { source, address: this.currentAddress };

这里的要点

GPS 和手动来源要明确区分。
来源不同，保存和展示逻辑可能不同。
来源字段要保留，后面排查会更容易。

状态要来源统一这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

17 更新要有边界

这一节不是只给一句结论，而是把“更新要有边界”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：更新要有边界不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 更新要有边界
const step = '{17}';
const payload = {
title: '17 更新要有边界',
ready: true,
};

这里的要点

先把 17 更新要有边界讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

更新要有边界这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

18 页面重入要恢复

这一节不是只给一句结论，而是把“页面重入要恢复”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：页面重入要恢复不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 页面重入要恢复
private persistSettings(): void {
PersistentStorage.persistProp('wmShowTime', this.showTime);
PersistentStorage.persistProp('wmShowAddress', this.showAddress);
PersistentStorage.persistProp('wmLocationHistory', JSON.stringify(this.historyList));
}

这里的要点

保存要覆盖用户真的会改的字段，不能只存一半。
恢复要容错，旧数据缺字段时也要能工作。
持久化写完后，重进页面要能读回原状态。

页面重入要恢复这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

19 预览要能解释

这一节不是只给一句结论，而是把“预览要能解释”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：预览要能解释不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 预览要能解释
private refreshPreview(): void {
const now = new Date();
this.previewTime = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0');
this.previewDate = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');
}

这里的要点

预览必须随状态刷新，而不是等用户重新进入。
时间、日期和地点要一起更新，避免只改一半。
预览要和最终结果尽量一致，不能前后两套。

预览要能解释这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

20 本章结论

这一节不是只给一句结论，而是把“本章结论”放进整个第14章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：本章结论不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

// 本章结论
const step = '{20}';
const payload = {
title: '20 本章结论',
ready: true,
};

这里的要点

先把 20 本章结论讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

本章结论这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

本章小结

这一章把一个点讲透以后，下一章才能继续往下接，不会停留在只会看结果的层面。

流程图

#mermaid-svg-PsxO9CazxzTGDvLb{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-PsxO9CazxzTGDvLb .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-PsxO9CazxzTGDvLb .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-PsxO9CazxzTGDvLb .error-icon{fill:#552222;}#mermaid-svg-PsxO9CazxzTGDvLb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-PsxO9CazxzTGDvLb .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-PsxO9CazxzTGDvLb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-PsxO9CazxzTGDvLb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-PsxO9CazxzTGDvLb .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-PsxO9CazxzTGDvLb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-PsxO9CazxzTGDvLb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-PsxO9CazxzTGDvLb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-PsxO9CazxzTGDvLb .marker.cross{stroke:#333333;}#mermaid-svg-PsxO9CazxzTGDvLb svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-PsxO9CazxzTGDvLb p{margin:0;}#mermaid-svg-PsxO9CazxzTGDvLb .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-PsxO9CazxzTGDvLb .cluster-label text{fill:#333;}#mermaid-svg-PsxO9CazxzTGDvLb .cluster-label span{color:#333;}#mermaid-svg-PsxO9CazxzTGDvLb .cluster-label span p{background-color:transparent;}#mermaid-svg-PsxO9CazxzTGDvLb .label text,#mermaid-svg-PsxO9CazxzTGDvLb span{fill:#333;color:#333;}#mermaid-svg-PsxO9CazxzTGDvLb .node rect,#mermaid-svg-PsxO9CazxzTGDvLb .node circle,#mermaid-svg-PsxO9CazxzTGDvLb .node ellipse,#mermaid-svg-PsxO9CazxzTGDvLb .node polygon,#mermaid-svg-PsxO9CazxzTGDvLb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-PsxO9CazxzTGDvLb .rough-node .label text,#mermaid-svg-PsxO9CazxzTGDvLb .node .label text,#mermaid-svg-PsxO9CazxzTGDvLb .image-shape .label,#mermaid-svg-PsxO9CazxzTGDvLb .icon-shape .label{text-anchor:middle;}#mermaid-svg-PsxO9CazxzTGDvLb .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-PsxO9CazxzTGDvLb .rough-node .label,#mermaid-svg-PsxO9CazxzTGDvLb .node .label,#mermaid-svg-PsxO9CazxzTGDvLb .image-shape .label,#mermaid-svg-PsxO9CazxzTGDvLb .icon-shape .label{text-align:center;}#mermaid-svg-PsxO9CazxzTGDvLb .node.clickable{cursor:pointer;}#mermaid-svg-PsxO9CazxzTGDvLb .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-PsxO9CazxzTGDvLb .arrowheadPath{fill:#333333;}#mermaid-svg-PsxO9CazxzTGDvLb .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-PsxO9CazxzTGDvLb .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-PsxO9CazxzTGDvLb .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-PsxO9CazxzTGDvLb .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-PsxO9CazxzTGDvLb .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-PsxO9CazxzTGDvLb .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-PsxO9CazxzTGDvLb .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-PsxO9CazxzTGDvLb .cluster text{fill:#333;}#mermaid-svg-PsxO9CazxzTGDvLb .cluster span{color:#333;}#mermaid-svg-PsxO9CazxzTGDvLb div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-PsxO9CazxzTGDvLb .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-PsxO9CazxzTGDvLb rect.text{fill:none;stroke-width:0;}#mermaid-svg-PsxO9CazxzTGDvLb .icon-shape,#mermaid-svg-PsxO9CazxzTGDvLb .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-PsxO9CazxzTGDvLb .icon-shape p,#mermaid-svg-PsxO9CazxzTGDvLb .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-PsxO9CazxzTGDvLb .icon-shape .label rect,#mermaid-svg-PsxO9CazxzTGDvLb .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-PsxO9CazxzTGDvLb .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-PsxO9CazxzTGDvLb .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-PsxO9CazxzTGDvLb :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

进入页面

读取状态

刷新时间

刷新日期

刷新地点

渲染预览

验证方式

先看每个小标题下面是不是都有正文和代码。
再看要点是不是围绕这个小标题本身展开。
最后看流程图能不能把这一章的链路串起来。