老规矩---demo图: (注释:微信分享只支持右上角三个点触发)

======>

老规矩上菜:

1. 这边我封装了  share.js

function allSharefun(param) {
console.log(param)
var tagUrl = location.href;
tagUrl = encodeURIComponent(tagUrl);
console.log(tagUrl)
//注释: 传参当前页面url给自己的后台接口, 获取 配置的config所需参数
$.get("xxxxx此处自己后台接口?url=" + tagUrl, function(res) {
console.log(res)
console.log(res.result.nonceStr)
if (res.error == '00') {
console.log(res)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: 'xxxxxxxxx', // 必填,公众号的唯一标识
timestamp: res.result.timestamp, // 必填,生成签名的时间戳
nonceStr: res.result.nonceStr, // 必填,生成签名的随机串
signature: res.result.signature, // 必填,签名
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone',
'onMenuShareWeibo'
] // 必填,需要使用的JS接口列表
});
// config之后会自动调用ready方法
wx.ready(function() {
// 验证接口是否注册完成
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone',
'onMenuShareWeibo',
"scanQRCode"
],
success: function(res) {
console.log("888");
}
});
wx.onMenuShareTimeline({
title: param.title, // 分享标题
desc: param.content, // 分享描述
link: param.url, // 分享链接
imgUrl: param.pic, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
alert('已分享');
},
cancel: function() {
// 用户取消分享后执行的回调函数
alert('已取消');
}
}); //获取“分享给朋友”
wx.onMenuShareAppMessage({
title: param.title, // 分享标题
desc: param.content, // 分享描述
link: param.url, // 分享链接
imgUrl: param.pic, // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function() {
// 用户确认分享后执行的回调函数
// alert('已分享');
//window.location.href = "https://www.baidu.com";
},
cancel: function() {
// 用户取消分享后执行的回调函数
// alert('已取消');
}
}); //获取“分享到QQ”
wx.onMenuShareQQ({
title: param.title, // 分享标题
desc: param.content, // 分享描述
link: param.url, // 分享链接
imgUrl: param.pic, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
// alert('已分享');
},
cancel: function() {
// 用户取消分享后执行的回调函数
// alert('已取消');
}
}); //获取“分享到QQ空间”
wx.onMenuShareQZone({
title: param.title, // 分享标题
desc: param.content, // 分享描述
link: param.url, // 分享链接
imgUrl: param.pic, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
// alert('已分享');
},
cancel: function() {
// 用户取消分享后执行的回调函数
// alert('已取消');
}
}); //获取“分享到腾讯微博”
wx.onMenuShareWeibo({
title: param.title, // 分享标题
desc: param.content, // 分享描述
link: param.url, // 分享链接
imgUrl: param.pic, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
// alert('已分享');
},
cancel: function() {
// 用户取消分享后执行的回调函数
// alert('已取消');
}
});
});
wx.error(function(res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
// console.log(res,"rrr") });
// 开始分享
}
}) }

2.  share.html页面 引入 share.js

//引入jssdk 
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
<!-- 需要分享的页面接入 封装好的 分享js -->
<script src="share.js"></script>

// 分享的 三要素----------------------------------------------
var shareData = {
url: window.location.href, //当前页面路径
title: '分享的标题xxxx',
content: '描述xxxx',
pic: 'xxxxpic' //图片
}
                    //调用 share.js中的 函数 并且传入参数
allSharefun(shareData)

3.前提,  你已经配置好微信公众号的js安全域名等等!!!

需要配置ip白名单和安全域名

 
 
注释!!!!!! 配置域名 不需要加https   /  http
 1 有问题的朋友可以给我留言,

                       2 更多参考链接:https://www.jianshu.com/p/bef8675130cb

                  3 官网链接: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10

