直接用现成的「左图右文新闻列表模板」和「RichContent图文混排组件」即可跑通主体流程，二者已在7个真实项目中验证跨端稳定性；模板已封装onPullDownRefresh与onReachBottom双触发逻辑，解决微信小程序图片闪烁、H5事件丢失、App端触发不灵敏等三端差异，并通过结构化JSON渲染富文本，规避v-html兼容问题。
直接用现成的「左图右文新闻列表模板」+「RichContent图文混排组件」就能跑通主体流程，不用从零写滚动、刷新、图片加载逻辑——这两个模块已在7个真实项目中验证过跨端稳定性。
uni-app里怎么实现左图右文新闻列表
关键不是写flex布局，而是解决三端差异：微信小程序里image的mode="widthFix"会拉伸，H5上scroll-view嵌套uni-list容易丢事件，App端onReachBottom触发不灵敏。
- 用模板自带的
pages/index/index.vue，它已封装onPullDownRefresh和onReachBottom双触发逻辑，H5端靠scroll-top动态计算防误触，App端加了debounce节流 - 图片固定宽度靠
--news-img-width: 120rpx变量控制，不是写死width: 120rpx，否则鸿蒙端缩放异常 - 左图右文结构必须加
transform: translateZ(0)（写在.news-item-image类里），否则iOS微信小程序滚动时图片闪烁 - 别直接用
uni-load-more组件，它的status状态在鸿蒙端不响应，模板里已替换成基于data.loading的手动控制
图文混排内容怎么安全渲染
富文本v-html在多端有严重兼容问题：微信小程序不支持iframe和style标签，鸿蒙端video标签需走avPlayer原生能力，H5上img懒加载失效。
- 必须用结构化JSON驱动渲染，比如
{ "type": "image", "src": "https://xxx.jpg", "radius": "12rpx" }，而不是传一串HTML字符串 -
rich-content.vue里image标签要显式写:lazy-load="true"，且mode设为"widthFix"，鸿蒙端才启用内置懒加载 - 点击图片预览不能直接调
uni.previewImage，鸿蒙端要先判断uni.getSystemInfoSync().platform === 'harmony'，再走@ohos.multimedia.image原生API - 段落间行高统一用
line-height: 1.6，别用margin-bottom分隔，否则微信小程序里block元素外边距折叠
鸿蒙适配最容易漏掉的三个点
不是所有API都能靠uni-app自动抹平，尤其涉及设备能力、存储和通知的环节，模板虽做了基础兼容，但业务层仍要主动处理。
-
manifest.json里必须加"harmony": { "template": "news", "adaptation": "uni-app" }，否则云打包时鸿蒙SDK不会注入@ohos.app.ability.UIAbility - 收藏历史用
uni.setStorageSync存本地没问题，但鸿蒙端建议补一层preferences持久化，路径写/data/preferences/news-fav.json，避免系统清理缓存时丢失 - 远程推送图文通知必须自己做
Notification Service Extension插件，uni-app默认不支持；主工程Bundle ID是com.example.news，扩展ID就得是com.example.news.pushservice，否则云打包报错
真正卡住进度的往往不是功能实现，而是某张图片在鸿蒙模拟器里加载超时、或是下拉刷新在H5真机上始终不触发——这些细节模板已收敛，但你得知道它在哪埋了钩子、参数怎么调、日志往哪看。
