html页面中规范化微信分享时候的样式
1.熟悉微信JS-SDK开发说明文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp14211411152.先要绑定域名(该域名确定通过ICP备案) 这里还需要将.txt文件上传到linux服务器,这里我用的是nginx服务,将文件上到nginx 中配置的 location / (我放置的是官网文件)下的文件夹..
1.熟悉微信JS-SDK开发说明文档
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
2.先要绑定域名(该域名确定通过ICP备案)
这里还需要将.txt文件上传到linux服务器,这里我用的是nginx服务,将文件上到nginx 中配置的 location / (我放置的是官网文件)下的文件夹中了。
也就是说能通过 : 域名/xxxx.txt文件,能够请求到.txt文件的内容就可以。
3.这时我们要去创建AppSecret,将本机的公网IP添加到白名单中,方便去获取accsess_token(添加开发人员的即可),这时将开发前的准备工作做完了。
4. 在开发页面先引入js链接http://res.wx.qq.com/open/js/jweixin-1.4.0.js(这里最好从网上找一个.js文件)
5.相应的js代码
var _shareurl = window.location.href;
var url = location.href.split('#')[0];(前台传到后台的url,比后台用request.getRequestURL准确)
$(function(){
$.ajax({
url:"/consume/wxshare",(改成你自己的)
type:"get",
data:{url:url},
success:function(data){
console.log(data);
var obj = JSON.parse(data);
wx.config({
debug: false,
appId: obj.appid,
timestamp: obj.timestamp,
nonceStr: obj.nonceStr,
signature: obj.signature,
jsApiList: ['updateAppMessageShareData','updateTimelineShareData']
});
var formLst = JSON.parse($("#session").html());
var friendShareTitle = "";
var friendShareDesc = "";
var friendShareImgUrl = "";
var cfShareTitle = "";
var cfShareImgUrl = "";
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: friendShareTitle, // 分享标题
desc: friendShareDesc, // 分享描述
link: _shareurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: friendShareImgUrl // 分享图标
});
wx.updateTimelineShareData({
title: cfShareTitle, // 分享标题
link: _shareurl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: cfShareImgUrl // 分享图标
});
wx.error(function (res) {
});
});
}
})
})
6.后台代码(部分代码+叙述)
@Data
public class Config {
private String appid;
// 生成签名的时间戳
private String timestamp;
// 生成签名的随机串
private String nonceStr;
// 签名
private String signature;
private String url ;
}
@RequestMapping("/wxshare")
@ResponseBody
public String wxshare(HttpServletRequest request, String url) {
logger.info("url={}", url);
Config config = new Config();
config.setNonceStr(WxUtils.getNonceStr());
// 时间戳
config.setTimestamp(String.valueOf(System.currentTimeMillis()/1000));
config.setUrl(url);
config.setAppid("wxxxxxxx");
String signature = WxUtils.getSignature(config);
config.setSignature(signature);
logger.info(config.toString());
return new Gson().toJson(config);
}
7.根据appid和appsecret得到accessToken,拼接成完整的字符串后,写一个httpGet(url)接口后调用,获取accessToken
String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";
8.根据accessToken得到jsapi_ticket,拼接成完整的字符串后调用httpGet(url),获取ticket
String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
9.拿到config里面的nonceStr、timestamp、url以及jsapi_ticket,拼接成字符串,然后写sha1(str)接口,进行加密生成signature
String str = "jsapi_ticket="+ticket+"&noncestr="+config.getNonceStr()+"×tamp="+config.getTimestamp()+"&url="+url;
在开发的过程中,要注意Config对象里面的信息(在我开发的时候遇到url的问题,由于没有打日志,所以没有及时发现哪里的问题),所以要多打日志(logger)。
开发过程中遇到的问题,总结在下面,希望能帮到你,欢迎大家留言讨论。
推荐文章 https://www.jianshu.com/p/4a9a6f62618b
errmsg config invalid signature
解决方法链接:https://blog.csdn.net/lyfrighting/article/details/82490876
errmsg config invalid url domain
解决方法链接:https://blog.csdn.net/bianchengninhao/article/details/51210271
更多推荐
所有评论(0)