UNIAPP 微信小程序分享功能

官方内容:

onShareAppMessage(OBJECT)

小程序中用户点击分享后,在 js 中定义 onShareAppMessage 处理函数(和 onLoad 等生命周期函数同级),设置该页面的分享信息。

  • 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮,也可能是开发者在页面中放置的分享按钮(<button open-type="share">);
  • 分享 | uni-app官网
问题是在UNIAPP VUE3 setup语法糖用法里,

onShareAppMessage不触发,

解决方法也很简单,

页面里除了setup语法糖外,再写一个<script>里面用选项式API的写法就可以触发了.

//在template中写按钮    <button open-type="share">share</button>

<script setup>
//...
	import {onShareAppMessage} from '@dcloudio/uni-app' //这句不可少
//...
</script>
//下面是选项式写法,和上面同时存在,实测可以触发
<script>
	export default {
	  onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			  console.log(res.target)
			}
			return {
//返回的对象实现自定义,具体看文档      
			  title: '自定义分享标题3333',
			  path: '/pages/test/test?id=123'
			}
	  }
	}
</script>

### 如何在 UniApp 中实现微信小程序分享功能UniApp 开发环境中,可以通过 Vue.js 的 **全局混入** 功能来实现微信小程序的全局分享能力。以下是具体的实现方法: #### 1. 全局配置分享参数 通过 `onLaunch` 方法,在 App.vue 文件中设置全局默认的分享数据。 ```javascript // App.vue export default { onLaunch() { this.globalData = { share: { title: '全局分享的标题', path: '/pages/index/index', // 默认跳转页面路径 imageUrl: '/static/images/share-default.png' // 默认分享图片 } }; }, }; ``` 此部分代码设置了全局共享的基础信息[^3]。 #### 2. 使用全局混入定义分享逻辑 利用 Vue.js 提供的 `mixins` 特性,可以统一管理所有页面的分享行为。 ```javascript // main.js 或单独创建文件 mixins/shareMixin.js import Vue from 'vue'; Vue.mixin({ data() { return { globalData: getApp().globalData, }; }, methods: { // 发送给朋友 onShareAppMessage(res) { return { title: this.globalData.share.title || '默认标题', path: `${this.globalData.share.path}?ref=${new Date().getTime()}`, // 可附加动态参数 imageUrl: this.globalData.share.imageUrl, }; }, // 分享到朋友圈 onShareTimeline(res) { return { title: this.globalData.share.title || '默认标题', path: this.globalData.share.path, imageUrl: this.globalData.share.imageUrl, }; }, }, }); ``` 上述代码实现了两个核心函数:`onShareAppMessage` 和 `onShareTimeline`,分别用于处理发送给朋友和分享到朋友圈的行为[^4]。 #### 3. 页面级覆盖全局分享配置 如果某些特定页面需要不同的分享内容,则可以在该页面重新定义 `onShareAppMessage` 和 `onShareTimeline` 函数。 ```javascript // pages/specificPage/specificPage.vue export default { data() { return { pageShareConfig: { title: '特殊页面的分享标题', path: '/pages/specificPage/specificPage?customParam=123', imageUrl: '/static/images/page-specific-share-image.jpg', }, }; }, methods: { onShareAppMessage(res) { return { title: this.pageShareConfig.title, path: this.pageShareConfig.path, imageUrl: this.pageShareConfig.imageUrl, }; }, onShareTimeline(res) { return { title: this.pageShareConfig.title, path: this.pageShareConfig.path, imageUrl: this.pageShareConfig.imageUrl, }; }, }, }; ``` 这样即可针对具体页面定制化分享内容[^2]。 #### 4. 自定义分享按钮样式 为了提供更灵活的用户体验,还可以设计自定义样式的分享按钮并绑定点击事件触发分享操作。 ```html <!-- 在页面模板中 --> <view class="share-btn-container"> <button open-type="share" class="custom-share-btn">分享</button> </view> <style lang="scss"> .custom-share-btn { width: 100px; height: 40px; background-color: #ff7f50; /* 设置背景颜色 */ color: white; /* 文字颜色 */ border-radius: 20px; /* 圆角效果 */ } </style> ``` 以上代码展示了如何通过 CSS 定制分享按钮外观。 --- ### 总结 通过组合使用 Vue.js 的全局混入机制与页面级别的局部重写策略,能够高效地完成 UniApp 微信小程序中的全局分享功能开发。同时,借助自定义组件的设计理念,可以让界面更加贴合实际需求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值