h5项目使用vue,禁止微信分享

 // 禁止微信分享
  onBridgeReady () {
    console.log('jinzhi')
    WeixinJSBridge.call('hideOptionMenu');
    if (typeof WeixinJSBridge == "undefined") {
      if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
      }
    } else {
      onBridgeReady();
    }
  mounted () {
    wechatshare('', '', '', '', '', '', true)
    this.onBridgeReady()
  },
/* eslint-disable no-undef */
import {
  GetwxConfig,
  insertActionCord
} from '@/api/abt/customerOperation/common/index'
import {
  zxzyRecord
} from '@/api/abt/materialLibrary/sourceMaterial/index'// 分享api
import { Toast } from 'mand-mobile'

import { getStorage, setSensors } from '@/lib/util'
import wx from 'weixin-js-sdk'
import config from '@/config'

export function wechatshare (
  title, // 分享标题
  desc, // 分享描述
  shareimage, // 分析的图片
  shareurl, // 分享得链接
  path, // 分享进行签名验证的url
  fxstr, // 分享后调用行为记录要用到参数 type为object
  type, // type 为true禁止分享
  issource,
  isfirst,
  iszy,
  isdiablebtn
) {
  let newpath = path
  if (window.__wxjs_is_wkwebview === true) {
    newpath = window.location.href.split('#')[0] || window.location.href
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      newpath = window.location.href
      // newpath = getStorage('originUrl')
      // newpath = window.location.origin
      // newpath = window.location.origin + '/ddzsc/soauth'
    }
  } else {
    newpath = window.location.href
  }
  GetwxConfig({
    url: newpath
    // url: 'http://ddzsc.abtpt.com/tbDetails?sno=WZ20200428163351482507&empno=YUXH3414&suserid=168'
  }).then(res => {
    var wxconfig = res.data.data
    wx.config({
      debug: false,
      appId: config.shareappid,
      timestamp: wxconfig.timestamp,
      nonceStr: wxconfig.nonceStr,
      signature: wxconfig.signature,
      jsApiList: [
        'chooseImage',
        'previewImage',
        'uploadImage',
        'onMenuShareAppMessage',
        'onMenuShareTimeline',
        'hideOptionMenu',
        'showOptionMenu',
        'hideMenuItems'
      ],
      openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
    })
    wx.ready(function () {
      wx.hideMenuItems({
        menuList: ['menuItem:share:appMessage', 'menultem:share:timeline'] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有 menu 项见附录3
      })

      if (type) {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          wx.hideOptionMenu()
        } else if (/(Android)/i.test(navigator.userAgent)) {
          if (typeof WeixinJSBridge === 'undefined') {
            // 微信浏览器内置对象。参考微信官方文档
            if (document.addEventListener) {
              document.addEventListener(
                'WeixinJSBridgeReady',
                onBridgeReady(),
                false
              )
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady())
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady())
            }
            // alert('undefined')
          } else {
            onBridgeReady()
          }
        }
      } else {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          wx.showOptionMenu()
        } else if (/(Android)/i.test(navigator.userAgent)) {
          if (typeof WeixinJSBridge === 'undefined') {
            // 微信浏览器内置对象。参考微信官方文档
            if (document.addEventListener) {
              document.addEventListener(
                'WeixinJSBridgeReady',
                onBridgeshowReady(),
                false
              )
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeshowReady())
              document.attachEvent(
                'onWeixinJSBridgeReady',
                onBridgeshowReady()
              )
            }
          } else {
            onBridgeshowReady()
          }
        }
      }
      if (!isfirst) {
        setTimeout(function () {
          ready(title, desc, shareimage, shareurl, path, fxstr, iszy, isdiablebtn)
        }, 500)
      }
    })
  })
}
export function ready (title, desc, shareimage, shareurl, path, fxstr, iszy, isdiablebtn) {
  console.log(isdiablebtn, 'ready的wechatshare')

  if (isdiablebtn) {
    wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
      menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline']
    })
  }

  // 分享到朋友圈
  wx.onMenuShareTimeline({
    // wx.onMenuShareTimeline({
    title: title,
    link: shareurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: shareimage, // 分享图标
    success: function (res) {
      // 暂时只记录业务员分享
      // if (getStorage('u_s', {}).rytype == '1') {
      let sensors = {}
      Object.assign(sensors, fxstr.sensors)
      if (fxstr.sensors) {
        sensors.buttonName = '朋友圈-' + sensors.buttonName
        setSensors('ButtonClick', sensors)
      }
      // }

      // eslint-disable-next-line eqeqeq
      if (fxstr != 'no') {
        fxstr.subOtype = '02'
        if (iszy) {
          zxzyRecord(fxstr).then(res => {
            Toast({
              content: '分享成功',
              icon: 'right',
              className: 'noticeErrorToast',
              duration: '6000'
            })
          })
        } else {
          insertActionCord(fxstr).then(res => {
            Toast({
              content: '分享成功',
              icon: 'right',
              className: 'noticeErrorToast',
              duration: '6000'
            })
          })
        }
      }
    },
    cancel: function (res) { }
  })
  // 分享给朋友
  wx.onMenuShareAppMessage({
    // wx.updateAppMessageShareData({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: shareurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: shareimage, // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function (res) {
      // 暂时只记录业务员分享
      // if (getStorage('u_s', {}).rytype == '1') {
      let sensors = {}
      Object.assign(sensors, fxstr.sensors)
      if (fxstr.sensors) {
        sensors.buttonName = '微信好友-' + sensors.buttonName
        setSensors('ButtonClick', sensors)
      }
      // }
      // eslint-disable-next-line eqeqeq
      setTimeout(() => {
        if (fxstr != 'no') {
          fxstr.subOtype = '01'
          if (iszy) {
            zxzyRecord(fxstr).then(res => {
              Toast({
                content: '分享成功',
                icon: 'right',
                className: 'noticeErrorToast',
                duration: '6000'
              })
            })
          } else {
            insertActionCord(fxstr).then(res => {
              Toast({
                content: '分享成功',
                icon: 'right',
                className: 'noticeErrorToast',
                duration: '6000'
              })
            })
          }
        }
      }, 500)
    },
    cancel: function (res) { }
  })
}
export function onBridgeReady () {
  WeixinJSBridge.call('hideOptionMenu')
}

