微信公众号H5页面：禁止分享操作

H5页面在微信端的禁止分享（分享到朋友圈，好友）

本次我们说两种实现方式：第一种是正确无争议保证正确，第二种简单可用，但不保证语法正确（自己刚开始使用的，没问题）！

好了，现在我们开始说第一种方式：

步骤一：安装jssdk

全局安装： npm install weixin-js-sdk

步骤二：封装 config配置

在utils中创建一个wxForbidShare.js，内容如下：（可粘贴复制）

const wx = require('weixin-js-sdk')
// import wx from 'weixin-js-sdk'
var wexinForbidShare = (data) => {
  let appId = data.appId
  let timestamp = data.timestamp
  let nonceStr = data.nonceStr
  let signature = data.signature
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: appId, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    signature: signature, // 必填，签名，见附录1
    jsApiList: ['hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  })
  wx.ready(function () {
    wx.hideMenuItems({
      menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:QZone', 'menuItem:openWithSafari', 'menuItem:openWithQQBrowser', 'menuItem:favorite']
    })
  })
  wx.error(function (res) {
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    /* alert("config信息验证失败"); */
  })
}
export default wexinForbidShare

步骤三：在准备禁止分享的页面，引用js，并获取基本信息

引用：import wexinForbidShare from ‘…/…/utils/wxForbidShare’

created () {
this.getForbidShare()
}

this.getForbidShare()主要就是根据 本页动态 url向后端发起请求，拿到配置所需要的参数：appId、timestamp、noncestr和signature。
注意：
url一定要是动态获取的，并且取地址#号前面的部分，即window.location.href.split(’#’)[0]，这里说明一下有的会使用转移后的encodeURIComponent(window.location.href.split(’#’)[0])；这个要根据实际情况，后台交互来定。

this.getForbidShare()内容如下：（可粘提复制）

getForbidShare () {
      var that = this
      var test = window.location.href.split('#')[0]
      console.log(test)
      //  页面微信分享接口
      that.$get(that.$axiosUrl.sdkConfig, {url: test})
        .then((response) => {
          console.log(response.code)
          if (response.code === 0) {
            wexinForbidShare(response.data, function () {
            }, function (e) {
              Toast.fail('连网错误')
            })
          }
        })
    },

好了，到此就全部搞定了！

接下来我们说一下第二种方式：

第一步全局安装： npm install weixin-js-sdk
第二部页面引用： import wx from ‘weixin-js-sdk’
页面created：函数中定义 wx. hideOptionMenu();

完事就这样就可以了！但是并没有。。。。
这种方式看着比较简单不需要获取config权限，但是有一点问题就是设置的第一个页面不生效，后续跳转到的第二个页面及以后页面可以实现禁止分享！（对此我着实很奇怪不知道为啥子，很是忧伤，希望你知道的朋友留个言！）
说一下我是怎么实现的吧：我就在第一个页面（需要禁止分享页-A页）前面加了一个页面（该页面-B页的作用就是为了跳转而已，这样就可以实现A页禁止分享页面功能实现了）
下面附上B页的代码;

<template>
  <div></div>
</template>
<style></style>
<script>
import wx from 'weixin-js-sdk'
export default {
  name: 'activitySignUp',
  created () {
  // 本页面是为了让第一个报名页禁止分享
  },
  mounted () {
    var that = this
    wx.hideOptionMenu()
    setTimeout(function () {
      that.$router.push({path: '/activitySignUpIndex', query: {wUserId: that.wUserId, activityId: that.activityId}})
    }, 1500)
  }
}
</script>

好了 都完事了！写完了，第一种大家可以放心编写使用；第二种的原理我是我懂，希望知道原因的员人给予解答，，，看完有帮助的关注一下吧！