uniapp——列表分享当前话题(一个页面多个分享)

案例

分享的时候弹出对应的标题和默认第一张图片

代码

html 复制代码
<view v-for="(item,index) in list" :key="index">
	<button open-type="share" :id="index" @click.stop="()=>{}">
		<image src="/static/images/circle/share.png" mode="aspectFill"></image>
	</button>
</view>
javascript 复制代码
onShareAppMessage((res) => {
	console.log(res);
	if (res.from === 'button') { // 来自页面内分享按钮
		return {
			title: list.value[res.target.id].title,
			path: '/pages/circle/circle',
			imageUrl: i.image(list.value[res.target.id].images[0]),
		}
	} else {
		return {
			title: common.config.title,
			path: '/pages/index/index',
			imageUrl: i.image(common.config.image),
		}
	}
})

重点是open-type="share" :id="index" id绑定索引用以来识别

相关推荐
百思可瑞教育7 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
风早爽太10 小时前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
Autumn_yun10 小时前
uniapp 实现项目多语言切换
uni-app
懒大王952712 小时前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王952712 小时前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
百思可瑞教育15 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling55517 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
百思可瑞教育1 天前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
Q_Q19632884751 天前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育1 天前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育