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

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

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

那么问题又来了，我们需要通过什么标志来去识别不同的按钮呢？还好在之前学习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，经过上面简单的两步，就可以轻松实现一个页面多个不同分享按钮的需求。

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

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

微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
Java Web项目，Android和微信小程序的初始页面配置
Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
手机按三角返回页面上一页_小猿圈微信小程序跳转页面都有哪些？
随着科技的进步互联网的发展,微信小程序逐渐成为了很多推广渠道的入口,但是因为很多做前端的小伙伴们不知道怎么去实现跳转页面,弄得不知所措,今天小猿圈前端讲师就给你讲解几种微信小程序跳转页面方法. 微信小 ...
微信小程序跳转页面问题
微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...
微信小程序获取当前页面url
微信小程序获取当前页面url 微信小程序获取当前页面的URL地址
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...

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

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

最新文章

热门文章