本来用的是这个插件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 = encodeURIComponent(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',

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这种错的话:

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

几点需要注意的:

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

2.如果是在初始化配置的时候出现这种错误url main,估计就是微信公众平台上账号下绑定的域名错了,一定要看看,除非账号和密码只有你知道,你不保准没有人改这个东西(我就吃了这个亏)

3.出现签名错误,就看看你传给后台的url是不是对的,然后看那一下后台传给你的数据是不是对的。

4.可能出现这种第一次分享是对的,但是第二次就是错的,是因为你分享之后的页面,微信会给你添加一些东西,你需要在传给后台url的时候将url放在encodeURIComponent这个里面,再传给后台

其他的应该没啥了。。。

js sdk 一键分享 微信_微信jssdk实现分享到微信相关推荐

  1. js sdk 一键分享 微信_微信JSSdk实现分享功能

    1. 概述 微信分享服务器的作用是为用户在微信浏览器端对来自网站以及客户端的页面进行二次分享链接时更友好的展示提供服务.为实现二次分享功能需要使用微信JS-SDK来开发. 微信JS-SDK是微信公众平 ...

  2. php微信分享文章怎么做的,微信开发使用 JSSDK 自定义分享内容 - 文章教程

    最近做一个砍价的小程序,需要用户分享自己的砍价页面,然后让朋友帮忙砍价,默认情况下微信的分享只有标题可用,描述部分会显示当前的网址,而且还没有缩略图,据说网页中如果有超过 300X300 的图片,会自 ...

  3. php 微信分享功能_使用php怎么实现一个微信分享朋友链接功能

    使用php怎么实现一个微信分享朋友链接功能 发布时间:2021-02-15 09:11:24 来源:亿速云 阅读:68 作者:Leah 这篇文章给大家介绍使用php怎么实现一个微信分享朋友链接功能,内 ...

  4. vue 分享给好友 点击分享按钮_点击网页分享按钮,触发微信分享功能

    微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...

  5. 安卓一键清理内存_软件| 安卓系统最强悍微信清理软件,一键将所有垃圾文件搜索出来,还可预览删除...

    安卓手机用的时间一长无论内存多大,都会出现各种卡顿问题,有系统优化方面的,也有软件本身缓存原因导致的,虽然删除了软件,但是保存的各种文件以及缓存数据都还在里面,种种原因,让手机变得不堪重负,最终行动迟 ...

  6. 电脑开两个微信_电脑怎么登录两个微信

    1/4 下载并安装微信电脑客户端,保证这台电脑没有登陆微信 2/4 就像正常打开微信一样,不过不是双击,而是快速连点四次 3/4 我们可以看到有两个微信登陆界面 4/4 用两个不同的账号进行扫码登陆即 ...

  7. jq 移动端网页分享功能_原生javascript实现分享到朋友圈功能 支持ios和android

    现在主流的分享工具也有很多,例如JiaThis.bShare分享,甚至一些大公司的如百度分享,但是他们依旧停留在只是在PC端的分享,对手机端的支持不是太好. 大家都知道现在很多手机端浏览器都内置了一些 ...

  8. js sdk 一键分享 微信_微信朋友圈分享自己拍的视频,一键开启这个设置,自带文字和音乐...

    你分享到朋友圈视频,还是简单的随手一拍,然后分享吗?怎样让你的分享的视频看起来高端.大气.上档次呢?其实微信视频新增编辑功能.能剪辑,能加文字和音乐,还能添加表情包.让你的视频更好看. 1.拍摄阶段 ...

  9. 微信公众号 分享接口 签名通过 分享无效果(JSSDK自定义分享接口的策略调整)...

    为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定义的分享链接,其域名或路径必须与当前页面对 ...

最新文章

  1. IBM 340 亿美元收购 RedHat(红帽)
  2. SAP应用有可能改造成Serverless架构么?
  3. LeetCode MySQL 1440. 计算布尔表达式的值(case when then else end)
  4. asp.net 实现一级域名与二级域名共享COOKIE
  5. OpenLayer学习之矢量地图
  6. R语言-时间日期函数
  7. 语言nomogram校准曲线图_医学统计与R语言:Meta 回归作图(Meta regression Plot)
  8. 自动驾驶路径规划论文解析(4)
  9. python学习day07-encode和decode
  10. 使用base标签后图片无法加载_Spring 源码学习(二)-默认标签解析
  11. 如何解决json中携带的反斜杠_【经验分享】python干货:5种反扒机制的解决方法...
  12. RHEL5 下构建PPTP ***服务器
  13. 【渝粤教育】国家开放大学2018年春季 8618-21T燃气行业规范 参考试题
  14. ActiveMQ下载、安装、启动
  15. MSP430F149单片机-IAP升级
  16. Oracle 监听器无法启动(TNS-12555,TNS-12560,TNS-00525)启动监听器无法打开,报错!
  17. WiFi定频操作一:TX测试-rtwpriv-----WIFI2.4G测试指令
  18. nao机器人接力比赛
  19. 配置haproxy支持使用多个lan内网ip做负载均衡以突破haproxy机只支持64k连接(突破单ip 65535端口限制)
  20. HTML瀑布流布局——世界名胜古迹(含图片)

热门文章

  1. 在linux批量删除多级目录下同一格式的文件
  2. t-SNE algorithm(t-分布邻域嵌入算法)
  3. C++ 继承过程中使用访问说明符和虚函数
  4. 计算机网络基础常考面试题总结
  5. 用计算机怎么算个人所得税,个税计算器2021
  6. 3.Deep Neural Networks for YouTube Recommendations论文精细解读
  7. 相机模型--Catadioptric Omnidirectional Camera
  8. 目标检测--Focal Loss for Dense Object Detection
  9. Debian/Ubuntu 对gpg和apt-key使用代理--报错解决:gpg: keyserver receive failed: Connection timed out
  10. android 图片列表,Android 列表使用(ListView GridView Gallery图片计时滚动)