微信H5 分享(自定义标题、图片、链接) 与 禁止分享(微信隐藏功能按钮) 功能的写法
使用场景：
最近有个H5项目在微信浏览器上运行，在项目开发过程中有一个奇特的需求，就是打开这个项目网页的用户分享 和 静止分享（就是有些页面要求要有分享【可自己定义标题、图片、链接】，而有些页面要求要不让用户分享）。
自定义分享到是经常做，但要不让用户分享还真没做过，经过一翻折腾最终搞定了，代码如下：
注：无论是信自定义分享还是静止分享都要引入微信的js-sdk文件，官网下载地址：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
官网文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
一、微信自定义分享的写法：
由于项目需求，要自定义分享的标题、图片、链接等参数在后台管理中进行自由设置，所以这里先请求后端拿到分享相应的参数。
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>$.ajax({url: 'https:www.xxx.com/index.php?r=index/share', //后端API地址。。。method: 'GET',data: {url: 'https:www.abcd.com/index.html'},success: (e) => {let o = e.data.result;if (10000 == o.code) {wx.config({debug: o.data.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: o.data.appid, // 必填，公众号的唯一标识timestamp: o.data.timestamp, // 必填，生成签名的时间戳nonceStr: o.data.nonceStr, // 必填，生成签名的随机串signature: o.data.signature, // 必填，签名jsApiList: [ // 必填，需要使用的JS接口列表'checkJsApi','onMenuShareTimeline', //分享到微信朋友圈'onMenuShareAppMessage', //分享给微信朋友'onMenuShareQQ', //分享到QQ'onMenuShareWeibo', //分享到微博'onMenuShareQZone', //分享到QQ空间] });wx.ready((d = o.data.shareConfig) => {wx.onMenuShareTimeline({title: d.title, // 分享标题link: this.$.__URL__ + '/web/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: d.cover, // 分享图标success: function() {},cancel: function() {}});wx.onMenuShareAppMessage({title: d.title, // 分享标题desc: d.content, // 分享描述link: this.$.__URL__ + '/web/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: d.cover, // 分享图标type: 'link', // 分享类型,[music、video或link，不填默认为link]success: function() {},cancel: function() {}});wx.onMenuShareQQ({ title: d.title, // 分享标题desc: d.content, // 分享描述link: encodeURIComponent(d.link), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: d.cover, // 分享图标success: function () {} // 设置成功回调});wx.onMenuShareWeibo({title: d.title, // 分享标题desc: d.content, // 分享描述link: encodeURIComponent(d.link), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: d.cover, // 分享图标success: function () {} // 设置成功回调});wx.onMenuShareQZone({title: d.title, // 分享标题desc: d.content, // 分享描述link: encodeURIComponent(d.link), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: d.cover, // 分享图标success: function () {} // 设置成功回调});});wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});};}
});效果图：
二、微信静止分享的写法：
在微信中叫《 批量隐藏功能按钮》
文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>$.ajax({url: 'https:www.xxx.com/index.php?r=index/share', //后端API地址。。。method: 'GET',data: {url: 'https:www.abcd.com/index.html'},success: (e) => {let o = e.data.result;if (10000 == o.code) {Wx.config({debug: o.data.debug, appId: o.data.appid, timestamp: o.data.timestamp, nonceStr: o.data.nonceStr, signature: o.data.signature, jsApiList: [ 'checkJsApi','hideMenuItems' //调用下面的方法：] });Wx.ready(() => {Wx.hideMenuItems({//要隐藏功能按钮（// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮）menuList: [ 'menuItem:share:appMessage', //发送给朋友'menuItem:share:timeline', //分享到朋友圈'menuItem:share:qq', //分享到QQ'menuItem:share:weiboApp', //分享到Weibo'menuItem:share:favorite', //收藏'menuItem:share:facebook', //分享到FB'menuItem:share:QZone', //分享到 QQ 空间]});});};},
});效果图：
微信H5 分享(自定义标题、图片、链接) 与 禁止分享(微信隐藏功能按钮) 功能的写法相关推荐
- 微信分享自定义标题和图片,开发者工具没问题,真机调试失败
昨天亲身经历,微信分享开发者工具调试没问题,但是真机调试失败,说明配置是没问题的,历经一天发现是缓存的问题 解决方案: 删除掉微信进程后,缓存没有被彻底清除 安卓手机打开 debugtbs.qq.co ...
- 微信 H5页面自定义分享link不起作用
微信 H5页面自定义分享link不起作用 最近在做这么一个功能: H5页面在微信内打开并通过设置微信自定义分享来分享出指定的标题.图片.link 但是却遇到了问题,分享指定的link没起作用,正常通过 ...
- php微信转发无法显示标题图片,解决微信公众号分享朋友圈不显示标题图片描述的方法...
我在微信开发者工具调试都是正确,为什么在真机进行测试,就不会显示分享标题图片描述语呢. 检查分享相关微信接口也是正确,代码如下: wx.ready(function () { wx.onMenuSha ...
- 分享网页文章到微信时如何自定义缩略图、链接、标题和摘要
1.分享网页文章到微信时自定义缩略图.链接.标题和摘要的方法: var imgUrl = http://www.gettool.cn/GetwxLink/xxx.jpg';var lineLink = ...
- uniapp实现微信公众号内h5页面自定义标题内容和图片
和上次一样填坑,这次是使用uniapp做的项目,下载微信的 js-sdk(1.6.0版本) cnpm install jweixin-module -S wechatShare.js var wx = ...
- 如何在微信自定义链接分享内容,图文链接xml卡片生成代码,制作微信卡片实现自定义标题,描述,缩列图以供转发
问题背景 微信现在是众多公司营销的重点.遍布朋友圈和消息群组里的html5各位可能也是天天见了, 如图,像这种吓人的标题党的风格 如何制作QQ和微信图文链接, 是这个营销手段的必要技术问题. 考虑一下 ...
- 实现微信JS-SDK分享自定义标题和图片
2019独角兽企业重金招聘Python工程师标准>>> 这里先说明下,如果你想要自定义去分享图片的话是需要你去开通微信公众平台的不多也就300,在看之前我希望大家能先去看一下微信官网 ...
- 微信分享自定义标题摘要和缩略图
新建一个fx.php并且写入以下代码 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID&q ...
- c# 文章分享微信朋友圈自定义标题、摘要、缩略图
微信升级后需要通过接入微信公众号才行,记录下. 一.登录微信公众号设置-功能设置-JS接口安全域名,设置网站的域名,可以多个 二.前端配置:测试阶段将wx.config中的debug设置为true,页 ...
- 微信上h5页面点击文件下载链接没反应，微信内直接下载app方案
大家在使用微信分享转发链接的时候,都很容易碰到链接在微信中无法打开网页的问题.通常这种情况微信会给个提示 "已停止访问该网址" ,导致这个情况的因素有以下三点. 1.分享链接被多人 ...
最新文章
- 【统计学习方法】朴素贝叶斯对鸢尾花(iris)数据集进行训练预测
- Mybatis源码解读-设计模式总结
- zTree树形菜单使用实例
- iOS瀑布流实现(Swift)
- 为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘！
- Linux 启/关 自启动服务
- Mysql学习总结（45）——Mysql视图和事务
- java后端技术有哪些_Java后端精选技术：什么是JVM？
- strace ltrace使用
- Tomcat中设计模式-门面模式
- 编译Windows版本ffmpeg：MingW方式失败
- atitit。mssql sql server 转换mysql 及 分页sql ast的搭建
- librtmp库API介绍及其结构概述
- 《东周列国志》第二十二回 公子友两定鲁君 齐皇子独对委蛇
- 算法：合唱队形（最大上升子序列,线性DP）
- 学生专用计算机游戏怎么按,学生计算器怎么玩
- ORA-02046: 分布式事务处理已经开始解决方案
- barcode4j CODE128/EAN128生成 不定长 msg值 分隔符
- jupyter notebook 安装nbextension 不显示插件怎么办？
- 版本控制系统_繁星漫天_新浪博客