微信公眾平台圖文訊息自動生成

no_mkd ###一點廢話

又拖到最後一天不得不更新的時候了，上週其實內容不少，但實在不想動，Android 小遊戲遇到了很多問題，解決後又發現了新問題，解決 bug 的過程中發現了一個神奇的東西：Mandelbrot Set（大洋彼岸曾經也有一位老兄在頭疼 Android Canvas 的效能問題。。）

有一張很漂亮的 gif，本來想貼在這裡，但實在有點太大隻（26MB），入口處：http://7xl5fb.com1.z0.glb.clouddn.com/mandelbrot.gif

##一.方案選擇

微信公眾平台的編輯器上次更新（2015-11-20）之後可用性完全沒有了，想要漂亮的排版似乎只能藉助於第三方 XX 線上編輯器。註冊訂閱號時就考慮了要做自動同步，後來好像因為個人號不給認證、不開放介面擱淺了

沒有介面權限還想圖個方便的話，有 3 個選擇：

託管給第三方平台
使用非公開介面（模擬登入，然後。。）
根據博文生成圖文訊息（然後手動複製貼上）

託管不考慮，木有閒錢，非公開介面考慮了很久，不穩定不說，可用資源很少，實作可能需要較長時間（時間就是金錢我的朋友），放棄了，但找到了幾個可能有用的東西：

WordPress 外掛程式 wechat_subscribers

特色：自動回覆最新文章、隨機文章、搜尋結果等，永久免費

位址：https://github.com/Soopro/wechat\_subscribers

WordPress 外掛程式 Wechat-Manager

特色：關鍵字自動回覆最新文章、一週/月/年內最多評論文章、文章搜尋結果

位址：https://github.com/9IPHP/Wechat-Manager

Node 封裝過的 Wechat API

特色：可用性應該比官方 API 要好（畢竟 Jackson Tian 70.2%）

位址：https://github.com/node-webot/wechat-api

至於前 2 個 WP 外掛程式，雖然功能強大，但也無法解決編輯圖文訊息的問題，wechat_subscribers 可能可以，但最後發現了另一個外掛程式，就放棄了嘗試

推薦，一款很不起眼（1 個 star 是筆者剛點上去的）的 WP 外掛程式：

WP_wechat_text_generator

簡介：一個可以生成微信公眾號文章的 WordPress 外掛程式。

位址：https://github.com/nervouna/WP\_wechat\_text\_generator

##二.DIY

筆者沒寫過 WP 外掛程式，邊查邊改慢了點不過也還行，拿到源碼首先是 License：

 * License: WTFPL
 *
 * DO WHATEVER THE FUCK YOU WANT, PUBLIC LICENSE
 * TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 *
 * 0. You just DO WHATEVER THE FUCK YOU WANT.

挺有意思的作者，感興趣的話可以去瞅瞅他的主頁：IGNORE THE BLUEPRINT

具體修改過程就不多說了，畢竟不是太光榮的事情（原作者是 PM，其實筆者從 js 裡發現了），遇到 2 個比較麻煩的問題

###1.Markdown

外掛程式拿到 post 內容之後，explode 為 rows，然後'<p>'.row.'</p>'就輸出了，筆者博文內容是 Markdown 格式的，需要進行預處理，如下：

// markdown transform
$wechat_item_content = apply_filters('the_content', $wechat_item_content);

上面的程式碼是通用的，相當於 Node 中的event.emit('the_content')，會呼叫所有想要處理博文內容的外掛程式的相關函式，比如 Markdown 外掛程式裡的：

add_filter('the_content',     'Markdown', 6);
add_filter('the_content',     'balanceTags', 50);

###2.自定義 CSS

樣式是必須要改的，外掛程式樣式太簡單，而且沒有美化code、pre等程式設計師專用標籤，修改樣式部分是透過 js 實作的，結構如下：

function refineStyle() {
    // h2~h5
    var h2s = post.getElementsByTagName('h2');
    for (var i = h2s.length - 1; i >= 0; i--) {
        // .entry-content h2 { font-size: 18px; padding-left: 13px; margin: 20px 0; }
        h2s[i].style.fontSize = '18px';
        h2s[i].style.margin = '20px 0';
        h2s[i].style.background = '#66b3ff';
        h2s[i].style.padding = '4px 0';
        h2s[i].style.paddingLeft = '13px';
        h2s[i].removeAttribute('class');
    };
    // ...
}

document.addEventListener('DOMContentLoaded', function() {
    refineStyle();
    selectText('wechat-post');
});

就是這個意思，雖然實作很難看（可以用 cssText 整容），但方法挺巧妙的，要是用 php 解析博文內容並填充行內樣式。。想想都可怕。。整容後是這樣的：

// table
var tables = post.getElementsByTagName('table');
for (var i = tables.length - 1; i >= 0; i--) {
    // .entry-content table, .comment-content table { border-bottom: 1px solid #ededed; color: #757575; font-size: 12px; line-height: 2; margin: 0.8em; margin-top: 0; width: 100%; }

    tables[i].style.cssText = 'border-bottom: 1px solid #ededed; color: #757575; font-size: 12px; line-height: 2; margin: 0.8em; margin-top: 0; width: 100%;';
    tables[i].removeAttribute('class');
    //!!! 注意要去掉w, h
    tables[i].removeAttribute('width');
    tables[i].removeAttribute('height');
};

用 cssText 省事不少，也便於從 css 向行內樣式轉換

##三.其他問題

在 Chrome 下存在問題，生成文章後selectText選中整篇文章，直接Ctrl+C複製到微信編輯器生成的樣式有問題，很多樣式丟失了（注意：線上預覽看到效果沒錯，但發送到手機預覽會發現很多樣式沒了），selectText 的具體實作如下：

function selectText(containerid) {
    var text = document.getElementById(containerid);

    // IE
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else {
    // others
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

出去翻了一圈，無果，selectText 方法也沒什麼問題，所以，最後決定建議使用 FF

P.S. 其實 Chrome 下放棄自動選中的內容，用滑鼠手動選擇全文，再複製，效果是沒錯的。不知道 2 者區別在哪裡？

還考慮了自動複製到剪貼簿，相容好像比較費勁，尤其是 Chrome，算了

評論

提交評論