700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序之一个页面多个转发分享按钮 如何识别不同的按钮

微信小程序之一个页面多个转发分享按钮 如何识别不同的按钮

时间:2020-01-15 08:59:51

相关推荐

微信小程序之一个页面多个转发分享按钮 如何识别不同的按钮

今天在撸码的时候,根据需求的需要,我开发的这个页面需要两个不同的分享按钮。之前分享都是写一个,今天这还是头一回。

遇到这种情况,首先是要冷静分析一下需求,既然是多个转发按钮,进行分享不同的内容,那么我就需要给这些按钮一个识别的标志,然后在逻辑页通过判断此分享是来自哪个标志按钮,从而就可以进行不同的内容分享(分享不同的内容即在返回语句中返回不同的内容)。这个还是挺简单的。

那么问题又来了,我们需要通过什么标志来去识别不同的按钮呢?还好在之前学习HTML的过程中知道,有个属性叫做id,就像我们常用的class一样可以给组件进行修饰。这种属性又叫做选择器。id有点独特,一个id值在一个页面中只能有一个,不能出现多个相同的id。所以,对于这个按钮的标识,我们就通过给它id值,进而判别是哪个按钮点击的分享。

wxml:

<button class="bn" id="addMaster" bindtap="onShareAppMessage" open-type="share">XXXXXXXX</button><button class="bn1" id="transfer" bindtap="onShareAppMessage" open-type="share">XXXXXXXXX</button>

在这里我给两个按钮加上不同的id,下一步,就需要来到js页面获取这个id值了。

js:

onShareAppMessage:function(res){console.log(res.target.id) //点击按钮获取按钮的idif(res.target.id=='addMaster'){//进行判断 id 的值 ,从而返回该按钮所需要的结果return {title: 'XXXXXXXXXXXXX',imageUrl:'XXXXXXXXXXXXXXXXXXXXX',path:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',success: function (res) {console.log("转发成功:");},fail: function (res) {console.log("转发失败:");}}}if(res.target.id=='transfer'){return {title: 'XXXXXXXXXXXXX',imageUrl:'XXXXXXXXXXXXXXXXXXXXX',path:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',success: function (res) {console.log("转发成功:");},fail: function (res) {console.log("转发失败:");}}}}}

OK,经过上面简单的两步,就可以轻松实现一个页面多个不同分享按钮的需求。

有问题可以在下方留言哦,我看到之后会及时回复的。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。