小程序分享

单页面分享

复制代码
onShareAppMessage(res) {
			// 若为按钮触发分享,可通过res.target判断;此处默认分享整个列表页面
			return {
				title: `${this.caseList.length}个理疗案例分享`, // 分享标题
				path: `/pagesA/CustomerDetails/CustomerDetails?id=${this.ids}`, // 分享路径(需替换为你的页面实际路径)
				imageUrl: this.caseList.length > 0 ? `域名${this.caseList[0].tongue_img[0]}` : '/static/images/default-share.png', // 分享封面图(优先取第一个案例的舌象图,无则用默认图)
				desc: `包含${this.caseList.length}个理疗案例,涵盖多种理疗方案和舌象数据` // 分享描述
			}
		},
		// 微信小程序分享到朋友圈配置(仅支持小程序)
		onShareTimeline() {
			return {
				title: `${this.caseList.length}个理疗案例分享`,
				imageUrl: this.caseList.length > 0 ? `域名${this.caseList[0].tongue_img[0]}` : '/static/images/default-share.png',
				query: `id=${this.ids}` // 分享参数
			}
		},

全局分享

在项目根目录下新建 common 文件夹(若已存在可直接使用),在该文件夹内创建 globalShare.js 文件,用于编写全局分享的核心逻辑。

复制代码
// common/globalShare.js
export default {
  // 小程序分享给好友(必填)
  onShareAppMessage() {
    return {
      title: '全局默认分享标题', // 分享标题
      path: '/pages/index/index', // 分享跳转路径(必须是已在 pages.json 中注册的页面)
      imageUrl: '/static/share-default.png' // 分享封面图(可选,支持本地静态资源或网络图片)
    }
  },
  // 小程序分享到朋友圈(可选,仅微信小程序支持)
  onShareTimeline() {
    return {
      title: '全局默认朋友圈分享标题',
      imageUrl: '/static/share-default.png'
    }
  }
}

步骤 2:在 main.js 中全局注册混入

复制代码
// main.js
import Vue from 'vue'
import App from './App'
// 引入全局分享混入
import globalShare from './common/globalShare'

// 全局注册分享混入
Vue.mixin(globalShare)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()
相关推荐
lhldsg5 小时前
AI零售系统实战指南:从架构设计到落地部署全解析
java·人工智能·小程序·uni-app·零售
2601_949950631 天前
没有现成习题,试试AI再写出题
人工智能·小程序·刷题·练习·小程序推荐
andrsted1 天前
作业发布、课堂检测和错题讲评,用一个小程序完成
学习·微信小程序·小程序·学习方法
汤姆yu1 天前
基于微信小程序的家电维修预约系统
微信小程序·小程序·家电维修
软件聚导航2 天前
「聚小软 AI 助手」技术升级:从数据库检索到 RAG 知识库问答
前端·数据库·mysql·微信小程序·小程序·ai编程·rag
一叶星殇2 天前
微信小程序 Vant Popup 滚动穿透:页面级与组件级解决方案详解
微信小程序·小程序
2601_963869952 天前
【计算机毕业设计】基于微信小程序的点餐传菜系统设计与实现
微信小程序·小程序·课程设计
show4332 天前
AI证件照生成工具推荐:小程序vsAPPvs网页全对比
人工智能·小程序
北漂燕郊杨哥2 天前
VS Code 安装微信小程序 MCP 介绍
vscode·微信小程序·小程序·mcp