小程序动态隐藏分享按钮

最新推荐文章于 2025-07-04 23:45:00 发布

原创

最新推荐文章于 2025-07-04 23:45:00 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #前端

业务背景：小程序需要根据条件动态隐藏分享给好友、分享到朋友圈功能

原生小程序中加上分享函数，页面就可分享，如下：

onShareAppMessage: function (res) {
   
   
    if (res.from === 'button') {
   
   
      // 来自页面内转发按钮
      console.log(res.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@前端小白

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序如何实现动态显示和隐藏某个控件

w708955424的博客

02-03

1564

未来，随着微信小程序的发展，我们可以期待更多的功能和特性的加入，进一步提升用户体验。例如，在wxml模板中定义两个button按钮，一个按钮是“显示”按钮，一个按钮是“隐藏”按钮。在对应的js文件中，定义一个变量showButton，用于控制按钮的显示和隐藏状态。当条件为假时，该元素会正常显示。2. 在wxml模板中使用button标签，并通过hidden属性绑定showButton变量，实现按钮的显示和隐藏。在对应的事件处理函数中，同样通过修改showButton变量的值来切换按钮的显示状态。

微信小程序实现禁止分享代码实例

10-16

开发者可以根据需求选择隐藏分享菜单、隐藏底部工具栏，或者自定义分享内容。通过理解并熟练运用这些API，我们可以为用户提供更加符合产品定位的分享体验。在实际开发中，应始终关注用户体验，并遵循微信小程序的...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 实现动态显示和隐藏某个控件

08-30

主要介绍了微信小程序 实现动态显示和隐藏某个控件的相关资料,需要的朋友可以参考下

微信小程序动态的显示或隐藏控件的方法(两种方法)

08-31

在微信小程序开发时，经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况，下面就来实践一下吧

微信小程序动态的显示或隐藏控件

最新发布

qq_34425377的博客

07-04

185

发生了页面跳转之后，页面又可以分享了，所以放在onShow调用，每次都禁用。

小程序分享

qq284944970的博客

08-17

453

//小程序分享 //开启右上角分享按钮 wx.showShareMenu({ withShareTicket: true }) //按钮分享 <button open-type="share" class='share small' data-name='{{item.goods_name}}' data-goods='{{item.goods_id}}'>...

微信小程序隐藏分享按钮

qq_45475788的博客

11-16

2165

引入微信js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 第一种： wx.hideOptionMenu() 第二种： if (typeof window.WeixinJSBridge == "undefined"){ $(document).on('WeixinJSBridgeReady',function(){ .

微信小程序隐藏左上角返回键

caii19的博客

09-20

4674

/隐藏home/返回主页按钮不然还是会出现一个返回主页的按钮。第三：wx.switchTab //只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换。在跳转页面的时候使用wwxredirectTo({url: '/pages/home/home',}).第四：wx.reLaunch //关闭所有页面，打开应用内某个页面，默认无返回按钮】第二：wx.redirectTo //当前页面打开，默认无返回按钮。

小程序右上角分享禁用和显示

婳祎

10-08

1950

1、显示： wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) 2、禁用 wx.hideShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] }) 注意： "shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮显示“分享到朋友圈”按钮时必.

微信小程序的分享配置onShareAppMessage

cd13849109771的博客

10-26

9624

微信小程序的分享配置onShareAppMessage 前言微信小程序分享，有一个自带的方法onShareAppMessage(); 在小程序的js页面里，写次方法，则点击右上角三个“···”会有对应的分享菜单，如果不写，其实就相当于禁用的该页面的分享。如果只是一个方法，不进行配置，则分享出来的是默认的样式，下面就来说说如何配置： onShareAppMessage(res){ var that = this console.log(that.goods_data) if(res.f

微信小程序隐藏菜单栏目下转发按钮的几个方法

任聪聪的博客

01-13

2586

隐藏微信小程序顶部的转发按钮适用范围：所有的微信小程序 方式一、去除页面上的分享代码片段如下,删除即可 //删除页面里的这个分享函数 onShareAppMessage: function (options) { } 方式二、再onload或onshow页面加载函数中添加下面的代码 wx.hideShareMenu();//隐藏转发分享按钮注：以上便是两个官方提供的，隐藏方式。 ...

微信小程序一个页面多个按钮分享怎么处理

weixin_30279315的博客

11-18

575

首先呢，第一步先看api文档：组件：button https://developers.weixin.qq.com/miniprogram/dev/component/button.html 框架-逻辑层-注册页面-页面事件处理函数:onShareAppMessage https://developers.weixin.qq.com/miniprogram/dev/framework/a...

微信小程序--微信自带的返回按钮操作（全局隐藏、单页隐藏、自定义返回按钮）

lp-Strive的博客

04-14

3万+

问题探究：微信小程序中会默认自带导航菜单返回按钮箭头，当我们想隐藏返回箭头时，就引出有如下三种方法一、全局隐藏返回箭头 1、在app.json中全局设置，则每个页面会隐藏返回箭头 "window":{ "navigationStyle":"custom" } 二、单个页面返回箭头隐藏 1、首先将返回箭头改为小房子图标（也就是返回主页按钮） wx.redirectTo({ url: '../index/index' }) 2、在对应跳..

微信小程序胶囊按钮怎么隐藏

04-28

### 如何在微信小程序中隐藏胶囊按钮在微信小程序开发过程中，如果希望隐藏右上角的胶囊按钮（即菜单按钮），可以通过调整 `navigationStyle` 和其他相关配置来实现。以下是具体的实现方式： #### 方法一：通过设置 `navigationStyle` 为 `custom` 当在应用全局配置文件 `app.json` 或页面级配置文件中将 `navigationStyle` 设置为 `"custom"` 时，可以移除默认的小程序导航栏[^2]。此时，默认的导航栏会被完全隐藏，而右上角的胶囊按钮也会随之消失。 ```json { "navigationBarTitleText": "示例页面", "navigationStyle": "custom" } ``` 需要注意的是，在这种模式下，开发者需要自行设计并实现导航栏的功能，包括返回按钮和其他交互逻辑。 --- #### 方法二：尝试隐藏特定功能入口尽管无法直接通过 API 完全隐藏胶囊按钮本身，但可以通过某些配置禁用其部分功能或外观效果。例如，可以在页面 JSON 文件中加入如下字段以隐藏右侧额外的操作按钮（如分享、关闭等功能）[^3]： ```json { "navigationBarTitleText": "商品详情页", "navigationStyle": "custom", "navigationBarRightButton": { "hide": true } } ``` 此方法适用于那些希望通过减少视觉干扰提升用户体验的设计场景。 --- #### 方法三：利用 CSS 覆盖胶囊区域虽然不推荐这种方法，但在特殊情况下也可以借助动态计算胶囊按钮的位置信息，并使用绝对定位配合背景颜色覆盖掉胶囊按钮所在区域[^1]。具体操作流程如下： 1. 使用 `uni.getMenuButtonBoundingClientRect()` 获取胶囊按钮的具体尺寸和坐标； 2. 动态创建一个透明或者同色系的遮罩层放置于胶囊按钮上方；代码示例： ```javascript // 在 onLoad 生命周期函数中调用 onLoad() { const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); console.log('胶囊按钮位置:', menuButtonInfo); this.menuButtonRect = menuButtonInfo; }, ``` 模板结构： ```html <view class="mask" :style="{ top: menuButtonRect.top + 'px', width: menuButtonRect.width + 'px', height: menuButtonRect.height + 'px' }"></view> ``` 样式定义： ```css .mask { position: fixed; z-index: 999; background-color: white; /* 可替换为当前主题颜色 */ pointer-events: none; /* 确保不影响点击事件穿透 */ } ``` 这种方式可能会影响用户的正常使用体验，因此需谨慎采用。 --- ### 总结综上所述，最常见也是官方支持的方式是通过修改 `navigationStyle` 属性值为 `custom` 来达到隐藏胶囊按钮的效果。对于更复杂的需求，则可以根据实际业务情况考虑结合前端渲染手段完成定制化处理。