使用微信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 小练习(实例代码)
Aug 07 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
vue.js,ajax渲染页面的实例
Feb 11 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 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
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
单击某一段文字改写文本颜色
2014/06/06 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
原生js实现购物车
2020/09/23 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python执行get提交的方法
2015/04/29 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python 3.8 新功能全解
2019/07/25 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python中qutip用法示例详解
2020/10/02 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
搞笑婚礼主持词
2014/03/13 职场文书
青年文明号创建承诺
2014/03/31 职场文书
家长通知书教师评语
2014/04/17 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
民事辩护词范文
2015/05/21 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL