一点废话

又拖到最后一天不得不更新的时候了，上周其实内容不少，但实在不想动，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，算了