微信jssdk分享(附代码)
老规矩---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
// 分享的 三要素----------------------------------------------
var shareData = {
url: window.location.href, //当前页面路径
title: '分享的标题xxxx',
content: '描述xxxx',
pic: 'xxxxpic' //图片
}
//调用 share.js中的 函数 并且传入参数
allSharefun(shareData)
3.前提, 你已经配置好微信公众号的js安全域名等等!!!
需要配置ip白名单和安全域名


2 更多参考链接:https://www.jianshu.com/p/bef8675130cb
3 官网链接: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10
微信jssdk分享(附代码)的更多相关文章
- 微信JS-SDK分享功能的.Net实现代码
JS-SDK接口是什么? 为了方便开发者实现微信内的网页(基于微信浏览器访问的网页)功能,比如拍照.选图.语音.位置等手机系统的能力,并方便开发者直接使用微信分享.扫一扫等微信特有的能力,微信推出了J ...
- 微信JS-SDK“分享信息设置”API及数字签名生成方法(NodeJS版本)
原文:微信JS-SDK"分享信息设置"API及数字签名生成方法(NodeJS版本) 先上测试地址以示成功: 用微信打开下面地址测试 http://game.4gshu.com/de ...
- 微信jssdk分享链接给好友,图标只能自己看到,对方看不到!
问题描述:调用微信jssdk分享接口时,所有参数均正常的情况下(排除参数错误的情况),分享给好友后,其中的小图标自己看得到,接收到分享的好友看不到小图标! (如上图所示!) 出现上述问题的原因:本人猜 ...
- 微信JSSDK分享朋友圈微信自定义分享接口
服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议 ...
- 微信JSSDK分享功能详解
本文以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可 工欲善其事,必先利其器,好好利用下边的帮助工具,都是腾讯给开发人员的工具 1.微信开发者说明 ...
- 微信jssdk分享功能,jssdk成功调用,分享内容自定义失败
前提:调用微信jssdk分享功能,通过微信开发者工具调试,调用正常,无任何报错信息. 问题:调用成功,且开发者工具正常显示,但是通过真机调试,分享出去后,自定义内容失效,为微信自动获取的默认内容!截止 ...
- 微信JS-SDK分享接口示例中jsapi_ticket.php和access_token.php说明
关于如何使用微信JS-SDK,可以查看官方介绍说明:查看链接 在使用分享接口的过程中,查看了示例代码,其中包含两个文件jsapi_ticket.php和access_token.php,记录一下这两个 ...
- 微信jssdk分享功能开发
先理解下分享: 在app端 ,经常能看见 分享按钮的功能,(分享给朋友,分享到朋友圈,分享到QQ空间等等): https://open.weixin.qq.com/(微信开发平台),这需要到开放平台注 ...
- 企业微信jssdk分享接口管理系统
服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议 ...
随机推荐
- 【转载】SQL复杂实例
from:http://blog.csdn.net/basycia/article/details/52134320 OR from:http://www.wzsky.NET/ ...
- laravel 使用Redis
1.非框架中使用redis实例? 就是new出redis对象然后连接,然后键值操作即可 <?php $redis = new redis(); $redis->connect('127.0 ...
- 1. 查看NGINX是否在运行.
1. 查看NGINX是否在运行. ps aux | grep nginx [root@bogon /]# ps aux | grep nginx root 2318 0.0 0.0 56816 127 ...
- 25 面向对象编程 继承概念 代码 快捷键 super注意点
继承概念 继承的本质是对某一批的抽象,从而实现对现实世界更美好的建模. extends的意思的"扩展".子类是父类的扩展. JAVA中类只有单继承,没有多继承!理解:一个儿子只能有 ...
- MATLAB2018a安装
1:同时选中进行解压 2:解压完后打开"setup.exe"进入安装步骤 3:选择"使用文件安装密钥" 4:接受条款,下一步 5:复制密钥 09806-0744 ...
- 面试官:Redis中的缓冲区了解吗
hello 大家好,我是七淅(xī). Redis 大家肯定不陌生,但在使用层面看不到的地方,就容易被忽略.今天想和大家分享的内容是 Redis 各个缓冲区的作用.溢出的后果及优化方向. 在开始正文前 ...
- java8中CompletableFuture的使用介绍
既然CompletableFuture类实现了CompletionStage接口,首先我们需要理解这个接口的契约.它代表了一个特定的计算的阶段,可以同步或者异步的被完成.你可以把它看成一个计算流水线上 ...
- Java案例——学生管理系统
简单完整的学生管理系统 学生类 public class Student { private String id; private String age; private String name; p ...
- 6月12日 python学习总结 框架
1. 登录功能的实现 1. form表单提交数据的注意事项: 1. 是form不是from,必须要有method和action 2. 所有获取用户输入的表单标签要放在form表单里面,表单标签必须要有 ...
- python练习册 每天一个小程序 第0008题
1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 一个HTML文件,找出里面的正文. 6 7 思路: 8 利用Beautiful ...