自定義微信分享標題和描述信息

時間 2019-12-14

標籤自定義微信分享標題描述信息简体版

原文原文鏈接

概述

環境： python3.4, Django1.9.6css

準備工做

首先要搞到微信公衆平臺開發者ID和開發者密碼，這個在公衆號平臺的公衆號開發信息裏查看和修改html

而後在IP白名單中，把服務器的IP加進去。python

最後在公衆號設置--功能設置裏把域名加進去nginx

添加域名的時候，會看到提示下載一個txt文件，放到web服務器；這裏我是把它放在static目錄下，而後給它單獨作了個url，單獨寫了view訪問。git

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index),
    url(r'^MP_verify_xdl1MStBzOrk6qLu.txt', views.gettxt),
]

def gettxt(request):
    with open('MP_verify_xdl1MStBzOrk6qLu.txt', 'r') as f:
        return HttpResponse(f.read())

這樣是爲了http://你的域名/MP_verify_xdl1MStBzOrk6qLu.txt能夠訪問到它。web

固然直接把它放到nginx根目錄下也能夠，我是在IIS下配置的站點，其實不寫路由不寫views也是能夠的，詳細見最後的部署ajax

基本流程

基本流程步驟以下：django

1. 經過開發者ID和密碼獲取到 tokenjson

2. 經過token獲取到ticketapi

3. 拿到ticket生成簽名

4. 後臺返回數據給前臺js調用

注意的是token和ticket是2個小時過時，並且api天天有請求次數，因此咱們要把ticket存到本地，過時後再去請求。

代碼

settings.py 我只列出比較重要的內容

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR,  'static')
TEMPLATE_DIRS = (
    os.path.join(BASE_DIR,  'templates'),
    'app',
)

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

#微信API信息
WEIXINAPI = {
    "tokenUrl": "https://api.weixin.qq.com/cgi-bin/token?",
    "ticketUrl": "https://api.weixin.qq.com/cgi-bin/ticket/getticket?",
    "appID": "開發者ID",
    "appwd": "開發者密碼"
}

#分享頁面信息
PAGEINFO = {
    "Title": "這裏是標題信息",
    "Description": "這裏是描述信息",
    "PicUrl": "這裏是你要分享的url"
}

views.py

我是圖省事把全部代碼都寫在views.py裏了，其實這些能夠寫到別的文件裏，而後import進來，views.py只寫它該寫的東西

先寫一個獲取token的方法：

def flush_token():
    token_url = settings.WEIXINAPI["tokenUrl"]
    appID = settings.WEIXINAPI["appID"]
    appwd = settings.WEIXINAPI["appwd"]
    url = "%sgrant_type=client_credential&appid=%s&secret=%s" % (token_url, appID, appwd)
    ssl._create_default_https_context = ssl._create_unverified_context
    jsondata = urllib.request.urlopen(url).read().decode()
    json_dic = json.loads(jsondata)
    return json_dic["access_token"]

再來寫一個獲取ticket的方法

def flush_ticket(access_token):
    ticket_url = settings.WEIXINAPI["ticketUrl"]
    url = '%saccess_token=%s&type=jsapi' % (ticket_url, access_token)
    jsondata = urllib.request.urlopen(url).read().decode()
    json_dic = json.loads(jsondata)
    json_dic["expires_time"] = time.time()
    with open("ticket.txt", 'w') as f:
        json.dump(json_dic, f)
    return json_dic["ticket"]

由於每次分享的時候，ticket要先從ticket.txt中獲取，而後對比當前時間，若是超過兩個小時了，須要更新；沒有超過，則直接使用，那就寫一個get_ticket方法：

def get_ticket():
    if os.path.exists("ticket.txt"):
        with open('ticket.txt', 'r') as f:
            ticket_dic = json.load(f)
        expires_time = ticket_dic['expires_time']
        now_time = time.time()
        if now_time - expires_time >= 7200:
            #更新ticket
            access_token = flush_token()
            ticket = flush_ticket(access_token)
        else:
            ticket = ticket_dic["ticket"]
    else:
        access_token = flush_token()
        ticket = flush_ticket(access_token)
    return ticket

獲取到ticket以後，就要生成簽名信息了，簽名信息須要幾個參數，一個是16位的隨機字符串，一個是ticket, 一個是timestamp這的單位是秒，最後一個是你要分享的url，而後將它們按照ASCII碼由小到大的順序以url參數方式拼接起來用sha1加密。

先寫一個生成隨機數的方法：

