小程序分享 - 技术栈

小程序分享

蜕变菜鸟2026-02-05 8:58

单页面分享

复制代码

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()