Menu Explicit/Hidden

微信小程序分享卡片

微信小程序分享卡片是指在微信中分享小程序时,会出现一个预览卡片,包含小程序的名称、封面、简介等信息。这个卡片可以让用户更好地了解小程序,提高用户点击率和转化率。

要制作微信小程序分享卡片,需要在小程序的代码中添加一些特定的标签和属性。具体步骤如下:

在小程序的 app.json 文件中,添加如下代码:

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "小程序名称",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "backgroundTextStyle": "light",
    "backgroundColor": "#f8f8f8",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007aff",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/tabbar/mine.png",
        "selectedIconPath": "images/tabbar/mine_selected.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "sitemapLocation": "sitemap.json",
  "enableShareAppMessage": true, // 开启分享功能
  "usingComponents": {}
}

在小程序的页面中,添加如下代码:

<view>
  <image src="https://example.com/images/cover.png"></image>
  <view>
    <text>小程序名称</text>
    <text>小程序简介</text>
  </view>
</view>

其中,https://example.com/images/cover.png 是小程序的封面图片地址,小程序名称小程序简介 分别是小程序的名称和简介。

在小程序的页面中,添加如下代码:

onShareAppMessage: function () {
  return {
    title: '小程序名称',
    path: '/pages/index/index',
    imageUrl: 'https://example.com/images/cover.png'
  }
}

其中,title 是分享卡片的标题,path 是小程序的路径,imageUrl 是分享卡片的封面图片地址。

完成以上步骤后,用户在微信中分享小程序时,就会出现一个预览卡片,包含小程序的名称、封面、简介等信息。

除了上述步骤,还有一些注意事项需要注意:

小程序的封面图片需要符合微信的规范,建议尺寸为 5:4,大小不超过 128KB。

小程序的名称和简介需要简洁明了,能够准确传达小程序的主要功能和特点。

小程序的路径需要正确设置,确保用户点击分享卡片后能够正确跳转到小程序的首页或指定页面。

小程序的分享卡片需要经过测试,确保在不同设备和网络环境下都能够正常显示和跳转。

小程序的分享卡片可以通过微信公众平台的数据分析功能进行监测和优化,提高用户点击率和转化率。

制作微信小程序分享卡片需要综合考虑小程序的设计、功能、用户体验等方面,确保能够吸引用户的注意力并促进小程序的推广和使用。