微信jssdk分享(附代码)的更多相关文章

  1. 微信JS-SDK分享功能的.Net实现代码

    JS-SDK接口是什么? 为了方便开发者实现微信内的网页(基于微信浏览器访问的网页)功能,比如拍照.选图.语音.位置等手机系统的能力,并方便开发者直接使用微信分享.扫一扫等微信特有的能力,微信推出了J ...

  2. 微信JS-SDK“分享信息设置”API及数字签名生成方法(NodeJS版本)

    原文:微信JS-SDK"分享信息设置"API及数字签名生成方法(NodeJS版本) 先上测试地址以示成功: 用微信打开下面地址测试 http://game.4gshu.com/de ...

  3. 微信jssdk分享链接给好友,图标只能自己看到,对方看不到!

    问题描述:调用微信jssdk分享接口时,所有参数均正常的情况下(排除参数错误的情况),分享给好友后,其中的小图标自己看得到,接收到分享的好友看不到小图标! (如上图所示!) 出现上述问题的原因:本人猜 ...

  4. 微信JSSDK分享朋友圈微信自定义分享接口

    服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议       ...

  5. 微信JSSDK分享功能详解

    本文以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可 工欲善其事,必先利其器,好好利用下边的帮助工具,都是腾讯给开发人员的工具 1.微信开发者说明 ...

  6. 微信jssdk分享功能,jssdk成功调用,分享内容自定义失败

    前提:调用微信jssdk分享功能,通过微信开发者工具调试,调用正常,无任何报错信息. 问题:调用成功,且开发者工具正常显示,但是通过真机调试,分享出去后,自定义内容失效,为微信自动获取的默认内容!截止 ...

  7. 微信JS-SDK分享接口示例中jsapi_ticket.php和access_token.php说明

    关于如何使用微信JS-SDK,可以查看官方介绍说明:查看链接 在使用分享接口的过程中,查看了示例代码,其中包含两个文件jsapi_ticket.php和access_token.php,记录一下这两个 ...

  8. 微信jssdk分享功能开发

    先理解下分享: 在app端 ,经常能看见 分享按钮的功能,(分享给朋友,分享到朋友圈,分享到QQ空间等等): https://open.weixin.qq.com/(微信开发平台),这需要到开放平台注 ...

  9. 企业微信jssdk分享接口管理系统

    服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议       ...

随机推荐

  1. Python 细聊可以媲美 PS 的 PIL 图片处理库

    1 . 前言 PIL 是 Python Image Library 的简称. PIL 库中提供了诸多用来处理图片的模块,可以对图片做类似于 PS(Photoshop) 的编辑.比如:改变图像大小.旋转 ...

  2. Android 应用框架层 SQLite 源码分析

    概述   Android 在应用框架层为开发者提供了 SQLite 相关操作接口,其归属于android.database.sqlite包底下,主要包含SQLiteProgram, SQLiteDat ...

  3. pd.merge操作的on参数解释

    # 同时传入两个Key,此时会进行以['key1','key2']列表的形式进行对应,left的keys列表是:[['K0', 'K0'],['K0', 'K1'],['K1', 'K0'],['K2 ...

  4. 使用数据库、Redis、ZK分别实现分布式锁!

    分布式锁三种实现方式: 基于数据库实现分布式锁: 基于缓存(Redis等)实现分布式锁: 基于Zookeeper实现分布式锁: 基于数据库实现分布式锁 悲观锁 利用select - where - f ...

  5. Docker——基本组成

    Docker架构图 客户端(client):执行命令 服务器(docker_host): 镜像(image):类似于一个模板,通过这个模板来创建容器中 容器(container):利用容器技术,独立运 ...

  6. Django 之 modelForm (edit.html页面的编写)

    models.py文件 from django.db import models # Create your models here. from django.db import models # C ...

  7. Python之VSCode

    在学习Python的过程中,一直没有找到比较趁手的第三方编辑器,用的最多的还是Python自带的编辑器.由于本人用惯了宇宙第一IDE(Visual Studio),所以当Visual Studio C ...

  8. weblogic重要漏洞记录

    (PS:之前在freebuf发过,这里直接复制过来的,所以有些图片会有水印) 前言 T3协议存在多个反序列化漏洞CVE-2015-4852/CVE-2016-0638/CVE-2016-3510/CV ...

  9. CF17E Palisection(manacher/回文树)

    CF17E Palisection(manacher/回文树) Luogu 题解时间 直接正难则反改成求不相交的对数. manacher求出半径之后就可以差分搞出以某个位置为开头/结尾的回文串个数. ...

  10. 不重写hash不重写equals造成的问题

    不重写hash造成的问题 第一,就是不重写,调用object 的hashCode方法,用的是地址, 比如现在你map.put() 10000个对象,这时候对象都是不同的地址,计算出不同的对应的桶位置( ...