侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 3年前   222

一、背景介绍

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


不太好看有木有,如果你想在分享出来的东西带上你的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中引入

引入后在代码中调用分享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的。

好了 先写这么多。。。

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

您可能感兴趣的文章:

  • thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
  • 微信小程序前端自定义分享的实现方法
  • 微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
  • thinkphp项目如何自定义微信分享描述内容
  • 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
  • php版微信公众号自定义分享内容实现方法
  • 微信自定义分享链接信息(标题,图片和内容)实现过程详解


  • 上一条:
    微信小程序判断页面是否从其他页面返回的实例代码
    下一条:
    微信小程序中如何使用flyio封装网络请求
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客