export function onBridgeshowReady () {
  WeixinJSBridge.call('showOptionMenu')
}

export function onBridgecolse () {
  document.addEventListener(
    'WeixinJSBridgeReady',
    function () {
      WeixinJSBridge.call('closeWindow')
    },
    false
  )
  WeixinJSBridge.call('closeWindow')
}

wechatshare方法是自己封装的,调用禁止分享时候需要等待微信返回的接口,所以有一瞬间可能会可以分享出去,使用onBridgeReady方法可以上来就禁止掉

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue H5中调用微信分享,首先需要引入微信官方的JS-SDK库。在Vue项目的index.html文件中,可以在<head>标签内添加如下代码: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 然后,在Vue组件的created生命周期钩子函数中,使用Vue的axios或者其他网络请求库向后端请求获取微信配置信息。 ```javascript created() { this.fetchWechatConfig(); }, methods: { async fetchWechatConfig() { const response = await axios.get('/api/wechat/config'); // 向后端请求微信配置信息 const { appId, timestamp, nonceStr, signature } = response.data; // 将配置信息存储到全局变量中 this.$store.commit('setWechatConfig', { appId, timestamp, nonceStr, signature }); this.initWechatSDK(); }, initWechatSDK() { const { appId, timestamp, nonceStr, signature } = this.$store.state.wechatConfig; wx.config({ appId, timestamp, nonceStr, signature, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 配置需要使用微信API }); // 进行微信SDK的初始化 wx.ready(() => { this.shareToWechat(); }); }, shareToWechat() { const shareData = { title: '分享标题', link: '分享链接', imgUrl: '分享图片链接', desc: '分享描述', }; // 配置分享的具体内容 wx.onMenuShareTimeline(shareData); // 分享到朋友圈 wx.onMenuShareAppMessage(shareData); // 分享给好友 }, }, ``` 上述代码中,我们通过axios库向后端请求了微信配置信息,并将其存储到Vuex的全局状态中。然后,我们使用微信JS-SDK中的`wx.config`方法进行微信验证和初始化配置。一旦初始化成功,`wx.ready`回调函数将会被触发,我们在该函数中调用`shareToWechat`方法来配置分享的具体内容。 在`shareData`对象中,我们可以自定义分享的标题、链接、图片和描述等信息,然后使用`wx.onMenuShareTimeline`方法配置分享给朋友圈的内容,使用`wx.onMenuShareAppMessage`方法配置分享给好友的内容。 最后,我们可以在Vue组件中调用`shareToWechat`方法来触发微信分享。 注意:在实际开发中,需要根据微信的API文档和后端提供的接口来进行相应的调整和配置。以上代码仅为示例,具体实现方式可能会有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值