如何在vue循环列表中每一项使用百度分享？

Question

问题描述

vue循环中使用百度分享不能成功，未见报错信息，如何处理？另外百度分享是不是出问题了？点击
http://share.baidu.com/上面的链接都是间歇性跳转到 https://www.baidu.com/search/...！

相关代码

<div class="shopListBox" v-for="product in products" :key="product.id">
    <div class="productInfo">
        <div>
            //商品相关
        </div>
        <div class="share">
            <div class="bdsharebuttonbox bdshare-button-style0-16">
                <a href="#" class="bds_more" data-cmd="more"></a>
                <a href="#" class="bds_qzone" data-cmd="qzone"></a>
                <a href="#" class="bds_tsina" data-cmd="tsina"></a>
                <a href="#" class="bds_tqq" data-cmd="tqq"></a>
                <a href="#" class="bds_renren" data-cmd="renren"></a>
                <a href="#" class="bds_weixin" data-cmd="weixin"></a>
            </div>
        </div>
    </div>
</div>

methods: {
    getProducts() {},
    handleShare(productId, productTitle, productImage) {
      const that = this;
      //   that.shareConfig.shareurl = `${process.env.VUE_APP_HOST}product/detail?id${productId}`;
      that.shareConfig.shareurl = 'http://www.baidu.com';
      that.shareConfig.sharetitle = productTitle;
      that.shareConfig.sharedesc = '9999';
      that.shareConfig.sharepic = productImage;
    },
    setShareConfig(cmd, config) {
      if (this.shareConfig.shareurl) {
        config.bdUrl = this.shareConfig.shareurl;
      }
      if (this.shareConfig.sharetitle) {
        config.bdText = this.shareConfig.sharetitle;
      }
      console.log(config);
      return config;
    },
  },

mounted() {
    const that = this;
    that.getProducts();
    that.$nextTick(() => {
      window._bd_share_config = {
        common: {
          onBeforeClick: that.setShareConfig,
        },
        share: {},
        image: {
          viewList: ['qzone', 'tsina', 'tqq', 'renren', 'weixin'],
          viewText: '分享到：',
          viewSize: '16',
        },
        selectShare: {
          bdContainerClass: null,
          bdSelectMiniList: ['qzone', 'tsina', 'tqq', 'renren', 'weixin'],
        },
      };
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = `http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=${~(-new Date() / 36e5)}`;
      document.body.appendChild(s);
    });
  },

你期待的结果是什么？实际看到的错误信息又是什么？

分享相关的微博icon、qq icon 等能调取出来，但是点击没反应？

Answer 1

// 分享
    socialShare(type, productId, title, description, image) {
      let shareUrl = '';

      let port = `:${process.env.VUE_APP_PORT}`;
      if (process.env.VUE_APP_PORT === '' || process.env.VUE_APP_PORT === 80 || process.env.VUE_APP_PORT === '80') {
        port = '';
      }
      let urlMode = '';
      if (this.$router.mode === 'hash') {
        urlMode = '#';
      }
      switch (type) {
        case 'qq':
          shareUrl = `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(`${process.env.VUE_APP_HOST}${port}${process.env.VUE_APP_BASE_URL}${urlMode}/share-activity/detail?referrer_id=${this.userId}&id=${encodeURIComponent(productId)}`)}&title=${encodeURIComponent(title)}&desc=${encodeURIComponent(description)}&pics=${encodeURIComponent(image)}`;
          break;
        case 'qzone':
          shareUrl = `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${encodeURIComponent(`${process.env.VUE_APP_HOST}${port}${process.env.VUE_APP_BASE_URL}${urlMode}/share-activity/detail?referrer_id=${this.userId}&id=${encodeURIComponent(productId)}`)}&title=${encodeURIComponent(title)}&desc=${encodeURIComponent(description)}&pics=${encodeURIComponent(image)}`;
          break;
        case 'weibo':
          shareUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(`${process.env.VUE_APP_HOST}${port}${process.env.VUE_APP_BASE_URL}${urlMode}/share-activity/detail?referrer_id=${this.userId}&id=${encodeURIComponent(productId)}`)}&title=${encodeURIComponent(title)}&pic=${encodeURIComponent(image)}`;
          break;
        default:
          shareUrl = '';
      }
      console.log(shareUrl);
      if (shareUrl !== '') {
        window.open(shareUrl);
      }
    },

直接自己写了个，还没完善微信 和微信朋友圈的。jiathis关闭、baidu分享不稳定，不用第三方了。

Answer 2

没看到handleShare的调用，报错提示是shareurl没有设置。感觉你在onBeforeClick后面删了东西。示例跑不起来。