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

更新时间：2019年07月03日 09:36:56 作者：lvjiajiajia

这篇文章主要介绍了使用微信SDK自定义分享的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、背景介绍

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

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

这就需要用到微信的分享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的。

好了先写这么多。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ES6中Set和Map数据结构的简单讲解
大家心里是否产生过这样的疑问,JS中既然已经有对象这种数据结构,我们为什么还要再单独去使用Set或者Map呢?下面这篇文章主要给大家介绍了关于ES6中Set和Map数据结构的相关资料,需要的朋友可以参考下
2022-08-08
javascript跨域的方法汇总
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下
2015-10-10
微信小程序实现滚动Tab选项卡
这篇文章主要为大家详细介绍了微信小程序实现滚动Tab选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
详解JavaScript的闭包、IIFE、apply、函数与对象
本文主要对JavaScript的闭包、IIFE、apply、函数与对象进行详细介绍。有很好的参考价值，需要的朋友一起来看下吧
2016-12-12
改进UCHOME的记录发布，增强可访问性用户体验
今天是看到UCDChina上的一篇文章文章，是关于SNS的用户体验问题，发觉文中提到的第一个细节，UCHOME就做的不好，于是改进了一下。
2011-01-01
js遍历获取表格内数据的方法(必看)
下面小编就为大家带来一篇js遍历获取表格内数据的方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
原生Javascript实现继承方式及其优缺点详解
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一,那么这篇文章主要给大家介绍了关于原生Javascript实现继承方式及其优缺点的相关资料,需要的朋友可以参考下
2021-07-07
JavaScript中发出HTTP请求最常用的方法
JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。这篇文章主要介绍了JavaScript中发出HTTP请求最常用的方法,需要的朋友可以参考下
2018-07-07
js获取UserControl内容为拼html时提供方便
js获取UserControl内容时无法测试通过，原来是继承了Page 然后使用VerifyRenderingInServerForm验证
2014-11-11
JavaScript中正则表达式的实际应用详解
这篇文章主要给大家介绍了关于JavaScript中正则表达式实际应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05