微信小程序如何自定义分享卡片文案和图片

微信小程序提供了onShareAppMessage方法,专门用来监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单"转发"按钮的行为,并自定义转发内容。

> 注意:只有定义了此事件处理函数,右上角菜单才会显示"转发"按钮

参数 类型 说明 最低版本
from String 转发事件来源。 button:页面内转发按钮; menu:右上角转发菜单 1.2.4
target Object 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined 1.2.4
webViewUrl String 页面中包含web-view组件时,返回当前web-view的url 1.6.4

此事件处理函数需要 return 一个 Object,用于自定义转发内容,返回内容如下:

自定义转发内容 基础库 2.8.1 起,分享图支持云图片。

字段 说明 默认值 最低版本
title 转发标题 当前小程序名称
path 转发路径 当前页面 path ,必须是以 / 开头的完整路径
imageUrl 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。 使用默认截图 1.5.0
promise 如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数 2.12.0

示例代码

PS:卡片图片imageUrl可以是本地的,也可以服务器上传的url

onShareAppMessage() {
    return {
        title: '分享出去的卡片标题',
        path: '/index/index?id=123',
        imageUrl: '/img/bg.jpg'
    }
}

如果要禁止当前页面的小程序卡片分享,则可以在onLoad中通过以下方式:

wx.hideShareMenu()

相关推荐
程序员徐师兄12 分钟前
Java 基于 SpringBoot 的校园外卖点餐平台微信小程序(附源码,部署,文档)
java·spring boot·微信小程序·校园外卖点餐·外卖点餐小程序·校园外卖点餐小程序
Q_27437851091 小时前
springboot基于微信小程序的周边游小程序
spring boot·微信小程序·小程序
计算机学姐2 小时前
基于微信小程序的民宿预订管理系统
java·vue.js·spring boot·后端·mysql·微信小程序·小程序
寰宇软件4 小时前
PHP防伪溯源一体化管理系统小程序
小程序·uni-app·vue·php
trabecula_hj5 小时前
微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)
微信小程序·小程序
菜鸟码神5 小时前
微信小程序隐藏右侧胶囊按钮,分享和关闭即右侧三个点和小圆圈按钮
微信小程序·小程序
大叔_爱编程7 小时前
wx035基于springboot+vue+uniapp的校园二手交易小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
说私域18 小时前
社群裂变+2+1链动新纪元:S2B2C小程序如何重塑企业客户管理版图?
大数据·人工智能·小程序·开源
寰宇软件20 小时前
PHP CRM售后系统小程序
微信小程序·小程序·vue·php·uniapp
浩宇软件开发1 天前
微信小程序实现自定义日历功能
微信小程序·小程序