uniapp分享好友,全局分享

小程序右上角三个点,如果没有设置分享,则是灰色的,需要设置

第一:指定页面分享

onShareAppMessage(res) {
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
 }

onShareAppMessage 与 页面的onLoad 同级,这个是指定页面可以配置其他参数 详情见文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

第二:页面内分享,通过按钮button分享

<button open-type="share">分享</button>
onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
 }

第三:全局分享,如果需要实现所有页面都分享到一个页面,每个页面都写很麻烦,可以这样实现

来源链接:https://blog.csdn.net/qq_33836424/article/details/107911648

首先,新建混入mixin-share.js

export default {
	data() {
		return {
		   //这个share可以在每个页面的data中设置相应的转发内容
			share:{
				title:'自定义标题',
				path:'/pages/home/index',
				
			}
		}
	},
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			// imageUrl: this.share.imageUrl,
			// desc: this.share.desc,
			// content: this.share.content,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}

	}
}

其次,在main.js 里面注入全局

import share from'./utils/mixin-share.js';
Vue.mixin(share)

结束,最后测试通过

要在uniapp中实现全局分享功能,你可以按照以下步骤进行操作: 1. 在`App.vue`中的`onLaunch`生命周期方法中,调用uni的`getShareInfo`方法获取分享信息。示例代码如下: ```javascript onLaunch: function() { uni.getShareInfo({ success: res => { // 在这里处理分享信息 } }); } ``` 2. 在需要分享的页面中,使用uni提供的分享组件,例如`uni-share-button`。示例代码如下: ```html <template> <view> <uni-share-button :title="shareTitle" :path="sharePath" :imageUrl="shareImageUrl" @success="onShareSuccess" > 分享 </uni-share-button> </view> </template> <script> export default { data() { return { shareTitle: '分享标题', sharePath: '/pages/index', shareImageUrl: '分享图片链接' }; }, methods: { onShareSuccess(res) { // 分享成功后的回调函数 } } }; </script> ``` 在上述代码中,你可以根据需求设置分享的标题、路径和图片链接。当用户点击分享按钮并成功分享时,`onShareSuccess`方法将被调用。 3. 在`manifest.json`文件中配置分享信息。示例代码如下: ```json "mp-weixin": { "appid": "yourAppId", "share": { "title": "分享标题", "path": "/pages/index", "imageUrl": "分享图片链接" } } ``` 在上述代码中,你需要将`yourAppId`替换为你的小程序AppId,同时设置分享的标题、路径和图片链接。 通过以上步骤,你就可以在uniapp中实现全局分享功能了。当用户点击分享按钮时,将触发分享操作,同时你可以在分享成功的回调函数中进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咖啡不加糖�

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值