微信jssdk实现分享到微信

本来用的是这个插件http://overtrue.me/share.js/和百度分享

相同之处:在微信分享的时候,分享的链接都不能获取到缩略图。。。

不同之处:百度分享在微信低版本是可以看到缩略图的(但是一点用都没有,不过还是要说一下)

这两个在分享带图片的文章的时候,都是不符合要求的(在这上面耗费了我好多时间,一度让我怀疑人生了。。。)

最后得出的你想要带标题 描述 图片都是完整的,就需要用微信的jssdk这是必须的吗,没啥其他好的方法

现在说一下jssdk实现微信分享的步骤:

1.打开微信开发者平台。输入你的微信公众号账号和密码,进入到这个页面

可以看到我的账号是订阅号而且是未认证的 因为我项目中用的账号是公司的号,我现在只是以我自己的号 简单说一下。

你自己需要的账号是已经认证的(据说要花300元,好贵。。。)然后看一下左边菜单的接口权限里面的分享接口是否已经授权了(同样的我的是未获得的 因为我是以我的为例子的 我实际上用的是公司的号不是我自己的号)

2.设置js安全域名接口

打开公众号设置里面的功能设置,然后看到js接口安全域名,开始设置

打开设置之后页面是这样的 。我就说一下注意的点吧

(1)在下面填写的时候填域名就可以了,然后将需要下载的这个txt下载下来,放到你的域名的根域名下面,怎样检测自己是否放置正确 在浏览器中输入你的域名/txt的名字 能看内容就是对的,看不到就看看是否放置错误

以上是准备工作做好了 下面是比较正式的步骤

1.打开左侧菜单的基本配置

在里面已经知道的是你的appID 然后自己设置一下开发者密码,并且在设置的时候需要将密码保存一下,如果你一直进行完成没有保存,那么你的密码是不会显示在页面中的

现在就可以知道 appId 和secret

2.打开开发者文档中的jssdk

可以看到具体步骤,前1步已经完成了,现在需要的是

将微信官方的文件放到你的项目中,然后再页面中引入 就可以了

3.基本的都可以了,现在是开始写代码,我先贴一下我的代码

