- 小程序端直接调用原生 wx.setClipboardData,避免 Taro Promise 封装问题 - 避免微信小程序重复显示复制成功提示和误报复制失败 - 失败时仅在小程序端输出错误日志,非小程序端显示提示 - 修改首页外链跳转逻辑,支持相对路径跳转,小程序内外链复制提示提升用户体验 - 更新项目内剪切板使用规范文档,说明复制行为调整及符合相应规范要求
2.6 KiB
2.6 KiB
websopy-taro 项目记忆
Tailwind CSS 在小程序中的兼容性规则
以下 Tailwind 类名在 WXSS 中不兼容,项目内禁止使用,已通过 PostCSS 插件 postcss-remove-wxss-incompatible.js 自动移除对应的 CSS 规则:
-
!xxximportant 修饰符(如!visible):生成.!visible选择器,WXSS 不支持反斜杠转义的!。 -
带
0.5的类名(如w-0.5、h-0.5、gap-0.5):类名中的.被转义为\.,生成.w-0\.5这样的选择器,WXSS 不兼容。应改用等效的整数尺寸或自定义值替代。 -
space-x-*/space-y-*(如space-y-4):依赖:not()+~兄弟组合器 + CSS 变量 + 嵌套calc(),WXSS 全不支持。应改用flex flex-col gap-*实现等效间距。 -
divide-x-*/divide-y-*:同样依赖:not()+~,WXSS 不兼容。
替代方案速查
| 禁用类名 | 替代写法 |
|---|---|
space-y-4 |
flex flex-col gap-4 |
space-x-4 |
flex flex-row gap-4 |
!visible |
直接写 style={{ visibility: 'visible' }} 或自定义类 |
w-0.5 |
用自定义值或 w-1 替代 |
微信小程序接口合规
剪切板接口(运营规范 5.15.4)
- 只允许用户主动触发复制:所有
Taro.setClipboardData调用必须绑定在明确的用户点击事件上,禁止在无用户操作时自动读写剪切板。 - 禁止复制后强制中断流程:复制成功后不得强制跳转、强制关注、强制添加客服等,不能要求用户通过其他方式才能完成当前业务流程。
- 避免重复/失败 Toast 干扰体验:微信小程序调用
setClipboardData成功后系统会自带「内容已复制」提示。为避免重复提示及误报失败,统一封装utils/common.ts中的copyText函数:- 小程序端(weapp)直接调用原生
wx.setClipboardData,不再额外显示自定义复制成功/复制失败Toast - 失败时仅通过
console.error输出错误日志,便于排查 - 非小程序端保留原有成功/失败提示
- 小程序端(weapp)直接调用原生
项目内剪切板使用现状
已审查所有 setClipboardData 调用:
- 均通过按钮点击触发(复制咨询模板、复制密钥、复制链接、复制兑换码等)
- 无
getClipboardData(自动读取剪切板)调用 - 无复制后强制跳转或中断业务流程的行为
- 首页「立即开通」等外链按钮点击后复制链接;相对路径入口(如开发者中心)改为
Taro.navigateTo跳转,不再复制
当前实现基本符合 5.15.4 规范。