小程序设置分享到朋友圈（原生和Vue的实现方式）

gongzemin
1,164 阅读3分钟

这篇笔记主要记录小程序,设置分享到朋友圈的方法， 包含原生、和Vue的实现方式。根据小程序文档,

小程序页面默认不可被分享到朋友圈，开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈，需满足两个条件：

  1. 首先，页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档
  2. 满足条件 1 后，页面需设置允许“分享到朋友圈”，同时可自定义标题、分享图等。具体参考 Page.onShareTimeline 接口文档 满足上述两个条件的页面，可被分享到朋友圈。

先看下成果，左侧图片按钮--转发给朋友，分享到朋友圈为不可点击状态；在我们添加一些代码后，这2个按钮都变为了可点击状态

image.png

原生的实现方式

小程序官方模板(小程序示例）就有转发给朋友，分享到朋友圈的能力

image.png

image.png

实现就是在page文件夹，在想要分享的页面的js文件，在Page({})调用onShareAppMessage和onShareTimeline.

// index.js
Page({
    onShareAppMessage() {
    return {
      title: '小程序官方组件展示',
      path: 'page/component/index'
    }
  },
  onShareTimeline() {
    '小程序官方组件展示'
  },
}）

电脑端转发给朋友截图 （截图电脑端主要是为了截图比例 移动端要拼图）

image.png

image.png

电脑端没有分享到朋友圈按钮，手机端展示

image.png

Vue的实现方式
通过onShareAppMessage, onShareTimeline这种方式（可以自定义）

思路就是在onMounted()里，通过小程序的框架接口 > 页面，getCurrentPages获取当前页面，然后调用当前页面的onShareAppMessage, onShareTimeline ,这也是我们为什么要获取当前页面的意义。onShareAppMessage, onShareTimeline 是页面事件处理函数

我们在原生实现里，这2个分享函数也是写在Page()里

image.png

看下代码，分享的部分在onMounted里, 注意我这里添加了wx.showShareMenu(), 如果你不添加，分享到朋友圈可以点击，那就不用添加，如果加了onShareTimeline,分享到朋友圈还是灰色，那就添加wx.showShareMenu()

onMounted(() => {
  if (typeof getCurrentPages === "function" && getCurrentPages().length) {
    wx.showShareMenu();
    const currentPage = getCurrentPages().slice(-1)[0];
    currentPage.onShareAppMessage = () => {
      return {
        title: "有欢有乐(记录句子)", // 转发标题 默认当前小程序名称
        path: "/page/index",      // 转发路径 当前页面 path ，必须是以 / 开头的完整路径
        imageUrl: "../../static/images/share.jpg", // 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。显示图片长宽比是 5:4。
      };
    };
    currentPage.onShareTimeline = () => {
      return {
        title: "有欢有乐(记录句子)",
        imageUrl: "../../static/images/share.jpg" // 自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。
      };
    };
  }
});

我们定义了转发给朋友的标题，页面路径，图片，分享到朋友圈的标题，图片，这2个图片都比例是不一样的，转发给朋友的比例是5:4，分享到朋友圈的比例是1:1

image.png

通过button, open-type="share"

只要添加一个按钮，不用给按钮添加bindtap事件， 点击按钮还是可以发送给好友，只是不支持自定义，然后右上角3个点那里 点击转发给好友还是不行。

<template>
  <view class="homeLayout">
    <!-- Hidden share button -->
    <button open-type="share"></button>
  </view>
</template>

image.png

分享是基于页面的，如果要多个页面都可以被分享，每个页面都要单独设置

avatar
文章
阅读
粉丝