微信分享H5自定义标题描述和图片

前言

哎呀,为啥人家分享的H5页面这么绚丽,有头有尾有妹子,唯独自己的又老有丑又难啃,自己都看不下去,千万不要给领导看见。然而,最终还是领导发话了这个必须得改。

永远不要指望微信给的案例能让你迅速解决问题,打开一看你会发现都TM是PHP的DEMO,Java的代码那叫一个惨啊。

效果展示

来、来、来,我们先尝试先跟朋友拉一个仇恨。

啧、啧、啧,然后再跟朋友圈拉仇恨,可别像我这样藏起来自己玩。

开发环境

  • SpringBoot 1.5.10
  • JDK 7
  • Tomcat 8
  • Nginx
  • 备案域名
  • 认证公众号

注意事项

  • 必须是认证公众号,订阅号是没有接口分享权限滴
  • 配置IP白名单,基本配置-公众号开发信息-IP白名单
  • 备案域名需要在公众号后台授权认证,公众号设置-功能设置-JS接口安全域名

代码案例

本来想把记仇前后端以及微信分享认证上传到码云,想想天色已晚,有需要的直接联系我吧,或者抽空上传。

前端代码,处理分享逻辑:

<!-- 微信分享、部分代码 -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    var jssdk = null;
    var data = {'href':location.href};
    $.ajax({
        url:'/signature',
        type: 'POST',
        async:false,
        data:data,
        success:function(result){
            jssdk = result;
        },
        error:function(){

        }
    });
    // 配置功能
    wx.config({
        debug: false,
        appId: jssdk.appId,
        timestamp: parseInt(jssdk.timestamp),
        nonceStr: jssdk.nonceStr,
        signature: jssdk.signature,
        jsApiList: [
            "onMenuShareTimeline",//分享给好友
            "onMenuShareAppMessage"//分享到朋友圈
        ]
    });
    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: "今天这个仇先记下来", // 分享标题
            desc: " 主角们的记仇表情包,如果谁要不带你打游戏,你就挑一张发他",
            link: location.href, // 分享链接
            imgUrl: "http://jichou.52itstyle.com/jichou.png", // 分享图标
            success: function () {
                //alert("成功");
            },
            cancel: function () {
                // alert("失败")
            }
        });
        wx.onMenuShareAppMessage({
            title: "今天这个仇先记下来", // 分享标题
            desc: " 主角们的记仇表情包,如果谁要不带你打游戏,你就挑一张发他",
            link: location.href, // 分享链接
            imgUrl: "http://jichou.52itstyle.com/jichou.png", // 分享图标
            success: function () {
                //alert("成功");
            },
            cancel: function () {
                //alert("失败")
            }
        });
    });
</script>

基本的WechatController,获取签名:

@Controller
@RequestMapping
public class WechatController {
    private static final Logger logger = LoggerFactory.getLogger(WechatController.class);
    
    @RequestMapping(value="index.html",method=RequestMethod.GET)
    public String index() {
        return "index";
    }
    
    @RequestMapping(value="signature",method=RequestMethod.POST)
    public @ResponseBody Map<String, String> signature(String href) {
        logger.info("获取signature");
        Map<String, String> map = WxUtil.getSign(href);
        return map;
    }
}

然后就是一些获取Ticket、Token、计算失效时间以及签名认证等等,代码很长这里就不一一罗列了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全华班

小而优美的快速开发平台

kylin-frame是一个小而优美的快速开发平台,采用流行的框架springBoot+mybatis+shiro+redis开发,实现了权限管理(菜单...

822
来自专栏菩提树下的杨过

spring cloud 学习(7) - 生产环境如何不停机热发布?

业务繁忙的系统,原则上是不允许停机的,那么问题来了,如果真有严重的bug要修复,不得不发布,怎么做到不停机发布,对业务无感知呢? eureka 提供了一系列re...

2949
来自专栏向治洪

qq安全原理

    故事总要有缘由,那么这个故事的缘由就是,当我以前写了一个获取其它进程密码框密码的时候(前几篇博客中有描述),我抱着试一试的心情去试探了一下能不能得到 Q...

1648
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(28)-系统小结

我们从第一节搭建框架开始直到二十七节,权限管理已经告一段落,相信很多有跟上来的园友,已经搭配完成了,并能从模块创建授权分配和开发功能了 我没有发布所有源代码,但...

1857
来自专栏大数据挖掘DT机器学习

QQ空间(日志、说说、个人信息)python爬虫源码(一天可抓取 400 万条数据)

爬虫功能: QQSpider 使用广度优先策略爬取QQ空间中的个人信息、日志、说说、好友四个方面的信息。 判重使用“内存位”判重,理论上亿数量级的QQ可瞬间判...

4184
来自专栏FreeBuf

论如何反击用AWVS的黑客

前言 我的博客经常被师傅们用各种扫描器扫,每天都想尽办法来钓我鱼。虽然这是一种示好方式,但是久了,老是不给回礼就显得不礼貌了。所以我就稍微改造了一下博客。 这篇...

2599
来自专栏技术/开源

开源API测试工具 Hitchhiker v0.6更新 - 改进压力测试

Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持Schedule, 数据对比,压力测试,支持上传脚本定制请求,可以轻松部...

1961

OpenStack上NFV组件的自动化

[这篇文章最初是由Shay Naeh写的]

20710
来自专栏Crossin的编程教室

微信机器人进化指南

听说阿尔法狗又要挑战柯杰了。时至今日,人工智能不断刷新我们对这个世界的理解。或许再过不久,你真的不知道跟你在网上聊天的对象还是不是一个“人”,也不知道自己的工作...

3897
来自专栏Porschev[钟慰]的专栏

Nodejs学习笔记(十六)--- Pomelo介绍&入门

前言&介绍 Pomelo:一个快速、可扩展、Node.js分布式游戏服务器框架 从三四年前接触Node.js开始就接触到了Pomelo,从Pomelo最...

1.3K8

扫码关注云+社区