使用微信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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 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 mssql 数据库分页SQL语句
2008/12/16 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python 运算符 供重载参考
2009/06/11 Python
python中pass语句用法实例分析
2015/04/30 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python 图片去噪的方法示例
2019/07/09 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
幼儿园校车司机的岗位职责
2014/01/30 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
期中考试后的感想
2015/08/07 职场文书
大学生创业计划书
2019/06/24 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android