零、引擎说明

webview - 桌面端， skyline - 移动端

不知道是不是因为这个原因，或者是桌面端版本限制的问题。

一、样式不同

1、text 单行：

当你采用 text 标签 的 overflow="ellipsis" max-lines="1" 时，桌面端并不能很好的工作
<text class="name {{!isMobile ? 'name-notmobile': ''}}" overflow="ellipsis" max-lines="1">{{searchMember.nickname || '频道用户'}}</text>

需主动控制：

.name-notmobile {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1; // 根据需要自行选择行数}

或者直接加“eclipse”的class，双端通用，避免兼容处理

.ellipsis {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}

1.1 空格开发者工具不展示，手机/PC端正常

space=“ensp”
微信小程序中的 space 属性用于控制文本中空格的显示方式，主要作用于 text 组件。space 属性可以取以下值：
ensp: 显示一个半角空格(相当于字符“ ”的一半宽度)。
emsp: 显示一个全角空格(相当于字符“　”的宽度)。
nbsp: 显示一个不断行的空格(相当于HTML 中的  )。
'~~~ '(三个连续的波浪号): 可以显示多个空格，具体显示个数取决于波浪号的数量。
normal: 多个空格会被合并成一个空格显示，行首的空格会被忽略。

<text class="history-item-rip" wx:for="{{ searchHistoryList }}" wx:key="item" data-key="{{item}}" space="ensp">{{item}}</text>

1.2 正常展示省略号，需要

text标签手机端当误设置flex居中的时候，开发工具及真机都是正常的内容超长后靠左局中且省略号正常。但PC端会表现为内容居中两边隐藏无省略号。
手机端：

PC端：

错误写法

display: flex;
justify-content: center;
align-items: center;
height: 28px;
border-radius: 14px;
border: 0.5px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

正确写法

display: inline-block;
max-width: 100%;
text-align: left;
box-sizing: border-box;
vertical-align: middle;
border-radius: 14px;
border: 0.5px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2、点击按钮z-index: -1。webview - 桌面端不行， skyline - 移动端可以；

微信小程序使用 webview 或是 skyline 引擎，可以在哪里设置的吗？

3、其他说明

底部安全距离：桌面端及ipad是没有底部安全距离的，因此在做开发评审设计稿的时候要同步清楚。
部分全局变量：app.less确保引入@import url('./static/vars.less');

4、微信小程序桌面端页面切入时出现左右弹动偶现的问题

问题原因是搜索组件超宽，设置最大宽和超出宽度不滚动或将不合适的组件进行宽度重新编辑即可。
且经过验证，真机预览可能会有样式更新不成功的情况，可以直接发到开发版验证。

二、UI其他问题

1、图片不展示

链接是否为 https://很重要，http://体验版桌面端会不显示

问题类型	检查点	操作
域名与协议	图片域名是否加入 downloadFile 白名单，链接是否为 https://	后台配置域名 → 验证协议一致性
调试工具干扰	是否开启 vConsole 调试	关闭调试 → 真机预览测试
图片自身问题	名称含中文、格式为 WebP、尺寸过大	重命名、转格式、压缩
缓存与更新	服务器缓存未清理/开发工具未重启	清理缓存 → 重启工具