uni-app实现微信小程序收藏功能 uni-app引导收藏弹窗-uni-app-PHP中文网

微信小程序收藏需用条件编译调用 wx.addfavorite，仅限真机/体验版，须传 type: 'miniprogram' 和合法 webviewurl，用户主动触发，且 app 需在 onlaunch/onshow 中解析 scene=1089 并跳转。

uni-app实现微信小程序收藏功能 uni-app引导收藏弹窗

微信小程序收藏功能在 uni-app 中怎么调用

uni-app 本身不提供跨平台的「收藏」能力，微信小程序的收藏必须调用 wx.addFavorite，而这个 API 仅在微信小程序环境可用，且需满足特定条件才能触发。直接在 uni.addFavorite 或类似 uni 封装 API 中调用会失败——因为 uni-app 官方并未封装该接口，uni.addFavorite 根本不存在。

所以实际做法是：条件编译 + 原生微信 API 调用。只在微信小程序平台生效，其他平台需降级处理（比如提示“暂不支持”或跳转引导页）。

必须在真机调试或体验版/正式版中测试，开发者工具里 wx.addFavorite 默认返回 fail system error
调用前需确保页面已获得用户授权（但该 API 不需要 scope，无需提前 uni.authorize）
仅支持在 Page 实例的生命周期内调用（如 onLoad、onShow 或用户点击事件回调中），不能在组件内部直接调用（需通过 getCurrentPages() 获取当前 page 实例再调用）

如何正确触发微信收藏弹窗（含参数配置）

微信的 wx.addFavorite 会自动弹出系统级收藏弹窗，但弹窗内容完全由传入的 webViewUrl 或 type 决定。uni-app 页面默认是自定义组件模式（custom），不带 URL，因此必须显式指定 webViewUrl 才能显示标题、图标和描述。

常见错误是只传 type: 'miniProgram' 却不传 webViewUrl，结果弹窗空白或报错 fail invalid webViewUrl。

type 必须为 'miniProgram'（不可写 'miniprogram' 或省略）
webViewUrl 推荐填当前页面完整路径（含 query），例如 '/pages/detail/detail?id=123'；若为空或非法，弹窗无法展示有效信息
title 和 imageUrl 可选，但建议显式传入，否则取页面 navigationBarTitleText 和默认 icon，不可控
query 字段可额外透传参数，但实际收藏后打开时不会自动还原（需在 onLaunch/onShow 中自行解析）

if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') {
  // 微信环境判断更准：使用条件编译
  // #ifdef MP-WEIXIN
  wx.addFavorite({
    type: 'miniProgram',
    title: '商品详情',
    imageUrl: 'https://xxx.com/icon.png',
    webViewUrl: '/pages/detail/detail?id=123',
    success: res => console.log('收藏成功', res),
    fail: err => console.error('收藏失败', err)
  })
  // #endif
}

uni-app 中引导收藏弹窗的合理时机与交互设计

微信限制了 wx.addFavorite 的调用频率和上下文：不能在页面 onLoad 立即调用（会被拦截），也不能脱离用户主动操作（如定时器、滚动监听触发）。必须由用户明确手势触发，比如按钮点击、长按、右上角菜单等。

Wechat MP Article Stats Comments Suite - 微信公众号管理套件

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

常见的错误引导方式是「一进页面就弹收藏浮层」，这既违反微信规范，也容易被系统静默拒绝，还影响用户体验。

推荐放在页面内容展示充分后，配合业务动线出现，例如「加入购物车」按钮旁增加「⭐ 收藏本品」文字按钮
避免使用模态弹窗强引导（如遮罩层+大按钮），微信对诱导收藏敏感，可能被判定为营销骚扰
首次调用失败时（如用户点取消），不要反复弹提示；可记录本地 localStorage 标记「已提示」，下次进入不再打扰
可在右上角胶囊菜单中添加「收藏」选项（通过 uni.showActionSheet + 条件编译），比自定义按钮更原生、更可信

为什么收藏后再次打开没跳转到原页面

收藏成功后，用户从微信「我的收藏」进入小程序，微信默认启动首页（app.json 的 pages[0]），并不会自动跳转到你收藏时传的 webViewUrl 页面。这是微信的设计逻辑，不是代码 bug。

要实现「收藏即跳转」，必须在 App 入口做路由分发：

在 App.vue 的 onLaunch / onShow 中检查 options.scene === 1089（表示从收藏卡片进入）
同时读取 options.query（注意：只有在收藏时传了 query 字段，且用户是通过收藏卡片点击进入，才会携带）
手动 uni.navigateTo 到目标页面，例如：uni.navigateTo({ url: '/pages/detail/detail?' + options.query })
若未传 query，则只能靠 webViewUrl 字符串自行解析，建议统一约定格式（如固定以 __fav__= 开头）

这个环节最容易被忽略：写了收藏逻辑，却没配入口跳转，导致用户感觉「收藏没用」。