专栏首页IT笔记微信分享H5自定义标题描述和图片

微信分享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 条评论
登录 后参与评论

相关文章

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

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

    小柒2012
  • JAVA实现的支付宝扫描二维码支付

    前期酝酿准备 最近项目中要上线支付功能、前段时间刚开发完微信的扫码支付、不得不说微信开发团队的文档真是一个烂。但总算是对照着API把功能交付上线了。 前几天公...

    小柒2012
  • mount.nfs: Connection timed out

    这个原因很多人都忽视了,在有严格要求的网络环境中,我们一般会关闭linux上的所有端口,当需要使用哪个端口的时候才会去打开。 文章:http://www.2ct...

    小柒2012
  • 微信分享H5自定义标题描述和图片

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

    小柒2012
  • async/await 带你逃离回调地狱

    不曾见过天堂就不会畏惧地狱,async/await是目前尝试过的最好的异步回调解决方案,本文通过详细步骤给大家讲解。

    Gcaufy
  • 糖尿病的数据可视化分析,比“药神”来得靠谱

    最近,国产电影《我不是药神》正在上映,这部根据真实性故事改编的电影,通过对病人群体的描写,引发了社会对于医疗问题的大讨论。作为一位长期关注临床健康问题的统计学家...

    DT数据侠
  • Android5.0以上实现全透明的状态栏方法(仿网易云界面)

    就能得到透明的状态栏,比较网易云音乐的界面会发现网易云的状态栏是全透明的,而通过设置windowTranslucentStatus得到的状态栏背景始终是半透明的...

    砸漏
  • Redux(四):源码分析之createStore

    createStore用来创建一个store来维护state树。改变store中state的唯一方式就是调用store的dispatch()方法。一个应用应该只...

    Ashen
  • 近亿级数据集下线,MIT道歉,ImageNet 亦或遭殃

    麻省理工学院(MIT)已永久删除包含8000万张图像的Tiny Images数据集。

    AI科技评论
  • Scalaz(5)- typeclass:my typeclass scalaz style-demo

      我们在上一篇讨论中介绍了一些基本的由scalaz提供的typeclass。这些基本typeclass主要的作用是通过操作符来保证类型安全,也就是在前期编译时...

    用户1150956

扫码关注云+社区

领取腾讯云代金券