ykt-wxapp/utils/share-usage-example.md

微信小程序分享功能使用指南

功能说明

提供了完整的微信小程序分享功能，包括：

• 分享给好友
• 分享到朋友圈
• 保存图片到相册

使用方法

1. 基础分享（在页面中）

<template>
  <view>
    <button open-type="share">分享给好友</button>
  </view>
</template>

<script setup>
import { createShareMessage, createShareTimeline } from '@/utils/share'

// 分享给好友
function onShareAppMessage() {
  return createShareMessage({
    title: '分享标题',
    path: '/pages/index/index?id=123',
    imageUrl: 'https://example.com/share.jpg'
  })
}

// 分享到朋友圈（需要在 app.json 中配置）
function onShareTimeline() {
  return createShareTimeline({
    title: '朋友圈标题',
    query: 'id=123',
    imageUrl: 'https://example.com/share.jpg'
  })
}

// 导出分享方法
defineExpose({
  onShareAppMessage,
  onShareTimeline
})
</script>

2. 使用分享组件

<template>
  <view>
    <share-actions 
      @save="handleSave"
      :show-save="true"
      :show-share="true"
      save-text="保存图片"
      share-text="分享微信"
    />
  </view>
</template>

<script setup>
import { saveImageToAlbum, createShareMessage } from '@/utils/share'
import shareActions from '@/components/share-actions.vue'

// 保存图片
async function handleSave() {
  const imagePath = 'https://example.com/image.jpg'
  await saveImageToAlbum(imagePath)
}

// 分享配置
function onShareAppMessage() {
  return createShareMessage({
    title: '分享标题',
    path: '/pages/index/index'
  })
}

defineExpose({
  onShareAppMessage
})
</script>

3. 保存二维码图片

<template>
  <view>
    <uqrcode ref="qrcode" canvasId="qrcode" :value="qrcodeUrl" />
    <button @click="saveQrcode">保存二维码</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { saveImageToAlbum } from '@/utils/share'
import { toast } from '@/utils/widget'

const qrcode = ref(null)
const qrcodeUrl = ref('https://example.com')

async function saveQrcode() {
  try {
    if (!qrcode.value) {
      toast('二维码未加载完成')
      return
    }
    
    // 获取二维码临时文件路径
    const tempFilePath = qrcode.value.toTempFilePath()
    if (tempFilePath) {
      await saveImageToAlbum(tempFilePath)
    } else {
      toast('获取二维码失败')
    }
  } catch (err) {
    console.error('保存失败:', err)
    toast('保存失败')
  }
}
</script>

4. 动态分享内容

<script setup>
import { ref, computed } from 'vue'
import { createShareMessage } from '@/utils/share'

const currentItem = ref({
  id: '123',
  title: '商品标题',
  image: 'https://example.com/product.jpg'
})

// 动态生成分享配置
function onShareAppMessage() {
  return createShareMessage({
    title: currentItem.value.title,
    path: `/pages/detail/detail?id=${currentItem.value.id}`,
    imageUrl: currentItem.value.image
  })
}

defineExpose({
  onShareAppMessage
})
</script>

配置说明

1. 启用分享到朋友圈

在 pages.json 中配置页面：

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页",
    "enableShareTimeline": true
  }
}

2. 全局分享配置

在 App.vue 中配置全局分享：

<script>
export default {
  onShareAppMessage() {
    return {
      title: '默认分享标题',
      path: '/pages/index/index'
    }
  },
  onShareTimeline() {
    return {
      title: '默认朋友圈标题'
    }
  }
}
</script>

API 说明

createShareMessage(options)

创建分享给好友的配置

参数：

• title (string): 分享标题
• path (string): 分享路径
• imageUrl (string): 分享图片URL

返回： 分享配置对象

createShareTimeline(options)

创建分享到朋友圈的配置

参数：

• title (string): 分享标题
• query (string): 分享路径参数
• imageUrl (string): 分享图片URL

返回： 分享配置对象

saveImageToAlbum(filePath)

保存图片到相册

参数：

• filePath (string): 图片路径（本地临时路径或网络路径）

返回： Promise

注意事项

1. 分享图片建议尺寸：5:4，推荐 500x400px
2. 分享路径必须是已注册的页面路径
3. 保存图片需要用户授权相册权限
4. 分享到朋友圈需要在页面配置中启用
5. 网络图片会自动下载后保存到相册