小程序分享到朋友、朋友圈

前言

记录我遇到的问题和解决方案。

我遇到了，部分手机缩略图无法展示？（鸿蒙自定义必现！），如何获取朋友圈点进来的参数（按照格式写就可以）？使用canvas生成的临时文件可以分享给朋友吗（不可以）？自定义标题无效？（必须加入promise或提前准备好数据）onShareTimeline可异步吗？（不可以）onShareTimeline可以通过按钮点击调起吗？（不可以）可以直接打开发布朋友圈的页面吗？（不可以）

1 分享到朋友 onShareAppMessage

首先看完官方文档的描述：发送给朋友

注意点（可能会随着时间更新，当前时间是：2023/3/14）

1. 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
2. 可以通过按钮触发 查看：示例一
3. 可以异步请求后返回数据，return的字段和异步的字段需要相同 查看：示例二
4. 正常使用查看，增加后右上角分享就会出现发送给朋友按钮 示例三

示例一

<button class="list share-btn" open-type="share">
  <image class="img" src="@/static/images/share/share_bottom_3.png"></image>
  微信好友
</button>

示例二

onShareAppMessage() {
  const promise = new Promise(async resolve => {
    if (this.filterItems.tempFilePath) {
      const res = await uploadImg(this.filterItems.tempFilePath, {uploadMode: 1})
      resolve({
        imageUrl: res.imagePath.replace('http://', 'https://'),
        desc: `平均时速${this.filterItems.speed}/公里，总共用时${this.filterItems.duration}。`,
        title: `我刚刚完成了${this.filterItems.distance}公里运动！`
      })
    } else {
      resolve({
        title: `我在等你来~`
      })
    }
  })
  // 注意点：如果此处未设置title字段，异步返回了的对象中有可能也不会设置上。
  return {
    title: '',
    desc: '',
    path: '/pages/home/home',
    imageUrl: '',
    promise
  }
},

示例三

onShareAppMessage() {
    return {
      title: '加油打工人！',
      path: '/page/user?id=123'
    }
}

2 分享到朋友圈 onShareTimeline

首先看完官方文档的描述：分享到朋友圈

注意点（可能会随着时间更新，当前时间是：2023/3/14）

1. 不可以通过按钮点击(open-type)触发，需要引导用户点击...中的分享到朋友圈
2. 只有定义了onShareAppMessage和onShareTimeline，右上角菜单才会显示“转发到朋友圈”按钮
3. 不可以使用promise动态请求，动态图片和标题需提前请求好
4. 打开发布页后，仅能编辑文字
5. 分享出去的链接，用户只可以通过单页模式打开，无法进行跳转等操作。(具体查看单页模式下的限制)
6. 实测华为鸿蒙系统或者说某些手机，设置imageUrl后会无图片，不设置会使用当前页面截图。
7. 自定义分享内容时不支持自定义页面路径,分享的后的卡片，点击打开的是当前页面

示例：

// 分享到朋友圈
onShareTimeline: function() {
    return {
      title: '标题',
      query:'id=1&type=page',
      imageUrl:'https://'
    }
}
// 获取参数
onLoad: function(options) {
  console.log(options.id, options.type)
}