uni-app web-view内嵌页面运行到微信公众号页面，需要禁言右三角的分享或隐藏分享按钮怎么做呢

发布于 1周前 作者 caililin 来自 Uni-App

uni-app web-view内嵌页面运行到微信公众号页面，需要禁言右三角的分享或隐藏分享按钮怎么做呢

代码示例

export default function isWeixin() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    };
};

需要禁用分享的页面

import isWeixin from "../../common/wxForbidShare.js"
export default {
    data() {
        return {
            webviewStyles: {
                progress: {
                    color: '#FF3333'
                }
            }
        }
    },
    methods: {
        stopShare() {
            if (isWeixin()) {
                // 微信环境下禁用分享
                document.addEventListener(
                    "WeixinJSBridgeReady",
                    function onBridgeReady() {
                        // 通过下面这个API隐藏右上角按钮
                        WeixinJSBridge.call("hideOptionMenu");
                    }
                );
            }
        }
    },
    onLoad() {
        // uni.hideShareMenu()
        this.stopShare()
    },
    created() {
        this.stopShare()
    }
}

问题

这样做，微信小程序中的分享是禁用了，但是 微信公众号的 分享依然可以用，怎么实现这个？


Harmonyos Next教程
1 回复

在 uni-app 中使用 web-view 组件内嵌页面时，若希望禁用或隐藏微信公众号页面右上角的分享按钮（通常表现为一个右三角），由于微信公众号平台的安全和用户体验限制，直接通过代码禁用或隐藏这个按钮是不可能的。微信公众号的分享功能是由微信自身控制的，开发者无法直接通过代码影响其显示或行为。

不过，虽然无法直接隐藏或禁用分享按钮，但你可以通过以下几种方式间接管理或引导用户的分享行为：

  1. 自定义分享内容： 你可以利用微信公众号的JS-SDK来自定义分享内容，这样虽然分享按钮仍然存在，但分享出去的信息是由你控制的。以下是一个基本的示例，展示如何配置分享内容：

    wx.config({
  debug: false, // 开启调试模式
  appId: 'YOUR_APP_ID', // 必填，公众号的唯一标识
  timestamp: TIMESTAMP, // 必填，生成签名的时间戳
  nonceStr: NONCE_STR, // 必填，生成签名的随机串
  signature: SIGNATURE, // 必填，签名
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});

wx.ready(function() {
  // 分享给朋友
  wx.onMenuShareAppMessage({
    title: '分享标题', // 分享标题
    desc: '分享描述', // 分享描述
    link: 'https://example.com', // 分享链接
    imgUrl: 'https://example.com/image.jpg', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或者video，则要提供数据链接，默认为空
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });

  // 分享到朋友圈
  wx.onMenuShareTimeline({
    title: '分享标题', // 分享标题
    link: 'https://example.com', // 分享链接
    imgUrl: 'https://example.com/image.jpg', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });
});

  2. 引导用户行为： 在你的 web-view 内嵌页面中，可以通过设计引导用户不要使用分享按钮，或者提供其他分享渠道，比如通过你的应用内分享功能。

  3. 用户教育： 在应用中添加说明或提示，教育用户理解为何分享按钮被“忽略”，或者引导他们使用你提供的分享方式。

总之，虽然无法直接隐藏或禁用微信公众号页面上的分享按钮，但通过上述方法，你可以在一定程度上管理用户的分享行为和内容。

回到顶部