Vue微信公众号网页禁用分享功能

因为项目中需要禁止分享功能，所以去百度了一下，但是还是挺多坑的最后拼凑了一个流程。（只介绍全部禁用的）
有很多文章用的是 WeixinJSBridge.call(‘hideOptionMenu’) 但是这个试了一下会出现 WeixinJSBridge.call已经被禁用，所以找到了下面的方法。

一.npm引入的问题

很多文章写的是引入 weixin-js-sdk 这个，但是引入到main 定义为 wx之后，输出wx你会发现wx为undefined，找了一轮发现，我们需要引入的api并不是它而是 weixin-jsapi，所以

npm i weixin-jsapi --save

才是我们需要引入的

二.步骤

1.引入之后直接上步骤

1.在 main.js 文件中引入

import wx from 'weixin-jsapi'

Vue.prototype.$wx = wx

2.在app.vue中的 mounted 直接使用

mounted() {this.$wx.hideOptionMenu();}

这就搞定了。

// =============== 2021.2.19 更新==============//

一. 上面的方法好像在测试环境中可以，但是部署到线上时，屏蔽功能就会失效(所以使用下面这种方法)。

一.1  给一个检测是否为微信环境的方法，我这里写在utils.js中

// 检测是否是微信环境Vue.prototype.$isWeixin = () => {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}}

一.2 然后在app.vue加载的时候判断

   if(this.$isWeixin()){ // 微信环境下禁用分享document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {// 通过下面这个API隐藏右上角按钮         如果没有↓这注释，会导致eslint报错WeixinJSBridge.call('hideOptionMenu') // eslint-disable-line no-undef});}

vue项目微信禁止分享功能相关推荐

微信禁止分享功能怎么设置
微信禁止分享功能怎么设置 how to do? 有时候我们在微信端,有的内容并不希望用户分享出去,就需要设置禁止分享功能,废话少说,切入正题888: how to do? 引入jssdk.js htt ...
【vue/uni-app】微信sdk分享功能在vue中开发中的一些个人纪录
在vue开发微信sdk分享功能中的一些个人纪录先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 我这里用的是 ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...
Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
微信自定义分享功能实现
微信自定义分享功能实现微信自定义分享功能实现一.实现的关键 1.后端的任务 2.前台的任务二.实现具体步骤 1.js安全域名配置(被分享的网址必须实现) 2.添加服务器配置(成为开发者) 3.生 ...
vue项目微信端清理缓存问题解决
vue项目微信端清理缓存问题解决参考文章: (1)vue项目微信端清理缓存问题解决 (2)http://www.cnblogs.com/sakura-lifangfang/p/9660550.htm ...
php 微信分享功能_基于thinkPHP实现的微信自定义分享功能
这篇文章主要介绍了基于thinkPHP实现的微信自定义分享功能,结合实例形式分析了thinkPHP调用微信接口实现自定义分享功能的相关操作技巧,需要的朋友可以参考下本文实例讲述了基于thinkPHP ...
微信分享源码PHP版JS-SDK接口_微信JSSDK分享功能图文实例详解
本文实例讲述了微信JSSDK分享功能.分享给大家供大家参考,具体如下: 这里以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可工欲善其事,必先利其 ...
vue项目微信分享之后路由链接被破坏怎么办
异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加 ...

vue项目微信禁止分享功能

Vue微信公众号网页禁用分享功能

一.npm引入的问题

二.步骤

1.引入之后直接上步骤

一. 上面的方法好像在测试环境中可以，但是部署到线上时，屏蔽功能就会失效(所以使用下面这种方法)。

vue项目微信禁止分享功能相关推荐

最新文章

热门文章

vue项目微信禁止分享功能

Vue微信公众号网页禁用分享功能

一.npm引入的问题

二.步骤

1.引入之后 直接上步骤

一. 上面的方法好像在测试环境中可以，但是部署到线上时，屏蔽功能就会失效(所以使用下面这种方法)。

vue项目微信禁止分享功能相关推荐

最新文章

热门文章

1.引入之后直接上步骤