微信小程序开发-桌面端和移动端UI表现不一致问题记录

零、引擎说明

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;
}

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、尺寸过大	重命名、转格式、压缩
缓存与更新	服务器缓存未清理/开发工具未重启	清理缓存 → 重启工具