def randomone(n):
    string = ''
    if n.isdigit():
        for i in range(int(n)):
            if i%2 != 0:
                tmp = random.randint(0,9)
            else:
                tmp = str(chr(random.randint(97, 122)))
            string = "%s%s" % (string, tmp)
    return string

如今再來一個生成簽名的方法：

def create_string(url):
    random_string = randomone('16')
    times = int(time.time()/1000)
    ticket = get_ticket()
    arg_string = "jsapi_ticket=%s&noncestr=%s&timestamp=%s&url=%s" % (ticket, random_string, times, url)
    m = hashlib.sha1()
    m.update(arg_string.encode('utf8'))
    sign = m.hexdigest()
    return times,random_string,sign

這個方法返回了三個變量，這三個變量是時間，隨機字符串，和簽名信息；這三個變量須要傳遞給前臺頁面使用。

最後來寫一個index方法：

ef index(request):
    url = request.get_host() + request.get_full_path()
    url = 'http://%s' % url
    appId = settings.WEIXINAPI["appID"]
    timestamp, nonceStr, signature = create_string(url)
    title = settings.PAGEINFO["Title"]
    des = settings.PAGEINFO["Description"]
    picture = settings.PAGEINFO["PicUrl"]

    return render(request, 'index.html', locals())

注意這裏，在獲取URL的時候，若是你的url只是個域名，瀏覽器會自動在域名後面加上「/」，好比http://www.qq.com/ , 最後這個」/」也是要參與加密的；若是你的url還有參數，可能還會自動在後面加上#weixin啥的，都要去掉，具體把url打印出來看就知道了。

代碼部分到這裏就結束了。下面看頁面和js.

前臺頁面和js

我直接把js寫到頁面上了，你也能夠寫到獨立的js文件中，用到的變量以參數形式傳過去，在頁面上調用便可。

我寫在了head標籤裏

首先引一個weixin的js:

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

而後寫一下xw.config

wx.config({
            debug: false,
            appId: '{{ appId }}',
            timestamp: '{{ timestamp }}',
            nonceStr: '{{ nonceStr }}',
            signature: '{{ signature }}',
            jsApiList: [
                // 全部要調用的 API 都要加到這個列表中
                'checkJsApi',
                'openLocation',
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
              ]
        });

最後把各個分享方法寫到wx.ready()方法裏，意思是文檔加載完後就加載它們

wx.ready(function () {

              //分享給朋友
                wx.onMenuShareAppMessage({
                  title: '{{ title }}',
                  desc: '{{ des }}',
                  link: '{{ url }}',
                  imgUrl: '{{ picture }}',
                  trigger: function (res) {
                    // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
                    //alert('用戶點擊發送給朋友');
                  },
                  success: function (res) {
                    alert('已分享');
                  },
                  cancel: function (res) {
                    alert('已取消');
                  },
                  fail: function (res) {
                    alert(JSON.stringify(res));
                  }
                });

                //分享到朋友圈
                wx.onMenuShareTimeline({
                  title: '{{ title }}',
                  link: '{{ url }}',
                  imgUrl: '{{ picture }}',
                  trigger: function (res) {
                    // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
                    //alert('用戶點擊分享到朋友圈');
                  },
                  success: function (res) {
                    alert('已分享');
                  },
                  cancel: function (res) {
                    alert('已取消');
                  },
                  fail: function (res) {
                    alert(JSON.stringify(res));
                  }
                });

                //分享到QQ
                wx.onMenuShareQQ({
                  title: '{{ title }}',
                  desc: '{{ des }}',
                  link: '{{ url }}',
                  imgUrl: '{{ picture }}',
                  trigger: function (res) {
                    // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
                    //alert('用戶點擊分享到朋友圈');
                  },
                  success: function (res) {
                    alert('已分享');
                  },
                  cancel: function (res) {
                    alert('已取消');
                  },
                  fail: function (res) {
                    alert(JSON.stringify(res));
                  }
                });

                 //分享到騰訊微博
                wx.onMenuShareWeibo({
                  title: '{{ title }}',
                  desc: '{{ des }}',
                  link: '{{ url }}',
                  imgUrl: '{{ picture }}',
                  trigger: function (res) {
                    // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
                    //alert('用戶點擊分享到朋友圈');
                  },
                  success: function (res) {
                    alert('已分享');
                  },
                  cancel: function (res) {
                    alert('已取消');
                  },
                  fail: function (res) {
                    alert(JSON.stringify(res));
                  }
                });
        });