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