uniapp的运行在微信小程序上分享微信好友,名称、路径、图片、配置

目录

分享给微信好友

小程序中分享功能需要在button组件中添加open-type:"share",当点击button的时候就会调用onShareAppMessage函数。

1、自定义按钮实现分享,在页面中使用按钮来实现分享功能

html 复制代码
//必须是按钮中添加 open-type="share"  
<button open-type="share" class="pic_r3">
		<text class="tit">人员自助入场</text>
</button>

2、js文件中分享的方法

javascript 复制代码
<script>
	export default {
		data() {
			return {
				shareImg: require("@/static/img/pic-ry9.jpg"),
			}
		},
		methods: {
			//分享---this.shareId就是要传的参数
			onShareAppMessage(e) {
				let shareobj = {
					title: '人员自助入场', //分享的标题
					path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
					//imageUrl: "https://****.com/banner.jpg", //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
					imageUrl: this.shareImg, //内容图片
				}
				return shareobj //一定要返回对象
			}
		}
	}
</script>

3、获取分享的参数

进入分享页面, 通过onLoad(e)中的e来查看传递过来的参数:

javascript 复制代码
onLoad(e) {
		this.shareId = e.shareId   //这就是我们从分享按钮传过来的参数
},

下面的可以加,也可以不加,根据自己需求,通用的上面的就可以用了

4、小程序的原生菜单中隐藏分享按钮

在js文件中onLoad方法中加入下面代码,就可关闭左上角三个点中的分享按钮

javascript 复制代码
uni.hideShareMenu()

5、小程序 分享卡片 禁止个人及群聊二次转发

在onShareAppMessage方法中 加uni.showShareMenu和 wx.updateShareMenu这两个方法

javascript 复制代码
//分享---this.shareId就是要传的参数
	onShareAppMessage(e) {
		//禁止二次转发--
		uni.showShareMenu({
			withShareTicket: true
		});
		wx.updateShareMenu({
			isPrivateMessage: true,
			withShareTicket: true,
			success(res) {
				console.log('updateShareMenu: ', res);
			},
			fail() {}
		}); //禁止二次转发--end
		let shareobj = {
			title: '人员自助入场', //分享的标题
			path: '/pages/admission/admission?shareId=' + this.shareId, //好友点击分享之后跳转的页面
			//imageUrl: "https://****.com/banner.jpg", //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
			imageUrl: this.shareImg, //内容图片
		}
		return shareobj //一定要返回对象
	},

大佬

大佬地址:https://blog.csdn.net/Amily8512/article/details/133948457

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

相关推荐
大数据技术派21 小时前
我用AI写代码,做了3个小玩意儿
后端·微信小程序
Dumbness1 天前
订阅消息弹窗必须在用户点击里调:联调实验室里 timing 和 Mock 支付通知踩的坑
javascript·uni-app
律宏阔2 天前
Taro 4 项目从 npm 迁移到 pnpm 踩坑实录
前端·微信小程序·taro
码间留白2 天前
uni-app 鸿蒙离线打包:一个改动从源码到真机要穿过几条链
uni-app·鸿蒙·deveco·离线打包·uts插件
多客:duokelijie3 天前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白3 天前
鸿蒙端对接 BLE 血压计:从一次握手到读数入库(二)设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
玩泥巴的3 天前
把AI编码从自由生成到受约束声明:微信生态 .NET SDK 中用源生成器压制 AI 编码幻觉的工程实践
微信·.net·aot·roslyn
计算机毕设定制辅导-无忧学长4 天前
《基于微信小程序健康习惯激励系统设计与实现》
java·spring boot·mysql·微信小程序·uniapp·健康习惯激励系统
华玥作者4 天前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang4 天前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint