聊聊微信编辑器

这有啥好聊的,不就是套套模板么?恩,这话也对。但是多学点东西总是好的嘛,知其然,更要知其所以然。

使用秀米,135编辑器等,总体感觉还是不错的,能够帮我们节约大量的时间快速制作出微信。但是,不管我们找什么模板,和一流的互联网公司的微信总是有差距,这问题出在哪里?

因为他们根本不套模板!往往这些公司都有一套自己的视觉系统(vi),整体色调在有微信之前就一直在使用,比如百度的蓝色logo,阿里的橘红色,微信的排版也是根据这套视觉系统来的。所以整体上不会让你感觉很突兀。

设计师根据微信需求,设计相关微信视觉组件,程序员根据视觉组件进行代码实现,编辑根据需要使用这些组件。

咦?微信编辑器还可以用代码去写?

不错,所有的微信排版编辑器,都是代码堆出来的,我们以135编辑器为例:

135编辑器gif

在点击HTML按钮之后,出现了HTML的代码,这时候,就可以根据css进行修改了。

注意:

  • 必须使用行内样式
  • 代码块必须包裹在section标签中,支持嵌套
  • 支持flex布局
  • 不支持a标签
  • 不可以使用伪元素(:before,:after)
  • chrome 浏览器和腾讯微信编辑器里面预览可能存在差异
  • 总之,也是一个大坑

下一篇,我们尝试对135编辑器的常用效果进行重构。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,263评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,665评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,484评论 4 61
  • 黑森林的尽头有一座石楼,里面住着一位美丽的姑娘,名莴苣。 每天早上自己的黑色女巫都会在楼下喊莴苣的名字,漂亮的少女...
    Cn蟹黄阅读 299评论 0 1
  • 性格优势(Character Strengths) 长处1:亲和力(Relationship) 主要指在与人交往过...
    精神灿烂阅读 9,022评论 2 6

友情链接更多精彩内容