uni-app 小程序全局挂载分享功能,并动态配置页面是否可以分享

  1. 基于uni-app 小程序全局挂载 onShareTimeline 和 onShareAppMessage 方法
  2. 动态设置 onShareTimeline 和 onShareAppMessage 方法

1. 创建一个share.js 全局混入模块

js 复制代码
// utils/share.js
export default {
  data() {
    return {
      // 计数器 奇数不能分享
      count: 0
    }
  },
  onShareTimeline(res) {
    this.count++
    return {
      title: '转发朋友圈',
      query: 'id=123',
      imageUrl: '你的图片',
      promise: new Promise((resolve, reject) => {
        // 判断是否进行分享 偶数可以分享
        if (this.count % 2 === 0) {
          resolve({
            title: `转发朋友圈${this.count}`,
            query: 'id=123',
            imageUrl: '你的图片',
          })
        } else {
          reject()
          uni.showToast({
            title: `奇数不允许分享${this.count}`,
            icon: 'none'
          })
        }
      })
    }
  },
  onShareAppMessage(e) {
    this.count++
    return {
      title: '转发给好友',
      path: '/pages/main/main',
      imageUrl: '你的图片',
      promise: new Promise((resolve, reject) => {
        // 判断是否进行分享
        if (this.count % 2 === 0) {
          resolve({
            title: `转发给好友${this.count}`,
            path: '/pages/main/main',
            imageUrl: '你的图片',
          })
        } else {
          reject()
          uni.showToast({
            title: `奇数不允许分享${this.count}`,
            icon: 'none'
          })
        }
      })
    }
  }
}

2. 在全局入口文件main.js全局混入

js 复制代码
import App from './App'
import { useSentry } from './utils/sentry'
import share from './utils/share'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.mixin(share)// 非 vue3 项目
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  useSentry(app)
  app.mixin(share)// vue3 项目
  return {
    app
  }
}
// #endif
  • 扩展
  1. 案例中的 count 判断,可以换成当前页面的 path,再维护一个可分享页面池子,判断 path 是否在池中,决定是否能分享
  2. button 类型的分享,可以在页面中向 share.js 传递参数,实现特殊的分享内容。也可以使用 uni.$emit 等方法实现
html 复制代码
<template>
	<button open-type="share" @click="setShareInfoTomixin"></button>
</template>
<script setup lang="ts">
	import { getCurrentInstance } from 'vue'
	const { ctx } = getCurrentInstance() as any
	// setShareInfoTomixin方法必须先触发,不能写在 <button open-type="share"></button> 里面
	const setShareInfoTomixin = (index: number)=>{
    //  setShareInfo 可以是share.js文件 methods 中的任意方法
 	ctx.setShareInfo({
		title: `转发朋友圈${this.count}`,
		query: 'id=123',
		imageUrl: '你的图片',
     })
}
</script>
相关推荐
weixin_440058312 小时前
2026知识付费小程序:年费全包零抽成,录播题库全功能覆盖
小程序·apache·小程序开发
小羊Yveesss4 小时前
2026年微信小程序后端怎么搭建?后台、数据、接口和运维怎么选
运维·微信小程序·小程序
迅速的自行车5 小时前
从一段模板说起
前端·javascript·vue.js
HackTwoHub6 小时前
ARL灯塔重构版:支持APP/小程序/WEB资产同步扫描
人工智能·安全·web安全·网络安全·小程序·重构·自动化
投票竞赛8 小时前
避雷按单场活动扣费平台,2026 在线投票测评不限频次新建投票评选活动
小程序
阿奇__10 小时前
uniapp微信小程序图片上传含回显组件(拍照,相册)
前端·javascript·vue.js
2501_9159090611 小时前
IPA 深度混淆是什么意思?从混淆强度到实际效果的解读
android·ios·小程序·https·uni-app·iphone·webview
前端甜糖11 小时前
前端如何实现在线预览office常见文件功能?
前端·vue.js
莫名的好感°12 小时前
2026家庭快消品采购小程序实测体验
小程序
ljs64827395112 小时前
智慧商城(Smart Mall):基于 Spring Boot + Vue 3 的现代化电商平台实战
linux·vue.js·spring boot·后端