使用微信SDK自定义分享的方法


Posted in Javascript onJuly 03, 2019

一、背景介绍

在微信中打开自己网站的链接,经常会变成下面这样

使用微信SDK自定义分享的方法

不太好看有木有,如果你想在分享出来的东西带上你的logo,带上你想要的描述,怎么办,像下面这样

使用微信SDK自定义分享的方法

这就需要用到微信的分享SDK,文档链接:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

二、微信SDK使用说明第一步

第一步

先要在微信公众平台上注册一个微信公众号,还必须要是认证的企业或组织,流程走下来大概要个两三天的时间吧,只有认证了的公众号才有分享SDK的权限,个人的不行,这个比较麻烦。账号申请成功后会有AppID和AppSecret,这个相当于你公众号的秘钥,第二步需要用到。然后在JS接口安全域名中加入你调微信SDK时的页面的地址,不支持IP地址、端口号及短链域名,只能写域名,不用加http啥的,在设置了安全域名的路径下才能够成功调SDK。

第二步

需要一个获取签名的接口,这个可以找RD帮忙操作,请求接口的时候带上URL(必须和你当前的URL一致),然后让RD好好研读下如何通过公众号的AppID和AppSecret获取到token及签名等信息,接下来就可以愉快的调用微信的分享SDK了。

第三步

获取到签名之后在HTML中引入

<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

引入后在代码中调用分享SDK

window.wx.config({
    appId: res.data.appId, //res.data为请求签名接口返回数据
    timestamp: res.data.timestamp,
    nonceStr: res.data.nonceStr,
    signature: res.data.signature,
    jsApiList: [
      'checkJsApi',
      'updateAppMessageShareData',
      'updateTimelineShareData'
    ]
  });
  const shareConfig = {
    'imgUrl': '你想展现的图标',
    'desc': '你想展现的描述',
    'title': '你想展现的title',
    'link': window.location.href,
    'success': function () {
      console.log('成功了!');
    },
    'cancel': function () {
      console.log('取消');
    }
  };
  window.wx.ready(function () {
    window.wx.updateAppMessageShareData(shareConfig);
    window.wx.updateTimelineShareData(shareConfig);
  });

OK!大功告成,现在就可以按你的想法分享内容了,但是如何在本地测试是否成功呢?我们刚才也说了只能在安全域名下才能调用成功,所以Charles就派上大用场了。。。把安全域名代理到本地,然后可以在微信开发者工具上面自测一下,没问题了上真机,iOS和安装都要试一下,会有惊喜。

三、坑及总结

在自测了没问题之后上线了。。。结果发现iOS的手机获取签名失败,报invalid signature,后来排查发现在iOS的微信里面如果从其他页面跳转到你要分享的页面window.location.href是不会变的。。。也就是说你发请求去获取签名时候传给后端的URL和你当前的URL是不一致的,所以导致签名获取失败。这个解决办法很多,可以把前一个页面的URL拿去获取签名,只要保持一致就是OK的。

好了 先写这么多。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 #Javascript
8 个有用的JS技巧(推荐)
Jul 03 #Javascript
vue swipe自定义组件实现轮播效果
Jul 03 #Javascript
20个必会的JavaScript面试题(小结)
Jul 02 #Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 #Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 #Javascript
js实现for循环跳过undefined值示例
Jul 02 #Javascript
You might like
PHP连接access数据库
2008/03/27 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
JavaScript实现前端倒计时效果
2021/02/09 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
浅析python继承与多重继承
2018/09/13 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
中学自我评价
2014/01/31 职场文书
水利学院求职自荐书
2014/02/01 职场文书
家长会主持词
2014/03/26 职场文书
爱心募捐通知范文
2015/04/27 职场文书
python OpenCV学习笔记
2021/03/31 Python