支付宝小程序分享时封面图片设置

最新推荐文章于 2024-09-23 15:48:53 发布

菜菜的小程

最新推荐文章于 2024-09-23 15:48:53 发布

阅读量1.7k

点赞数

分类专栏： wangeditor简单使用文章标签：小程序 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_56135996/article/details/125166394

版权

wangeditor简单使用专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在支付宝小程序中设置分享时的封面图片，包括默认图片的设定和使用接口返回数据的情况。建议的比例为5:4。详细文档参考官方链接：https://opendocs.alipay.com/mini/framework/page-detail#%E9%A1%B5%E9%9D%A2%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

支付宝小程序分享时封面图片设置

 <button class='share-friend' open-type="share">
      <image src='/images/share-icon.png'></image>
       <text>分享好友</text>
 </button>

/**
   * 分享给好友
   */
   // 固定方法
  onShareAppMessage(res) {
    const staffId = this.data.originStaffId;
    const packageCode = this.data.packageCode;
    const salesPage = true;
    if (res.from !== "button") return;
    return {
    // 转发时顶部title
      title: `${this.data.productDetail.packageName}`,
      // 转发时描述
      desc: '智行未来 出行无忧',
      // 需要转发的页面 可拼接参数
      path: `/pages/detail/index?staffId=${staffId}&packageCode=${packageCode}&salesPage=${salesPage}`,
      // 设置的展示时默认图片 
      bgImgUrl: 'https://zhonger-file.oss-cn-beijing.aliyuncs.com/zx-car-owner-welfare-api/share-img.jpg'
    };
  },

在这里插入图片描述
bgImgUrl：默认图片比例为5:4

当设置的默认图片为接口返回数据时

onShareAppMessage(res) {
    let bgImgUrl
    const remoteUrl = this.data.productDetail.coverImg
    bgImgUrl = remoteUrl
    return {
    	bgImgUrl
    }

以上为简单的分享时默认图片的设置附上官网：https://opendocs.alipay.com/mini/framework/page-detail#%E9%A1%B5%E9%9D%A2%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0
哪里不对还望指点！😉