uni-app vue3 实现微信朋友圈和朋友分享功能

 

1. 新建 share.js

export default {

  data() {
    return {}
  },
  
  //1.配置发送给朋友
  onShareAppMessage() {
    return {
      title: '分享的标题', //分享的标题
      path: 'pages/index', //点击分享链接之后进入的页面路径
      imageUrl: '' //分享发送的链接图片地址
    };
  },

  //2.配置分享到朋友圈
  onShareTimeline() {
    return {
      title: '分享的标题', //分享的标题
      query: 'pages/index', //点击分享链接之后进入的页面路径
      imageUrl: '' //分享发送的链接图片地址
    }
  },
}

2. 全局混入

// #ifdef VUE3
import { createSSRApp } from 'vue'
import share from './utils/share.js' 

export function createApp() {
  const app = createSSRApp(App)
  app.mixin(share)
  return {
    app
  }
}
// #endif

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
x	x	√	√	x	√	√	√	√

 

 此事件需要 return 一个 Object，用于自定义分享内容，其内容如下：