这是前端的代码,很简单,前端需要做的就是将当前这个页面的url的去掉#后面的东西之后的部分 传给后台 然后从后台获取到随机数 时间戳 签名就可以了

          share:function(){
		    var _this=this;
		    //标题 描述
		    var t=document.title;
		    //获取第一张图片
		    var src=_this.$("img").eq(0).attr("src");
		    var img=location.origin+‘/home‘+src.split(‘/home‘)[1];
		    console.log(img);
		    //要传给后台的url
		    var strUrl = location.href.split(‘#‘)[0];
		    var url=location.href;

		   $request({
			type: "Post",
			url : ‘xxx?url=‘+strUrl,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success : function(result) {
				console.log(result)
				WXDate=result;
				 wxconifg(WXDate);
			}
		    });

		    function wxconifg(WXDate) {
		        wx.config({
		            debug: false,
		            appId: ‘‘,
		            timestamp: WXDate.timestamp,
		            nonceStr: WXDate.nonceStr,
		            signature: WXDate.signature,
		            jsApiList: [‘checkJsApi‘,‘onMenuShareTimeline‘,‘onMenuShareAppMessage‘]
		        });
		        wx.ready(function () {
		            wx.checkJsApi({
		                jsApiList: [
		                  ‘getLocation‘,
		                  ‘onMenuShareTimeline‘,
		                  ‘onMenuShareAppMessage‘
		                ],
		                success: function (res) {
		                  console.log(res.errMsg)
		                } 

		              });
		            wx.onMenuShareAppMessage({
		                title: t,
		                desc: t,
		                link: url,
		                imgUrl: img,
		                trigger: function (res) {
		                },
		                success: function (res) {
		                },
		                cancel: function (res) {
		                },
		                fail: function (res) {
		                    alert(JSON.stringify(res));
		                }
		          });
		          //分享到朋友圈
		            wx.onMenuShareTimeline({
		        	title: t,
		                desc: t,
		                link: url,
		                imgUrl: img,
		                type: ‘link‘,
		                dataUrl: strUrl,
		                trigger: function (res) {
		                },
		                success: function (res) {
		                },
		                cancel: function (res) {
		                },
		                fail: function (res) {
		                    alert(JSON.stringify(res));
		                }
		            });
		            wx.error(function(res){
		        	console.log(res);
		            });
		        });
		    }
		},

4.至于后台的代码 我不是很懂 我看官方应该有给后台代码(在最后面)

说一下在整个过程中遇到比较坑的地方:

1.第一次解除微信jssdk这种东西,刚一开始没明白jssdk的本质,我直接在pc端打开的时候,什么都没有显示。直接蒙圈了。然后看了半天才明白,jssdk本质上是给你需要分享的页面配置好标题 描述 图片等信息,而不是引导客户去操作这个怎样分享

2.关于config出现invalid signature这种错的话:

官网有提供解决的思路,可以照着一步一步进行。

需要提的一句是,我当时遇到了微信签名验证工具和后台给我的是一样的,其他也都对,但还是出现这个错误,我的原因是在生成签名的时候url不对,url必须是完整的,不能只是填写一个域名。你可以直接alert(location.href.split(‘#‘)[0])必须是这个!!!(在这个问题上我直接耗了一天时间。。。)

其他的应该没啥了。。。 

时间: 2024-10-30 08:09:23

微信jssdk实现分享到微信的相关文章

配置微信jssdk自定义分享

前段时间做这个功能的时候遇到这个问题,之前的话是微信自动抓取界面第一张图,现在微信更新api,必须自行配置,接入jssdk,才能实现该功能. 详细可以查看微信的jssdk文档 微信官方开发者文档    地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 1.首先需要微信的服务号 2.一个ICP备案的域名 这个域名需要设置为微信公众号后台的JS接口安全域名,否则微信仍然不允许调用它的接口. 3.在微信开发者中心配

微信JS-SDK使用步骤(以微信扫一扫为例)

概述: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. JSSDK使用步骤: 1.先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口

iOS开发笔记14:微博/微信登录与分享、微信/支付宝支付

产品中接入了微博/微信的第三方登录分享功能.微信和支付宝的第三方支付功能,之前在开发过程中涉及到这些部分,于是抽空将接入过程梳理了一遍. 1.微博.微信.支付宝SDK相关接入设置 (1)微博SDK SDK下载 设置URL Scheme,用于从第三方应用或浏览器中启动app 将SDK添加到工程中(支持CocoaPods),app启动时(didFinishLaunchingWithOptions)注册appkey 重写AppDelegate 的handleOpenURL和openURL方法,其它引用

微信JS-SDK实际分享功能

为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了,在iphone手机上,显示为当前页的链接,之前设置的图标和标题等都没有了.虽然在部分android手机上还可以用,但最近微信升级后,分享功能也不正常了.正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能.这里仅就分享功能的使用进行一些描述. 下面的代

使用微信JSSDK自定义分享内容

微信在6.0.2.58版本以后开始使用新的api,在Android系统中不能用以前的代码来自定义分享内容了. 现在自定义内容的方法走的是公众号的一套流程 1获取access_token 2得到token后获取jsapi_ticket 3得到ticket后将ticket用sha1算法加密. 这里加密的数据是ticket+time()+随机字符串+url code: <?php require_once "jssdk.php"; $jssdk = new JSSDK("AP

微信jsSDK开发

(学习类)2015年最新微信公众平台开发 微信JSSDK开发分享功能 链接地址:http://blog.163.com/[email protected]/blog/static/11463788520151322125782/ 用c#开发微信(10) JSSDK 基本用法 分享接口"发送到朋友" 链接地址:http://www.it165.net/pro/html/201506/42675.html#

微信jssdk

微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html  1 js代码 1 wx.ready(function () { 2 // 1 判断当前版本是否支持指定 JS 接口,支持批量判断 3 document.querySelector('#checkJsApi').onclick = function (

h5+分享到微信、朋友圈代码示例

(function(window) { var Share={}; Share.info = { id: '', name: '', head_image: "_www/images/icon/A/144.png", introduce: '' }; /** * 更新分享服务 */ var shares = null; function getSerivces() { plus.share.getServices(function(s) { shares = {}; for (var

微信JS-SDK

微信JS-SDK 链接汇总: 微信公众平台开发者文档:http://mp.weixin.qq.com/wiki/home/index.html 新浪sea服务器:http://egret5.sinaapp.com/weixin/wx_sample.php jssdk.php  方倍工作室:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-php-demo.html 开发中问题: SAE 接入微信JS-SDK不能本地写的问题:https://segmen