使用微信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.locations.href,
    'success': function () {
      console.log('成功了!');
    },
    'cancel': function () {
      console.log('取消');
    }
  };
  window.wx.ready(function () {
    window.wx.updateappmessagesharedata(shareconfig);
    window.wx.updatetimelinesharedata(shareconfig);
  });

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

三、坑及总结

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

好了 先写这么多。。。

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

相关文章

最新评论