MENU

系统生成带样式的网页复制到微信公众平台编辑器

May 20, 2020 • Read: 37 • 学习笔记阅读设置

产品需求:按条件生成要展示的数据并套用微信编辑器模板。使用js等复制生成的数据和模板到微信公众平台发布 (实现将html网页中的元素复制到微信编辑器中,并正常呈现排版)

一、找模板、用模板

  1. 吃现成的最快,如135编辑器、96编辑器等,搜索微信编辑器可得
  2. 部分模板是平台VIP特权使用,不过因为这个样式都是连同样式一起的,所以不必纠结VIP,F12审查元素获得任意模板
  3. 找到代码位置,复制出来
  4. 使用自带的编辑器,切换成HTML模式,把复制的文件粘贴进去
  5. 取消HTML模式,可以用了!

使用图例:

键盘F12键打开浏览器调试

选中模板块位置,鼠标右键 Edit as HTML

复制HTML文件 注意section开始和结尾

使用编辑器源代码模式,点击HTML

粘贴复制的代码

退出HTML模式,可以用了

二、网页形式复制遇到的问题

  1. 关于复制的问题,zeroclipboard 种种原因谷歌浏览器无法使用(2021年将不再支持flash)
  2. 如果不用复制按钮,直接使用复制会导致部分样式丢失
  3. 如果使用复制按钮,复制到公众平台编辑器会使自己上传的图片(非模板原有的元素)偏位(偏左)

解决方案:

  • 经查找资料在csdn中找到可复制的方案
<!DOCTYPE html>
<html lang="en">

<head>
  <title>微信复制DEMO</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    .demo {
      width: 475px;
      margin: 0 auto;
    }

    .demo-btn {
      padding: 8px;
    }
  </style>
  <script type="text/javascript">
        window.onload = function(){ 
            //获取到所需复制的代码
            var temp = document.getElementById("target").innerHTML;
            // 创建mousemove监听事件,当检测到有文字被选中,则移除copy,否则则添加copy
            document.addEventListener('mousemove',function () {
                let selObj = window.getSelection(); 
                let selectedText = selObj.toString();
                if (selectedText != '') {
                    // 移除copy监听事件
                    document.removeEventListener('copy', myFunction);
                }else{
                    // 添加copy监听事件
                    document.addEventListener('copy',myFunction);
                }
            })
            function myFunction(e) {
                e.preventDefault(); 
                e.clipboardData.setData('text/html', temp);
            }
            // 给button加click事件,当被点击时则创建一个copy事件,来触发上面的copy监听事件
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function(){
                document.execCommand("copy");
                alert("已复制好,可贴粘。");
            });
        }
  </script>
</head>

<body>
  <section class="demo">
    <section id="target" style="border: 0px none;">
      <section style="width:96%;margin:0 auto;border:1px solid #42ae00;box-sizing:border-box;">
        <section style="width:100%;">
          <img src="http://mpt.135editor.com/mmbiz_png/fgnkxfGnnkTYZ3DkBFIxXm8lsgN4NDTNictzwiasXY6eSMG9jKKBneOwXuago6AYt2oibpdODMPia2mQ5E7om4FHhQ/0?wx_fmt=png"
            style="width:100%;vertical-align:top;">
        </section>
        <section style="margin-top:-30px;display:flex;justify-content:center;">
          <section style="width:2px;background-color:#42ae00;"></section>
          <section style="background-color:rgba(66,174,0,0.9);padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:3px;margin-left:4px;margin-right:4px;">
            <p id="dh" style="font-size:16px;color:#ffffff;min-width:1px;font-weight:bold;">春的故事</p>
          </section>
          <section style="width:1px;background-color:#42ae00;"></section>
        </section>
        <section style="margin-top:10px;padding-left:20px;padding-right:20px;padding-bottom:20px; font-size:14px;color:#464545;">
          <p>立春是中国民间重要的传统节日之一。“立”是“开始”的意思,自秦代以来,中国就一直以立春作为孟春时节的开始。所谓“一年之计在于春”,春是温暖,鸟语花香;春是生长,耕耘播种。</p>
        </section>
      </section>
    </section>
    <section class="demo-btn">
      <button id="btn">复制</button>
    </section>
  </section>


</body>

</html>
————————————————
原文链接:https://blog.csdn.net/qq_41080490/java/article/details/79571194
  • 不使用复制按钮,鼠标左键拖拽直接复制可能遇到的问题,如图:

直接复制后丢失样式

  • 使用复制其他自定义模块二维码复制遇到的问题

样式错乱,居中样式靠左

审查元素,发现 <span> 标签后多了 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp 微信编辑器给加了这么多空格

出现这问题最基础的解决办法就是去html文件中,把模板中的 span 等非 section 的全部换成 section 标签,如果要一行显示的记得加 display:inline 样式

  • 其他问题

换行 - 如果预览显示正常,微信编辑器内显示块与块之间距离过大,可以试试把代码里的 <br> 换成 <p></p>

就到这吧,其他问题发现了再记
Archives QR Code Tip
QR Code for this page
Tipping QR Code