微信分享自定义标题和图片的js | 哈图工作室
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
window.shareData = {
&timeLineLink&: &&,
&sendFriendLink&: &&,
&weiboLink&: &&,
&tTitle&: &八斗美妆人才网&,
&tContent&: &共创会—八斗携手阿里O2O，聚合品牌、连锁渠道方共谋美妆未来商业模式&,
&fTitle&: &八斗美妆人才网&,
&fContent&: &共创会—八斗携手阿里O2O，聚合品牌、连锁渠道方共谋美妆未来商业模式&,
&wContent&: &共创会—八斗携手阿里O2O，聚合品牌、连锁渠道方共谋美妆未来商业模式&
// 发送给好友
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
&img_url&: &/static/superplus/img/logo_white.png&,
&img_width&: &401&,
&img_height&: &275&,
&link&: window.shareData.sendFriendLink,
&desc&: window.shareData.fContent,
&title&: window.shareData.fTitle
}, function (res) {
_report('send_msg', res.err_msg);
// 分享到朋友圈
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
&img_url&: &/static/superplus/img/logo_white.png&,
&img_width&: &401&,
&img_height&: &275&,
&link&: window.shareData.timeLineLink,
&desc&: window.shareData.tContent,
&title&: window.shareData.tTitle
}, function (res) {
_report('timeline', res.err_msg);
您可能也喜欢:如何排版微信公众平台的文章？
微信公众平台的图文编辑能力个人觉得就是一超级大BUG，但是还是看到不少图文消息的排版十分美观，他们是如何做到的？
按票数排序
更新于：下文是利用Mardown进行快速微信排版的教程：其实，我觉得用markdown书写，然后渲染一下，文章结构清晰而且简洁。今天教你如何在“简陋编辑器”的现有条件下，利用Markdown+扩展插件来优化微信文章的排版。Markdown是一个极其优美、简洁的书写语言（不是编程哦！）。一旦使用，极易上瘾！1. Markdown是什么：(下文引用自简书：Markdown——入门指南) Markdown 是一种轻量级的「标记语言」，目前也被越来越多的写作爱好者，撰稿者广泛使用。请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，学习成本很低，且一旦熟悉这种语法规则，会有一劳永逸的效果。Markdown简洁的语法代替排版，而不像一般我们用的字处理软件 Word 或 Pages 有大量的排版、字体设置。它使我们专心于码字，用「标记」语法，来代替常见的排版格式。例如此文从内容到格式，甚至插图，键盘就可以通通搞定了。2. 使用Markdown语言写作的好处：纯文本，所以兼容性极强，可以用所有文本编辑器打开让你专注于文字而不是排版格式转换方便，Markdown 的文本你可以轻松转换为 html、电子书等结构清晰，排版美观，易读性强3. Markdown简明语法标题：对于文章的标题1、标题2，你只需要在文字前面加上对应数量的#号，Markdown会自动渲染出格式。列表：在 Markdown 下，列表的显示只需要在文字前加上 - 或 * 即可变为无序列表，有序列表则直接在文字前加1. 2. 3.符号，再在符合和文字之间加上一个字符的空格即可。引用：如果你需要引用一小段别处的句子，那么就要用引用的格式。你只需要在引用的文本前面加上一个 & 和空格即可，例如：更多Markdown语法，点击查看。（上图转载自简书）4. 如何在微信公众平台优化排版在Chrome上安装插件在微信公众后台使用Markdown语言写作按住快捷键Ctrl+Alt+M，对Markdown文章进行渲染至此，什么引用符号、标题样式、分割符、代码栏等样式就一一具备了。拿去得瑟吧！本文源：。半撇是实用科技博客。微信号“半撇有道儿”。
关于微信文章的排版，不客气的说，我的 MacTalk 曾经被无情的赞美过，很多人问过我写作工具和排版方式、字体等诸多问题，在这回复一篇，也算回应。先说说 Day One我使用 Day One 进行微信文章创作，纯文本写作，版式采用 Markdown 语法控制。很多程序员都有纯文本情节，我也不例外。除非必要，我所有的文档基本上都以纯文本的形式存放。Day One 就是一款纯文本、支持 Markdown 语法的日志类软件。最初发现这款软件的时候，我发现这货几乎是为微信写作而生，界面优雅，功能简约，支持每日写作，一日多条，日历，时间轴，地图信息和日期管理，文章配图，多终端（OS X 和 iOS），iCloud 或 Dropbox 云同步，搜索，标签，PDF 导出……等等。最重要的是，支持 Markdown！当我发现了这个 App 之后，我想，微信写作就是它了。这个软件68块，去 Mac App Store 购买即可。我是2013年上半年购买的，我想它为我带来的回报何止成百上千倍。所以，我在微信、书中有机会就会推荐一下，也推荐给很多好朋友使用。是开发者，都不容易。另外，如果读者中有 Day One 公司的，告诉他们一声，拖欠的稿费不用付了，谢谢。再说说 MarkdownMarkdown既不是工具也不是程序语言，而是一种轻量级的「标记语言」，是由约翰·格鲁伯（John Gruber）和亚伦·斯沃茨（Aaron Swartz）创建的。它允许人们使用纯文本格式编写文档，然后根据其中的标记转换成有效的XHTML（常用的就是HTML）文档。理解了这一点，我们就知道，支持 Markdonw 语法的写作软件至少有两种模式，一种是写作模式，一种是预览模式，在 Day One 中可以通过 command + 回车进行模式切换。预览模式会把你写的文字和标记解析成对应的 HTML，其中的版式效果通过软件内置的 CSS 进行渲染。Markdown 的标记语法非常简单，如果你想好好学学，可以去 Google 一下，满世界都是教程，如果你觉得够用就好，看下一节吧。最后是干货我说说自己的做法，以下内容采用了「甭废话有事说事」模式，欢迎品鉴：1、采用 Day One 进行微信创作。2、字体选用 18 pt，在手机显示效果最佳。字体使用了Avenir，纯属个人喜好。3、在 Day One 中文章第一行默认加黑为标题，不想要标题第一行空着即可。在标准 Markdown 里用一个或多个「#」和一个空格来设置各种大小标题，例如 「## 哈哈」，放在行首。4、段首不留空格，我自己的习惯，留空格令人发指和抓狂。5、标准 Markdown 的分段用回车两次（空一行）的方式，在 Day One 里回车一次或两次都可以，只不过换行的行距不同，大家可以在我的文章里看到。6、引用文字使用「&」，文本最前面会出现竖线，表示该段文字是强调或引用。7、如下操作可以实现绿色标题和下划线的效果：#### 示例（放在行首）。8、由于微信的编辑器对列表和代码的支持非常差，所以我一般就用1、2、3、4的写法，没有用 Markdown 的标准列表写法。也很少贴代码，很麻烦。9、Markdown 里加链接也很容易，你可以写成&&，不过微信的图文消息不支持文中外链，只能呵呵了。10、使用三个星号（***，单独放在行首），可以实现我常用的那条若隐若现的性感分割线11、写作过程中使用 command+回车进行模式切换，调整版式效果。12、写作完成之后，通读一遍，检查版式和错别字。但是，有时候这一点是徒劳的，因为你左看右看上看下看原來每个字都不简单，怎么看都像是一篇完美的文章，衰。13、用 Safari 打开微信的素材管理编辑器，把预览模式下的文字复制进去，略做调整，如果有时间还可以发给自己的手机看看效果，没时间就直接发送了事。14、一篇美好的文章就推送给读者了，然后你就可以想象读者看到你的文章后那种热切和缠绵……这当然是YY。总结首先，一篇排版良好的文章可以体现写作者的品味，如果你是个产品经理，尤其要注意这一点，不是 MacTalk 的读者我不告诉他。其次，好的排版会让读者读起来舒心和开心，他们一高兴就会想「这小子花了这么多心思，咱还是买丫本书吧」。第三，可以买书。
请允许我自卖自夸一次：本题2748个阅读，我的专题页面297个访问。我得到的赞却只有可怜的8个。---------------------------------------------------------------------------7.30日更新，居然一不小心成为了个人在知乎非匿名状态下最高票的答案。谢谢各位捧场，同时也向楼上几位真正的微信正文页排版大神学习。
谢妖！结合具体的案例来说吧，内有自家广告，慎入！目前来说我觉得用到的比较多的排版形式有如下几种：1. 框线+标题组合，这种方式适合做文章的摘要或导语，作自己账号的介绍也不错。2. 引用线，这个在知乎当中回复评论时也同样，适用于引用别人的话，或者备注2. 引用线，这个在知乎当中回复评论时也同样，适用于引用别人的话，或者备注3. 框线+颜色，适合于强调某段文字3. 框线+颜色，适合于强调某段文字4. 纯虚线框，适合在结尾做账号介绍5. 各种花里胡哨的分隔线。5. 各种花里胡哨的分隔线。常见的我觉得排版还比较好看的形式就是这些了，当然了，只要你懂得一些网页开发的语言，开发出来更漂亮的形式没有问题，但对于一般运营者来说，这些功能就足够了。那怎么把这些变成自己的呢？把别人的复制过来，文字替换。对于不太懂技术的人来说，无疑这是最方便的，所以如果你就是我所说的那种技术小白，那么你可以点下面这个链接，去复制修改吧：对于略懂一点技术，或者想自己做一套模板的话，请继续看：把右边这个网页保存到自己的收藏夹里吧：
这是百度出的在线编辑器，功能比微信自带的编辑器强大很多，所以平时文章准备好以后要，可以先在这里排好版，再复制到微信里， 保证格式不会乱。那怎么把这些底色变成我自己需要的呢？首先选好你喜欢的模板，复制到UEditor当中，然后就变成代码格式了：然后在当中寻找以下字段：background-color: rgb(230, 230, 118) 括号当中的三个就是该底色的RGB色值，根据你的需要修改成其他颜色。同样的，你还可以修改边线的粗细、颜色，修改文字的大小等数值。估计很多人看到这里就不耐烦了，所以最简单的办法就是找到上面的链接，复制吧…………如果你对编辑器忍无可忍，请关注我，以后会给你们送上一份小小的礼物的。
这个问题吧，先给大家看一下百度的结果:其实吧，2013年6月的时候，才有微信排版这个概念，我也在那个时候写了一系列的微信排版教程。教程汇总在我的公号里，如果你真的想把微信公号做好，你可以搜一下我的公号“刘健亮”，不玩公号的就不要关注了，不能提高打开率的关注都是耍流氓。给大家截几张图看看我平时的一些排版吧：其实我更想说的是：排版不是为了好看，而是为了阅读体验。不能为了排版而排版！对于普通的文章而言，主要就是由文字构成，文字清爽一点即可，堆砌效果是画蛇添足的事。如果你真的追求排版效果的话，需要懂点CSS知识，每一篇文章就是其实一个网页。懂网页编码，才能灵活实现效果。如果不会代码的话就直接COPY别人效果再修改文字吧！比如我的效果，大家可以免费COPY！再说下编辑器的事吧，我跟朋友们都是推荐的UEditor，当然Markdown也不错，只不过UEditor可以基于html实现更精致的效果。再给大家推荐一些常用的工具吧：如果觉得不过瘾的话就再等等吧，微信排版升级版教程会有的！
看到有人居然给我点赞！我的小心脏啊！于是我决定今天先排下版，然后慢慢更新。（7.17）我来回答一下吧，刚入门微信不久，尽情的拍砖吧写在前面我在两个月前，就知道微信目前大概有三千多万公众账号了！个人感觉微信的趋势越来越像微博了，抓住第一波浪潮的人，得名得利，我们这些跟风的人，其实很困难，尤其是做纯自媒体的，更困难，个人认为，微信目前最好做的还是基于实体企业的o2o优化。好了，跑题了，接正文吧。你的公众号的定位是什么？需求决定供给我觉得公众号的排版是和你本身的公众号定位是相关的，排版，内容，图片都是以用户为中心的，并不是考虑你排版美不美的问题，而是要考虑你的粉丝定位什么样的，从而给他们什么样的排版和内容体验。需求决定供给一、举一大堆栗子我个人加了好多好多微信，大概的分类如下。资讯阅读类深阅读类实体企业类网店类三俗类资讯阅读类 首推36氪 他的定位是资讯，也就说，我作为粉丝打开的要阅读的东西，就是看标题，其他的不重要。于是他的排版是这样。基本结构是标题图1标题（加粗显示）文字2标题文字底栏深阅读类 果壳 他的定位深阅读，为什么我觉的他是深阅读呢？主要因为他每次的推的文章基本都是以问好作为题目的，况且大多是人都是geek，感兴趣的他们花时间去读。基本结构正文插图正文插图底栏还有我自己的“温小野的九点十分”（广告！！！！！！！！）我给他们的定位也是深阅读，但是我没有那么资讯可以讲也没有好的文笔，于是就要给别人能看下去的感觉（那就要靠排版了）。基本结构栏目图微信名称前言内容图（必有的）正文题目小标题1正文小标题2正文插图投票拉粉丝底栏实体企业类 企业的公众号就是为了营销！就是为了变现！突出产品，就好！温州本地一家企业的排版顶栏（）题目正文（各种五颜六色，越花越好）图片图片图片图片图片底栏（交代自己的地址）网店 炒客（我的公众号就是抄袭他的排版，也是我目前看见的最好的排版）定位就是高逼格加小清新。美图美图美图文字文字底栏三俗类这个我不多讲 应该算是以上所有类型的综合体看了这么多，估计也应该能对比其他公众账号有个定位了，明确自己的定位，参考同定位的公众号排版风格，就设计或者借鉴别人的排版以下是我运营自己公众号的一些经验，和大家分享1、微信公号的底不是白色！！！！！！！！！！！我们很多人都知道，但是都忽略了这个问题，这个在配色时候会有很大的出入！微信的背景颜色是#f7f8f3然后你可以参考网页设计的经常配色思路去改变字体的颜色。2千万不要用微信自带的编辑器！功能阉割不说，编辑的地方很小啊！有木有！没有效率啊！有木有微信用的是百度的ueditor编辑器推荐在这个里面编辑，编辑的时候很有快感啊！有木有！3、能借鉴的就借鉴！你可以不懂html css什么，但是一定要懂得复制黏贴。用微信网页版打开你喜欢的公众号页面，然后复制到ueditor里面，打开代码模式改！4、你没节操的复制黏贴，有白底怎么办！用橡皮啊！！！！5、内容为王，外在的一切都是纸老虎！6、微信排版，真的，干净就好。微信内容控制在手指划三页之内。千万不要有错别字！三、撸个广告温小野的九点十分（wenxy910）个人微信 wheredyougo
【补充】不谈具体的内容，单从编辑发布图文信息的角度来看，做好格式的首要一步，是正确理解图文的逻辑关系。什么是逻辑关系？简而言之，就是文字和文字的关系、文字和图片的关系，以及图片和图片的关系。微信上的图文消息，大抵有这么几种形式：一整段文字（中间可能穿插少量图片）；多段文字（每段带标题）；文字穿插图片（文字量相对前两者较少）；多图（会在开始和图片下方有少量文字）对于一整段文字来说，比较好的方式就是提升文字的易读性，并尽量减少对阅读的干扰。转换到实际的编辑工作中，由于有跨平台的需要以及网页和移动端的一些限制，所以主要就是打松行间距、拉开段间距，并且设置一个合适的颜色，如果开头有介绍性文字的话可以加个基础的框，当然，如果文章内没有英文且数字较少的话，也可以考虑做首行缩进。多段的文字，在文字段落上的处理基本和整段文字是大同小异的。如果每段文字的内容不算太多，那么可以考虑使用框线来处理；如果都是大段的文字，那么直接在标题处抽真空（做留白）加线分隔也是不错的方法。至于文字与图片互相穿插的文章，则要视具体内容而定。比如一些类似于列举类（比如标题是“十大…”、“20个…”诸如此类）的图文，可以用框线逐个圈禁，再适当的使用颜色来增加图版率，活化版面；也可以用不同的图文块设计互相穿插，或者适当增加跳跃度，来体现图文内容。最后，对于多图的内容，从打开速度和效果来看，都是不太推荐的。但如果一定要编辑的话，如果可以，最好是分为两部分发送，在格式上也要尽量“减负”，因为纯图片的内容，图版率已经飙到最高了，就没必要再加其它的东西干扰读者了。【未完待续…】······································?·········································【原有回答】怎么编辑上，其它回答已经说得差不多了，我再补充几个建议：编辑器建议用UEditor。不是因为它够直观，主要是因为微信用的那个其实就是他家的……建议学一点点的前端，因为编辑公众平台的文章所用的代码其实也不是很难，大的代码块一般都会封装在&p&和&blockquote&、&fieldset&这几种标签里，再用style写一写样式就好了。自己写的话，其实可以不用复制粘贴中的代码那么乱就可以达到一个不错的效果，还不会雷同；如果会用ZenCoding（Emmet），其实很快的（我一般用Brackets编辑，还有颜色预览哦~）。如果敲代码的话，稿件中的图片建议在稿件准备好以后一次性上传到公众平台，然后拷贝回UEditor编辑器抓到&img&就能直接扔到代码里了。常用的图片和一些分隔符、二维码之类的，可以在编辑好代码之后单独保存，用的时候直接拷贝代码放在需要的位置即可。这里要特意说明的一点是，如果图片是一些配色相对简单（比如只有二维码、公众号名称和关注提示的图片，配色只有黑白和一个底色）但对锐度要求略高的图片，（用矢量工具）导出为8位PNG会比非常容易产生杂色的JPEG更适合。取色可以参考，至于具体配色嘛，没把握可以参考一些现有你觉得做的比较好的公众号的选择。先说这些，回头想起什么再补充。
泻药。我从素材搜集到文本整理、写作再到文本编辑几乎全部通过Wiz笔记完成。首先，先放一张Wiz笔记的文章编辑截图，下面再做解释。由于我的文章多数情况下，模式是相似的。比如第OO期第XX期，关键词，简介，前言等。所以直接将一条编辑好的笔记保存为笔记模版，下次编辑的时候直接套用模版即可。将Wiz笔记的默认字体设为：字体：微软雅黑、大小12Pt，行高1.4，文字色黑色，背景色#F8F7F5，这个背景色是和微信的背景色一样的。多敲空格就对了。不要盲目加注颜色，适当加粗。把最常用到的笔记直接锁定标签。如，-------关于文末的签名档，我是这样处理的。包含微信公众号的ID，QQ群和私人微信。最后一句是公众号的Slogan，特意用不同颜色标注。不建议在文末放二维码，也不建议放上一张包含公号信息的图片，多为粉丝着想，能为他们省1k的流量就不多浪费。----- ，update出于某些方面的考虑，将签名档改为以下内容：-----另，再说一下如何去除从别处复制过来的内容会出现白底。（注：此方法谢绝无节操转载营销号使用。不过，料想，他们也不会这么好心再去一下底色的。）如下图：有三种方法：方法一：使用微信后台编辑器的橡皮擦，擦除一切格式，不建议采纳。方法二：所有文章编辑均需要通过wiz笔记编辑器。对Wiz笔记进行如下设置。依次找到以下选项卡：选项——编辑——编辑器设置，平常我们内部编辑器足够我们使用，特殊情况下可自由选用外部编辑器，以满足更强大的编辑功能。其中重点为：字体设为微软雅黑，12pt，行高1.4，文字色为黑色，背景色为#F8F7F5（上边已说过）如此设置后，在wiz笔记内编辑内容后，虽然复制到微信编辑器的时候有灰色的背景，但是发送到手机预览时灰色的背景是看不到的，因为手机上显示时页面背景也是同样的灰色（#F8F7F5）。另注意，从别处复制摘要的内容，需要去除特殊格式后方可在wiz笔记编辑器内编辑，以减少后期工作量。方法三点击wiz工具栏的找到HTML代码选项，即可按照以下步骤继续操作。找到HTML代码选项，即可按照以下步骤继续操作。精简为三小步：1、点击HTML代码选项。2、使用快捷键Ctrl+H将「background-color: rgb(255, 255, 255);」替换为空白3、再点击HTML代码选项，回到可视化文本编辑模式。----最后，附上一个图片压缩的神器如图所示，图片品质可调，支持批量压缩，支持预览，支持压缩到指定大小，简单、快捷、高效。秒杀任何已知的图片压缩软件。&图片致敬
& -----最后，排版之美在于简洁，在于便于阅读，切勿顾此失彼，一味地强调排版而忽视了内容。微信公众帐号：书荒，ID：ishuhuang两只萌妹纸和一只糙汉子共同呵护的网络自留地，聊聊生活，谈谈命运，说说理想，侃侃爱情和..妹纸，然后顺便帮你解决书荒问题。-end
提供几个微信在线图文编辑器，就不截图了，大家可以亲自尝试一下。1.秀米编辑器：2.微信超级编辑器：3.易点微信编辑器：
1.看到别人好的排版，用浏览器打开然后复制下来。改成自己的内容。。直接粘贴在内容里面。2.不嫌烦的话，像上面拷贝代码，百度下“微信公众号”排版会有的。。保存为.html格式。自己打开复制。。。记得改成自己的内容。
百度搜到他的微信排版教程。。。3.复制粘贴文章的时候，清除正文的格式。。。。段落开头空格按四下(那是英文状态下的)这个很麻烦的就是有时候保存后他又往前靠了。。。要多预览几次。。。4.其实如果不烦代码就用编辑器编辑成html网页复制过去然后清除下正文底色差不多了吧~~~不过我还是直接复制成品。。。并用一个单图文收集起来~~~。。比如我收集的排版素材→→，并固定运用。。。。做成一种风格~~~5.如果不是原创内容找些微信导航的网站看看别人的内容也许看到好的排版也可以复制——导航网站也可能有排版素材，分割线素材，指引关注/阅读原文素材。。。6.段落间的隔行看情况，我不固定。。。开头空两格看起来知道是一段话了。。。适当插入图片~~图片可以做分段用~~~7.发之前一定要多预览。。有时候ctrl+Z撤销会改掉另一篇文章的——如果你先后修改两篇然后撤销几次。。。结果两篇文章都是第二篇修改的内容了。。。除了图片~~~
不多说了，看视频，设置下清晰度，看高清吧。
微信文章编辑（含多种样式）
/page/h/1/q/hq.html
同样用的是UEditor编辑器：经过试验确定了格式大概是这样的：字号大小12px，行距2.0，段前距10，颜色#7f7f7f，两端对齐。还算舒服吧。如下图所示（适合普通长文）公众号
（laoqinppt）： 关于目录的排版可以按照需求，缩小了字号以及用了一些特殊样式：当然，超级无敌好看的公众号号排版(
：weikeshalong)：
微信排版我一直在尝试大家喜欢的风格， 20XX年X月才有微信排版概念这么一说有点扯。就算仅仅利用微信的编辑框我们排版的选择依旧是丰富多彩的。不信？你去加我的微信号看我 DC 15期 之前的排版就明白了。markdown只是工具之一，但最重要的工具是你的创造力。如果你不擅长为你的听众创造你微信账号提供核心价值相符的排版，那么你用什么工具都是一样的。这么多微信账号殚精竭虑只是为了排版好看一点却不关注自己可以为听众提供什么真正有价值的东西只让我想起一首歌：
微信排版问题着实困扰了很多微信小编，偶也是新手哦，目前在各种学习编辑技巧。看楼上很多前辈都用到代码编码了呢，可是偶是文科妹纸，你让偶吟个诗，作个对信手拈来，让我看那些代码真是要疯掉了!!!!要不怎么读了就业率这么低的文科捏！！！言归真转，偶有无意间看到了好几个微信图文在线编辑器，说白了就是给你各种黏贴的素材在线网站，说真的还挺好用的。这里就给大家推荐一下我目前用的编辑器吧，135编辑器这个是订阅微信号follow135推送过来的，顺便说一下，这个微信号叫135导航，里面收录了好多好多公众号推送文章，我找素材或者参考其他微信大号样式时会用到，每周还推送点微信运营知识。下面我把收到的内容直接复制过来吧，大家自己看看，觉得好给小妹点赞鼓励哦~下面是正文：各位微信运营编辑，当看到别人家的公众号推送的文章拥有精美的样式时，您是否眼馋？当转载别人家文章时，您是否想在格式上做的更好，给人的感觉更耳目一新？神马？您说木有艺术细胞不懂配色？小白一只不会排版？没关系！通通不是事儿！我们有“利器”，135编辑器分分钟解决您的烦恼，看它如何施展魔法让您的文章格式更优美。操作指南
1.如何进入【135编辑器】？
网页搜索“微信135导航”进入135首页，点击导航中的【135编辑器】进入编辑器页面，可以看到左侧为模板样式选择区右侧为内容编辑区。
2.【135编辑器】页面有什么元素？
左侧样式模板包括：【插入内容】和【格式刷】，两个tab页可互相切换；1）【插入内容】包括【标题】、【摘要】、【正文】、【底部】、【特色场景】等模板样式。点击不同的模板名可从全部类型中筛选出对应模板的样式。2）【格式刷】，进入格式刷选项卡后，点击样式，可将样式应用到所选的文字，或者应用到编辑器内当前光标所在位置的内容。
3.如何在编辑器中插入内容？
单击需要的内容样式，即可显示在右侧编辑框。操作演示：点击左侧【椭圆背景效果】模板，则相应展示在右侧编辑框中；选中已插入的【椭圆背景效果】，再点击【标题萌萌哒】，【椭圆背景效果】被替换为【标题萌萌哒】
4.如何使用编辑器-格式刷？
在编辑框中输入文字，点击【格式刷】页面中的任意样式，文字即增加该样式效果。操作演示：在编辑框中输入“格式刷”三字，点击【格式刷】页面下的【椭圆背景效果】样式，编辑框中呈现相应样式效果。
5.如何更改已插入内容的颜色？操作演示：单击右侧【配色方案】中的任意颜色，编辑框中已有内容的背景及带有颜色的文字的颜色则会自动变更为所选颜色，后续新插入的模板内容的颜色也会自动变换为该颜色；选择需要修改的内容，然后再点击【配色方案】中的颜色，可对选择的内容颜色进行修改。注:部分内容更改颜色时，最好是前后多选择一行，如果没选全则可能出现格式错乱的情况。若部分调色导致格式乱了，连续按两次ctrl+z可恢复。
6.如何把编辑好的样式内容运用到微信平台的图文消息编辑器？
选中您在这里编辑好的样式，点击“复制内容”按钮，然后粘贴到微信的图文消息编辑器中就完成了。135编辑器特色1.操作简单，选择需要的样式，点击插入，更改式样中的文字即可2.特殊场景设置，提供更加多样化样式3.格式刷设置，选中内容，选择格式刷中任意样式，即可更改内容的样式4.配色方案设置，选择颜色可更改所有背景以及文字的颜色，或者选中某些内容，即可更改该内容的颜色5.直接点击“复制内容”按钮，即可复制所以内容135导航ID:follow135
135导航是一个收录优质公众号及公众号推送文章的导航，公众号内容能获得更多曝光机会，我们将不断提供各种公众号运营的辅助工具。如果您有其他建议或功能需求，可以关注微信公众账号"135导航"，发送您的需求，我们尽快给您回复。微信135QQ交流群：
为了提升公司所经营公众号的big，算是研究了一个星期微信公众号文章排版，其中包括封面图尺寸、版式设计、代码实现、与丑陋编辑器的勾心斗角。一一道来：1. 封面图尺寸微信给出的封面配图长宽规范是：单图文消息及多图文中的首条消息：900px × 500px；多图文非首条消息：200px × 200px；这里有一个坑！下图为大号封面样例：而真正显示情况是这样的：ipad mini retina下，单图文封面左右被截断，多图文首条上下被截断。huawei C8812下，单图文封面上下左右均有截断，多图文首条上下被截断。huawei C8812下，单图文封面上下左右均有截断，多图文首条上下被截断。不同设备下截断情况各有不同。以下是转发至朋友圈后的封面图截断情况。多图文非首条消息无截断发生，可百分百正常显示。可以基本得出一个还算通用的规范：把你要在封面图中重点展示的信息放在正中央400px × 400px的区域中，以最大程度减少截断影响。2. 版式设计对以往所发布的文章内容详细了解后，提取出以下常用或必备的文章元素：关注引导 (subscription guide)；文章导读 (intro)；视觉分割线 (separator)；排行列表 (ordered list)；引用语 (quote)；转载申明 (copyright state);广告 （promotion);微信固有格式：文章标题font-size: 20
font-weight:
color: #000;
时间，作者font-size: 12
color: #8c8c8c;
订阅号关注、阅读原文链接font-size: 12
color: #607fa6;
页面背景background: #F8F7F5;
另外，微信默认的段落文字大小、颜色、行高就很好，不必费心调了。就不上设计稿了，直接贴效果图：quoteordered listpromotionsubscription guide & intro & separator特殊排版3. 代码实现仅提供less源码片段及emmet书写的html························································CSS部分························································调色板// variables
@cherry: #EA4267;
@caeseous: #ADB3C9;
@system-link: #
@system-background: #F8F7F5;
@fate: #808080;
@imgHeight: 50
基础类// clear default
.clearMargin {
margin: 0;
.clearPadding {
padding: 0;
display: inline-
.square() {
@width: @imgH
@height: @imgH
标签// label
border-radius: 2
line-height: 12
font-size: 12
.solidLabel {
padding: 3px 4
margin-right: 12
.blockLabel {
border-radius: 3
background: #f2f1f0;
border: 1px solid #
padding: 4px 10
font-size: 13
.hollowedLabel {
padding: 2px 3
//color == backgroud
background:
border: 1px solid @
.label-cherry {
background: @
.label-caeseous {
background: @
行内装饰// inline deco
.highlighter {
font-size: 18
各级标题// header
font-size: 19
font-weight:
font-size: 18
font-weight:
font-size: 20
padding-left: 10
line-height: 22
border-left: 3px solid @
引用语// quote block
padding: 2em 3
.quoteMark {
font-size: 60
margin-top: 20
margin-right: 10
line-height: 10
.quoteText {
font-size: 16
line-height: 24
广告卡片// card
padding: 0.5em 0.5em 1em 1.2
background: @
border: 1px solid #E7E7EB;
border-radius: 1
margin-left: 0.5
margin-right: 0.5
.cardTop {
margin-bottom: 10
margin-top: 0.5
.cardBottom {
margin-right: 0.5
font-size: 14
line-height: 20
.cardRightTop {
.imgWrapper {
.square();
border-radius: 50%;
background: @
margin-right: 10
margin-top: 0;
.square();
分割线.dotDivider {
text-align:
font-size: 14
letter-spacing: 0.5
line-height: 50
其它.index {
margin: 6px 12px 0 0;
line-height: 40
font-size: 56
.footnote {
font-size: 14
color: #666;
line-height: 22
························································HTML部分························································subscription guidefieldset&section.blockLabel{订阅职业精鹰 ，↑ ↑ ↑ 点击上方蓝字。}
introfieldset.footnote&section.label-caeseous{小鹰导读}+lorem20
seperatorfieldset&section.dotDivider{&·············}
ordered list((fieldset&span.index{$}+span.h2{绿日和枪花}+{Rose出生在印第安纳州拉斐特一个虔诚的基督教家庭中})+br)*12
special combo((fieldset&(section.h1{玫瑰$}+section&span.label-caeseous{工作城市}+{Rose作为乐队的主唱，音域宽广})+(section&span.label-caeseous{网申地址}+{Rose作为乐队的主唱，音域宽广})+(section&span.label-caeseous{招聘专业}+{Rose作为乐队的主唱，音域宽广}))+br)*10
multi level headerfieldset&section.h3{摇滚篇}+br+section.h2{枪炮与玫瑰}+p{很难想象AXL这个玩世不恭的坏小子能够作出象《NOVEMBER RAIN》这样气势磅礴的曲子，《ESTRANGED》这样动情的感觉。}
promotion cardfieldset.card&(section.cardRightTop&span.hollowedLabel{兄弟号})+(section.cardTop&(section.imgWrapper&img[src=img/shark_space.png])+span[style=font-size:18]{沙客空间}+br+(span&span[style=font-size:14]{微信号：}+span.highlighter{shark_space}))+(section.cardBottom{有品味、爱学习、爱折腾的Sharkers，共创青年职场学习社群。})
这里又有一个坑！！许多html标签时不被支持的，例如：div, h1, h2, h3, p, span等。一般解决方法是，使用&fieldset&和&section&标签，再往里面塞&span&或嵌套更多的&section&。本地预览的网页中，使用了fieldset标签时会出现的outline和多余padding在编辑器中预览后是会消失的，so, Don't panic!························································开发完的本地网页长这样：················································································································热乎乎的文章链接：4. 丑陋的微信官方编辑器只能undo不能redo，这像话吗？！------未完-------
【文末有小广告慎入。。】补充：楼上的答案好多都在说那个M的工具诶~所以我这里多说说工具以外自己要注意的问题。做过几个月微信公众平台运营和内容，不过我们的内容比较简单，社团嘛，不搞花哨的。最基本的要求就是，楼上说的，要用txt，就是文字不要包含格式，如果复制粘贴请用粘贴为纯文本。如果需要格式的，在网页上编辑。总之只呈现给用户你想要呈现的内容（包括格式大小颜色等），没想要呈现的一定请自己收好（比如文字后的背景水印，类似于字体背景色）。关于图片，请把图片的横向像素设置为480或720，不管你是横板图片还是竖版图片，如果你的用户群都是苹果党，请用640像素，这样基本保证图片不会太大，浪费用户流量（不是每个人都有wifi，也许在地铁上呢），也不会使图片太小以致点开后看不清，大忌是有来路不明的水印，使用图片前求PS过一下，至少把水印去了，把分辨率搞好（像素密度72其实就够了，太小会虚，太大费流量）。补充：楼上有说用更小的图，实践中是可以，而且效果不会有太大的差别，不过处女座一定要刚好沾满屏幕横向像素数才好= = 所以480、720和640刚好是比较主流的手机的横向分辨率，而且用户可能喜欢某个图然后就存了呢~上几个图吧骗个赞哈哈由图可知，图片大小基本在30K以下，除了可有可无的社团图标比较大（也不过80K）以外（说可有可无是因为这图标用户天天见，加载不出来也无所谓哈哈），又往后翻了一下更早的素材库图片，80-120K的图片屈指可数，用户要的大概就是这个效果：省流量。由图可知，图片大小基本在30K以下，除了可有可无的社团图标比较大（也不过80K）以外（说可有可无是因为这图标用户天天见，加载不出来也无所谓哈哈），又往后翻了一下更早的素材库图片，80-120K的图片屈指可数，用户要的大概就是这个效果：省流量。顺便再来一个语音消息的吧，其实和图片一样，求别太大，用户真的不在意你用的是无损还是32k，能听清就行。以上是一些英文听力的录音，原文件都上1M，但是自己先处理压缩一下，加上微信平台貌似会压缩一部分，这样就保证在100K以下了而且还能听清。以上是一些英文听力的录音，原文件都上1M，但是自己先处理压缩一下，加上微信平台貌似会压缩一部分，这样就保证在100K以下了而且还能听清。最后内容排版编辑好了，拜托您求求您多找几个人一定先在不同分辨率（5.5寸1080p大屏、4.5或4.3寸一般手机、4寸苹果）和不同平台（主要是看wp的）的手机上先看下效果，图片大小、行距之类，自己先满意了再给用户发。这一条可以用微信图文消息的预览功能（人家放着预览功能就是叫你看的嘛~别不看就发呀）以上。补充一条关于视频的，如有视频或高清图之类的内容，拜托一定标注预计花费的流量大小（其实就是文件大小嘛）。再补充= = 更新一条实例吧如上图，单条图文内容一定记得要好好写如上图，单条图文内容一定记得要好好写摘要，除去内容不谈，在排版上主要是要控制字数，40-60字，手机上显示大约三到四行，不能再多了，这样用户基本1秒内可以扫完摘要关键词，大致了解图文内容。另外，制作图文消息时，作者栏也记得要填写（虽然说是选填），如果不填，请统一保证永远都不填，如果填，也最好统一格式（英文或中文等），填了的好处，对于处女座用户来说，可以满足他们了解该材料所有信息的强迫症，另外在排版上显得比较正式，有出处，对于微信平台来说，内容出了问题可以直接找到责任人（适用于多人共同运营的微信号）。如下图：另外楼上有说过的段间空行真的很好使很漂亮~一定要用！另外楼上有说过的段间空行真的很好使很漂亮~一定要用！最后如果原文有出处的，或者有推广链接的，或者有更多详情的，记得左下角阅读原文的链接也要提供一下，方便用户查找信息。另外如果正文里提到某网址，在正文里写其实用户无法直接点击（ios上），不如也放在左下角。P.S. 看到上图最后一段就扯一句关于内容的问题，其实微信号内容的行文风格要看用户群，但是对大多数微信号来说，行文不宜太严肃拘谨，轻松点比较好，尤其是缺图片的段子，可以用文风营造轻松氛围。P.S. 看到上图最后一段就扯一句关于内容的问题，其实微信号内容的行文风格要看用户群，但是对大多数微信号来说，行文不宜太严肃拘谨，轻松点比较好，尤其是缺图片的段子，可以用文风营造轻松氛围。---------------------------------------------------------------------------广告分割线-----------------------------------------------最后打个广告求关注人数上500好申请认证。。长安大学英语联盟，微信号EnglishUnion。虽然小孩们好久没更新了。。
干货编辑器万岁本文适合无编程基础、想快速上手又希望排版出彩的微信公众号小编，编程代码大神请飘过……嘻嘻微信公众平台感觉是被各种阉割的，缺少的功能太多了，导致我不得不四处搜罗弥补方法。今天先说说图文编辑。平台自带编辑器的功能实在是渣， 字体、字号、行间距、首行缩进统统没有，连字体颜色都木有我最爱的桃红色，以至于每次我想用桃红+天蓝配色时，欲哭无泪……大概半年前，人们还是通过代码编程CSS语言来提升编辑器的能力，但是无基础小白看到这个画面就醉了吧……眼看腾讯迟迟不改进公众平台的编辑功能，各种第三方编辑器如雨后春笋一般冒了出来。不得不说，造福人类啊。什么是第三方编辑器独立于腾讯微信公众平台之外，由第三方企业或个人针对公众账号管理者开发的，能够便捷进行微信素材编辑和排版的在线工具。我几乎把所有的在线编辑器都试了一遍，给团粉们推荐几款傻瓜式的免费编辑器。共同功能word可以实现的功能这些编辑器几乎都可以办到，还需要我多说吗，改字体简直是小菜。你只要从下面的编辑器里把编好的内容复制粘贴到公众平台去就OK。1微推宝最大特点》十余款精美设计模板，你只要换换图片和文字就好啦2易点微信最大特点》可以在线搜索图片3微联盟最大特点》可以修改段落格式4秀米最大特点》逐段编辑如同手机时时预览现在你可以到PC上去好好体验一下上述几款编辑器，使用方法我相信你只要打开网页就能get八九不离十了。当然每款编辑器也有着自己的短板，以后还会给大家具体介绍。有什么疑问就给团团留言吧！最后，排版只是在内容上的锦上添花，为了更清爽更好地阅读。我们最关注的还是内容质量，千万不要为了追求花哨的排版而忽略了内容哦。
运营公众号也有几年了~简单易上手的工具，排版方面可以用爱微帮、秀米、135编辑器等，可自行搜索下。爱微帮秀米
用爱微邦编辑，同时欢迎您关注网易投微信公众号（iwangyitou）理财有新意哦！
微信公众平台提供的编辑器太简单，并且针对粘贴过来的内容进行了处理，很多css都没法用，js更是被过滤掉了，需要专业的html和css知识才能写出好看的页面。缺乏一个好的工具来给一般的小编用户方便快捷的选择各种好看的版式。我们做了一个微信图文消息助手，不懂html/css的人也可以方便地选到自己想要的格式，复制粘贴就可以使用了。详情访问就可以啦。一个例子：}