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

这篇具有很好参考价值的文章主要介绍了微信小程序如何自定义分享卡片文案和图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序提供了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()文章来源地址https://www.toymoban.com/news/detail-637422.html

到了这里,关于微信小程序如何自定义分享卡片文案和图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 分享图片大小处理

    1、在分享的page 添加 canvas 标签 2、在分享的page 引入makeCanvas(之后下边会定义),并在onShareAppMessage里使用 3、图片处理的主要文件(导出makeCanvas),一般作为工具包,需要的时候引入 这里将图片处理为5:4的大小,默认生成的图片为jpg格式 之后在微信小程序分享时应该就能看

    2024年02月16日
    浏览(51)
  • 微信小程序分享图片给微信好友

    1.服务器地址:先用wx.downloadFile转为本地地址,再用 wx.showShareImageMenu进行分享 2.本地地址直接用wx.showShareImageMenu进行分享 3.需要在微信公众平台对服务器地址进行配置(downloadFile合法域名)

    2024年02月09日
    浏览(67)
  • 微信小程序分享(禁用分享,自定义分享禁用右上角...分享)

    1. 禁用分享 2.自定义分享 button class=\\\"share-button\\\" open-type=\\\"share\\\"/button 给button标签添加open-type=\\\"share\\\"属性,在点击按钮时候自动触发页面内的onShareAppMessage函数 如果你只想在点击按钮是触发分享,这是可以禁用右上角...中的分享  

    2024年02月06日
    浏览(60)
  • 微信小程序:使用canvas 生成图片 并分享

    废话不多说直接上代码!!!! 最终效果图  

    2024年02月11日
    浏览(59)
  • 微信小程序(uniapp)-实现分享图片给微信好友

    官方地址: 微信开放文档 | wx.showShareImageMenu(Object object) 示例代码:

    2024年02月11日
    浏览(77)
  • uniapp微信小程序全局分享和自定义页面分享

    uniapp 实现微信小程序的全局 转发给好友/分享到朋友圈 的功能。主要使用 Vue.js 的 全局混入 概念。 1.在项目根目录创建mixins文件夹,然后创建全局分享的 js 文件。mixins/share.js  2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入: 3.自定义页

    2024年02月13日
    浏览(58)
  • 微信小程序分享图片给微信好友(如二维码)

    目录 前言 一、使用哪种api? 二、对图片的处理需要转化为临时路径 三、Windows端兼容性问题 最近在公司开发一个微信小程序项目,用到的uniapp技术,在分享图片时,查看了uniapp的技术文档,写的还是很粗糙的,说得不太清楚,在我看了一个下午得出了一个结论,uniapp并没有

    2024年02月11日
    浏览(55)
  • uniapp 微信小程序 绘制海报,长按图片分享,保存海报

    uView UI 2.0 dcloud 插件市场地址

    2024年02月12日
    浏览(62)
  • uniapp微信小程序使用canvas自定义分享名片

    template js 需要分享的页面加上onShareAppMessage,在methods中定义绘画方法createCanvasImage css这里是画布的内容设置

    2024年02月14日
    浏览(52)
  • 使用taro+canvas实现微信小程序的图片分享功能

    二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。 使用场景及功能:微信小程序 生成海报图片 分享好友 下载图

    2024年02月05日
    浏览(132)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包