logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端编程3
前端基础知识16
UniApp15
Vue框架19
Java编程7
Java基础知识14
SpringBoot31
SpringMVC14
MyBatis8
SpringCloud15
RocketMQ1
MyCat1
数据库4
MySQL6
Redis7
MongoDB10
H21
Java技术栈4
知识整理分布式锁的实现方案MySQL事务MySQL的锁
软件工具箱14
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaPicGoRustFSVSCodeDockerObsidianObs录制
Linux知识11
树莓派安装及使用ArchLinux:常用软件ArchLinux:基础系统安装ArchLinux:深度优化ArchLInux:图形化界面安装ArchLinux:Nirifrp内网穿透Jar启动脚本Linux常用命令VirtualBox安装CentOSVirtualBox安装Ubuntu
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

代码实现

<button open-type="share" @onShareAppMessage="onShareAppMessage">转发</button>


onShareAppMessage() {
  return {
    title: '贵州立智科技有限公司邀请您加入易流协作',
    imageUrl: '/static/logo.png',
    path: '/pages/login/login?companyId=123'
  }
}

// 参数的获取在对应的页面操作
onLoad(option) {
    console.log(option.companyId); // 打印出上个页面传递的参数
}

兼容Vue3 setup

<button open-type="share" @onShareAppMessage="onShareAppMessage">邀请成员</button>

<script setup>
  import {
    ref,
    reactive
  } from 'vue';

  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'
  
  // 参数的获取在对应的页面操作
  onLoad((option) => {
    console.log(option.userId)
  })
</script>

<script>
  export default {
    onShareAppMessage() {
      return {
        title: '邀请您加入他的团队',
        imageUrl: 'https://fanmr.cn/oss/house/logo.png',
        path: '/pages/team/team?userId=' + uni.getStorageSync('userId')
      }
    }
  }
</script>

右上角点击后的分享和朋友圈

优先会使用局部的分享,在common下创建share.js

export default {
  data() {
    return {}
  },
  //1.配置发送给朋友
  onShareAppMessage() {
    return {
      title: '房源本', //分享的标题
      path: '/pages/index/index', //点击分享链接之后进入的页面路径
      imageUrl: 'https://fanmr.cn/oss/house/logo.png', //分享发送的链接图片地址
      success() {
        // 分享完成,请注意此时不一定是成功分享
        uni.showToast({
          title: "分享成功",
          duration: 3500,
          icon: "success"
        });
      },
      fail() {
        // 分享失败
        uni.showToast({
          title: "分享失败",
          duration: 3500,
          icon: "error"
        });
      }
    };
  },
  //2.配置分享到朋友圈
  onShareTimeline() {
    return {
      title: '房源本', //分享的标题
      query: '/pages/index/index', //点击分享链接之后进入的页面路径
      imageUrl: 'https://fanmr.cn/oss/house/logo.png', //分享发送的链接图片地址
      success() {
        // 分享完成,请注意此时不一定是成功分享
        uni.showToast({
          title: "分享成功",
          duration: 3500,
          icon: "success"
        });
      },
      fail() {
        // 分享失败
        uni.showToast({
          title: "分享失败",
          duration: 3500,
          icon: "error"
        });
      }
    }
  }
}

main.js添加使用

import App from './App'
import uviewPlus from '@/uni_modules/uview-plus' // uview-plus

import share from './common/share' // 新增

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus) // uview-plus
  
  app.mixin(share) // 新增

  return {
    app
  }
}
// #endif
代码实现
兼容Vue3 setup
右上角点击后的分享和朋友圈