H5微信自定義分享連接（設置標題+簡介+圖片）

時間 2019-12-11

標籤 h5 微信自定義分享連接設置標題簡介圖片简体版

原文原文鏈接

起源：最近公司在作招募廣告的html5頁面，而後作出來後，產品提出一個問題，須要分享出去的連接是卡片形式，內容也要本身定義，這下就難到我了，由於是第一次遇到這種需求，果斷百度，然而，我就像你們同樣，看都看不懂，一大堆什麼微信jssdk官方文檔，看得我眼花繚亂，博客上面的也大多都是php形式的解釋，也不知道怎麼導入進來，然而接着去了解這個卡片分享，發現官方的分享卡片，是衆多在微信生態中傳播的html5靜態頁面的一個重點。因此我解決了這個問題以後，就來寫這個博客，但願能幫助一些初步瞭解這個微信自定義分享連接的園友。php

產品須要作的：html

1.微信認證過的公衆號:必須是通過認證的，沒有認證的或者認證過時的都不能夠；前端

2.通過備案的域名：必須是備案過的，否則是沒法使用的；html5

3.綁定域名：首先你須要將須要分享的網址的域名綁定到微信公衆平臺上面，具體操做：先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」；ajax

注：博主此次開發中，就遇到了第三點問題，我代碼都寫好了，後臺也作好了，可是就是分享出去不是卡片形式緩存

遇到 config:invalid url domain

後來發現是產品忘記綁定域名，設置白名單了。。。(域名不要加http://)安全

好，後來這個問題解決了，可是仍是分享不成功，又進行一次排查，由於要在手機端上線才能看到效果，就一直上線一直改，改到下午5點，後來發現是產品appid給錯了，我TM......服務器

後臺須要作的：微信

1.後臺服務器：前臺頁面須要後臺服務器傳過來一些配置參數，好比appId、timestamp、nonceStr、signature這幾個參數都是後臺從微信公衆平臺獲取到的，須要後臺進行配合；app

2.獲取access_token：利用公共號APPID、APPSECRET從微信服務器獲取對應的access_token，這裏是後臺開發小夥伴的範圍很少作解釋；

後臺須要傳的參數格式：

前端你須要作的：

1.引入js文件：在分享的頁面須要引入一個微信官方的js文件；

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2.經過ajax獲取參數 :經過後臺給你的接口，取到那些必要的參數，而後你須要把當前分享的頁面的url傳到後臺去，必須動態的獲取當前頁面，並且必定要對url進行編碼，要否則會不起做用；

3.由於重複上線你手機須要清理緩存，這又是一個麻煩事，手機打開：

debugx5.qq.com

而後滑到底部，有四個清理緩存的選擇框，選擇清理就好，不會影響別的地方的緩存，無需擔憂；

好，到這裏就貼代碼了，代碼裏面都特地詳細的進行了註釋：

$(function() {
    //對url進行編碼
    var localUrl = encodeURIComponent(location.href.split('#')[0]);
    //url傳到後臺格式
    var Url = "URL=" +localUrl;
    //這幾個參數都是後臺從微信公衆平臺獲取到的
    var nonceStr, signature, timestamp, appId, shareUrl;
    $.ajax({
        //後臺獲取參數接口
        url: "https://www.xxxxxxx.cn/user/xxxxxxxx/",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Token", getCookie("token"));
        },
        type: 'get',
        data: Url,
        success: function(data) {
            //獲得參數
            var appId = JSON.parse(data).appId;
            var nonceStr = JSON.parse(data).nonceStr;
            var signature = JSON.parse(data).signature;
            var timestamp = JSON.parse(data).timestamp;
            var shareUrl = JSON.parse(data).url;
            //經過微信config接口注入配置
            wx.config({
                debug: false, // 默認爲false  爲true的時候是調試模式，會打印出日誌
                appId: appId,
                timestamp: timestamp,
                nonceStr: nonceStr,
                signature: signature,
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo'
                ]
            });
            //配置自定義分享內容
            window.share_config = {
                'share': {
                    'imgUrl': 'https://www.xxxxxx.cn/cecerecruit/img/%E6%B5%8B%E6%B5%8B%E6%8B%9B%E5%8B%9F.png', // 這裏是須要展現的圖標
                    'desc': '120秒，48項天賦解析，90分鐘專家諮詢解讀，深度剖析您的天賦人生。成爲測測科技合夥人，尊享至多11項專屬超值禮遇。', // 這是分享展現的摘要
                    'title': '90%的人都承認測測科技天賦智能測評|合夥人現正招募中', // 這是分享展現卡片的標題
                    'link': shareUrl, // 這裏是分享的網址
                    'success': function(rr) {
                        //console.log('成功' + JSON.stringify(rr))
                    },
                    'cancel': function(tt) {
                        //console.log('失敗' + JSON.stringify(tt));
                    }
                }
            };
            wx.ready(function() {
                wx.onMenuShareAppMessage(share_config.share); // 微信好友
                wx.onMenuShareTimeline(share_config.share); // 微信朋友圈
                wx.onMenuShareQQ(share_config.share); // QQ
            });

        },
        error: function(err) {
            
        },
    });

})