html页面中规范化微信分享时候的样式

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()+"&timestamp="+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