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

  • Post author:
  • Post category:其他


前言

哎呀,为啥人家分享的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、计算失效时间以及签名认证等等,代码很长这里就不一一罗列了。



版权声明:本文为weixin_30225755原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。