前言

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

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

效果展示

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

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

开发环境SpringBoot 1.5.10

JDK 7

Tomcat 8

Nginx

备案域名

认证公众号

注意事项必须是认证公众号,订阅号是没有接口分享权限滴

配置IP白名单,基本配置-公众号开发信息-IP白名单

备案域名需要在公众号后台授权认证,公众号设置-功能设置-JS接口安全域名

代码案例

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

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

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("失败")

}

});

});

基本的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 signature(String href) {

logger.info("获取signature");

Map map = WxUtil.getSign(href);

return map;

}

}

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

h5 修改title 微信_微信分享H5自定义标题描述和图片相关推荐

  1. 「微信二次分享」➡️ 自定义标题和图片

    项目场景: 提示:一般用于已经分享到朋友圈的h5页面,打开之后点击右上角...再次分享给好友和朋友圈的文章标题和图片配置 微信官方开放文档 微信开放文档 代码: <template>< ...

  2. html分享标题描述图片尺寸,微信分享H5自定义标题描述和图片

    前言 哎呀,为啥人家分享的H5页面这么绚丽,有头有尾有妹子,唯独自己的又老有丑又难啃,自己都看不下去,千万不要给领导看见.然而,最终还是领导发话了这个必须得改. 永远不要指望微信给的案例能让你迅速解决 ...

  3. h5 app title隐藏_荒岛求生H5:有难度的文字冒险生存游戏,你能生存多久?

    沐沐带你发现好游戏! 沐沐今天推荐这款游戏叫<荒岛求生H5>, 这是一款APP移植游戏, 所以游戏玩法略硬核! 属于有难度的文字冒险生存游戏! 你能生存多久? <荒岛求生H5> ...

  4. Android微信浏览器标题,企业微信内H5网页分享微信好友ios正常安卓自定义标题、图标、未生效...

    企业微信内H5网页分享微信好友ios正常安卓自定义标题.图标.未生效 问题类型 API/组件名称 终端类型 微信版本 基础库版本 Bug 'onMenuShareWeibo', 'onMenuShar ...

  5. 微信自定义分享卡片链接的解决方案(可自定义标题 描述 图片)

    微信自定义分享卡片链接的解决方案(可自定义标题 描述 图片) 参考文章: (1)微信自定义分享卡片链接的解决方案(可自定义标题 描述 图片) (2)https://www.cnblogs.com/rg ...

  6. R语言使用plot函数可视化数据散点图,使用title函数为可视化图像设置自定义标题名称、自定义adj参数将标题向右侧移动

    R语言使用plot函数可视化数据散点图,使用title函数为可视化图像设置自定义标题名称.自定义adj参数将标题向右侧移动 目录

  7. h5 修改title 微信_H5网页如何在微信中自定义分享链接(可设置标题+简介+图片)...

    最近开发h5网页,在分享网页到微信好友时,发现我的分享链接只有标题和链接地址: 图一 却不像自定义微信分享链接一样,分享的链接像生成一张卡片,有对应的标题,内容和图片: 图二 要达到上图自定义文案与图 ...

  8. h5 修改title 微信_h5制作小程序 邀请函模板免费

    大家一定对h5邀请函不陌生,因为现在大部分婚礼.展会.活动都会采用h5邀请函.H5邀请函相对于传统实体邀请函有着低成本.高效率.制作佳的优势. h5邀请函现在在制作上也是非常方便的,我们在微信上就可以 ...

  9. h5封装去底部_干货分享 | 一步一步教你在SpringBoot中集成微信支付H5支付

    一:开发文档场景介绍 H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付. 主要用于触屏版的手机浏览器请求微信支付的场景. ...

最新文章

  1. 4节点近160万IOPS:SDS/超融合测试不能只看数字
  2. secureCRT自动断开的解决方法
  3. java 二叉堆_二叉堆(三)之 Java的实现
  4. 这都2021年了,还不会Feign性能调优?Feign性能调优之gzip压缩实现-自娱自乐篇
  5. Logisim 组合电路设计 七段数码管的使用
  6. 纯CSS实现React Logo图形,内含详细解析
  7. Jeecg 初级入门
  8. 一款漂亮的赞助打赏单页界面美化版源码
  9. webbrowser加载地图网页出现脚本错误解决
  10. (209)浮点数运算步骤
  11. 隐马尔可夫(HMM)模型的各种语言实现
  12. ajax-》post
  13. 搭建ntp时间服务器 ntp - (Network Time Protocol)
  14. html js点赞功能实现,利用浏览器的JS代码实现QQ空间自动点赞功能
  15. java计算机毕业设计九宫格日志网站源码+数据库+系统+lw文档+mybatis+运行部署
  16. SVG,收藏夹图标以及我们可以用它们做的所有有趣的事情
  17. mysql ix锁_mysql锁详解
  18. ChatGPT使用案例之图像生成
  19. CCNA WAN 帧中继
  20. 苹果原装转接头不能连html,变革之际 iPhone 7P原装lightning耳机及转接头拆解

热门文章

  1. 自然语言表达处理笔记01—— 1.正则表达式 2.文本标记化 3.词干提取和词形还原 4.中文分词
  2. php 正则 括号内容_PHP怎么实现正则匹配所有括号中的内容
  3. RB-tree性质理解
  4. 软件测试/测试开发丨Docker 容器技术与常用命令
  5. 前端必会的 HTML+CSS 常用技巧 之 虚线的实现方式
  6. Rest风格请求方式
  7. [MySQL]-删库后恢复
  8. 【OS】Process Scheduling Synchronization
  9. Python中如何将浮点型数据转换成整型
  10. 【Kaggle】FIFA球员数据可视化分析(一)