微信公众号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.appIdlet timestamp = data.timestamplet nonceStr = data.nonceStrlet signature = data.signaturewx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId, // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名，见附录1jsApiList: ['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 = thisvar 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 = thiswx.hideOptionMenu()setTimeout(function () {that.$router.push({path: '/activitySignUpIndex', query: {wUserId: that.wUserId, activityId: that.activityId}})}, 1500)}
}
</script>

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