关于javascript:这个油猴脚本也许对你微信排版有帮助

壹伴排版 Plus，免开 vip

性能一

在微信公众平台可直接插入壹伴的模板，免开 vip

• 第一步：装置壹伴 chrome 插件
• 第二步：装置 chrome 油猴扩大
• 第三步：装置壹伴 plus 脚本

性能二

壹伴模板市场能够间接复制模板

下文是记录这个油猴脚本开发的思考

前言

之前我注册了一个微信公众号“JS 酷”，定位是前端工程师进阶，也开始发了一些文章，在这个过程中我发现我的微信文章排版没有其余公众号难看，这是一个看脸的时代，颜值很重要，经营公众号做内容也是如此。除了要让内容自身有料、有用、乏味之外，咱们还要给用户提供一个高颜值的排版。那么，如何排版出一个难看微信文章呢？

工具摸索

而后搜寻了下微信排版工具，网站有一大堆排版工具

1. 壹伴

应用办法： 间接上网站下载插件并装置在本人平时用的浏览器即可。平时在该浏览器上登录公众号后盾即可应用。装完当前关上公众号如下图：

2. 美编助手

应用办法： 间接上网站下载插件并装置在本人平时用的浏览器即可。平时在该浏览器上登录公众号后盾即可应用。装完当前关上公众号如下图：

那么就以这 2 个为例，钻研其实现过程

微信富文本编辑器

通过微信控制台关上，咱们能够看到微信应用的富文本编辑器是 ueditor，咱们能够间接在控制台批改 html，批改实现后就能够预览了，由此能够得悉咱们能够用 html 来排版文章，然而咱们不能应用 css，必须应用内联 style

快捷插入实现

接下来以壹伴微信编辑器插件为例，钻研下其实现形式；
点击的时候就能够直接插入编辑器中，既然晓得了应用的是 ueditor，咱们能够去官网找 api，看看是否有相干 api？

咱们能够通过官网找到插入 html 的办法

在以后光标地位插入 html 内容

ue.execCommand('inserthtml', '<span>hello!</span>');

免开 VIP

当然也不是都收费的，很多模板都须要开明 vip

点击这些 vip 模板就会有个让你开 VIP 的弹窗。

那这个小的 vip 图标就能够难到咱们前端工程师吗？一个 JS 脚本搞定

$(function() {setTimeout(() => {const style = document.createElement('style');
            const heads = document.querySelector('head');
            style.setAttribute('type', 'text/css');
            style.innerHTML = `.buy-vip-dialog-v3{display:none !important;}.mpa-dialog-parent-no-scroll {overflow: auto !important;}`;
            heads.append(style);
        }, 1000);
    })

    $(document)
        .off('click', '.material-item .cover')
        .on('click', '.material-item .cover', e => {e.stopPropagation();
            const html = $(e.target)
                .parent()
                .find('.html-container')
                .html();
            window.UE.getEditor('js_editor').execCommand('insertHTML', html);
        });

setTimeout 是为了在脚本最初插入款式，将弹窗暗藏掉

模板市场间接复制

应用剪切板 api event.clipboardData.setData() 这个是古代浏览器都反对的 api

简略示例

document.addEventListener('copy', function(e){e.clipboardData.setData('text/plain', 'foo');
  e.preventDefault(); // 阻止浏览器默认事件});

通过以上代码就能够用 JavaScript 来批改剪切板的内容了，须要留神的是 阻止浏览器默认事件

document.getElementById("copyBtn").onclick = function() {document.execCommand('copy');
}

而后须要触发复制

最终代码

$(document)
    .off('click', '.copy')
    .on('click', '.copy', function (e) {e.stopImmediatePropagation()
        const text = $(this).parents('.style-waterfall-inner').find('.detail').html()
        console.log(text);
        // 复制触发
        document.addEventListener('copy', function copyCall(e) {e.preventDefault();
            e.clipboardData.setData('text/html', text);
            e.clipboardData.setData('text/plain', text);
            document.removeEventListener('copy', copyCall);
        });
        document.execCommand('copy');
        alert('复制胜利');
        $('.pay-tips-dialog').hide()});

开发小结

有的同学会认为这个工具开发的相当简略，只须要几行代码即可搞定。

其实并不是这样，开发这个脚本我至多破费了我两天的工夫。

1. 技术调研，微信富文本编辑器插入 API
2. 技术调研，剪切板复制 API。

换位思考

其中有个问题卡了我很久，当点击后须要阻止壹伴插件的弹窗问题，我就从阻止浏览器事件方面思考了：

应用  event.stopImmediatePropagation()  办法，能够用于进行冒泡，并阻止以后元素上的处理程序运行。应用该办法之后，其余处理程序就不会被执行。

壹伴插件是应用 react 来实现的，而后又去看 react 的合成事件，加上调试，在这里耽搁了很久，换一个角度思考，从暗藏弹窗的角度一下子就解决了。

开发还是要多换几个角度思考，换个角度兴许就柳暗花明。

以上就是本文全部内容，心愿这篇文章对大家有所帮忙，也能够参考我往期的文章或者在评论区交换你的想法和心得，欢送一起摸索前端。