The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.&figure&&img src=&https://pic3.zhimg.com/v2-bd02d007def0909342edf_b.jpg& data-rawwidth=&800& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic3.zhimg.com/v2-bd02d007def0909342edf_r.jpg&&&/figure&&blockquote&本文由微信团队原创分享，转自 WeMobileDev，感谢原作者。&/blockquote&&h2&1、前言&/h2&&p&基于本地数据的全文搜索（Full-Text-Search，FTS）在移动应用上扮演着重要的角色。与基于服务端提供的搜索服务不同，移动端受硬件条件限制，尤其在数据量相对较大的情况下，搜索性能问题表现得十分突出。&/p&&p&本文以移动平台广泛采用的SQLite FTS Extension为例，介绍了移动平台FTS的基本原理，结合微信Android客户端自身实践，重点讲述微信在FTS上的一些性能优化经验。&/p&&p&（本文同步发布于：&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&52im.net/thread-1132-1-&/span&&span class=&invisible&&1.html&/span&&span class=&ellipsis&&&/span&&/a&）&/p&&h2&2、SQLite FTS Extension&/h2&&p&SQLite FTS Extension是SQLite为全文搜索开发的一个插件，它是内嵌在标准的SQLite分布版本当中。&/p&&p&&b&它具有如下的特点：&/b&&/p&&blockquote&&b&[1] 搜索速度快：&/b&使用倒排索引加速查找过程；&br&&b&[2] 稳定性好：&/b&目前SQLite在移动端的稳定性比较好，FTS Extension就是SQLite的基础上搭建的；&br&&b&[3] 接入简单：&/b&Android和IOS平台本身就支持SQLite，并且FTS Extension的使用就和正常使用SQLite表一样；&br&&b&[4] 兼容性好：&/b&受益于SQLite本身兼容性很好，SQLite FTS Extension也有很好的兼容性；&/blockquote&&p&&b&目前SQLiteFTSExtension发布了5个版本，我简单说下三个主流的版本：&/b&&/p&&blockquote&&b&[1] FTS3：&/b&基础版本，具有完整的FTS特性，支持自定义分词器，库函数包括Offsets，Snippet；&br&&b&[2] FTS4：&/b&在FTS3的基础上，性能有较大优化，增加相关性函数计算MatchInfo；&br&&b&[3] FTS5：&/b&和FTS4有较大变动，储存格式上有较大改进，最明显就是Instance-List的分段存储，能够支持更大的Instance-List的存储；并且开放ExtensionApi，支持自定义辅助函数。FTS5发布于2015年中。&/blockquote&&h2&3、存储架构&/h2&&p&微信全文搜索在2014 年底上线，最初主要服务于联系人和聊天记录的业务搜索。在方案设计之初，为了让这个功能有很好的体验，同时考虑到未来接入业务的会不断增多，我们设计目标是：&/p&&h2&3.1 搜索速度快&/h2&&p&微信全文搜索使用SQLite FTS4 Extension，通过倒排索引提高搜索速度。&/p&&h2&3.2 业务独立性&/h2&&p&微信的核心业务是联系人和消息，而微信全文搜索无论是在建立索引、更新索引或者删除索引时，都需要处理大量数据。&/p&&p&&b&为了使得全文搜索不影响微信的核心业务，采用如下的存储架构：&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aa05bffca95d5b4dab353947_b.jpg& data-caption=&& data-rawwidth=&722& data-rawheight=&422& class=&origin_image zh-lightbox-thumb& width=&722& data-original=&https://pic1.zhimg.com/v2-aa05bffca95d5b4dab353947_r.jpg&&&/figure&&p&&b&独立DB、读写分离：&/b&&/p&&p&微信全文搜索在整体架构上独立于主业务，搜索DB也是独立于主业务DB；当主业务数据发生更新时，主业务通过EventBus方式通知搜索对应的业务数据处理模块，业务数据处理模块会通过一个独立的ReadOnly数据库连接接访问主业务数据库，不和主业务存储层共享数据库连接。&/p&&p&&b&减少数据库操作：&/b&&/p&&p&在搜索模块中，会有专门处理业务数据的模块，对一些复杂的数据结构做一些特殊的处理。例如对于一个500成员的群聊，如果把500个群成员分次插入搜索DB当中，会造成过多的数据库操作。所以，微信会把所有的群成员拼接为单个字符串，插入搜索DB中。&/p&&p&&b&热数据延迟更新：&/b&&/p&&p&针对更新频率非常高的热数据，采用延迟更新的策略。所有的索引数据分为正常数据和脏数据。当数据发生更新时，先把对应的数据标记为脏数据，然后有一个定时器，每隔10分钟，把数据更新到索引中。&/p&&h2&3.3 可扩展性高&/h2&&p&高可扩展性要求搜索表结构和业务解耦。SQLite FTS官网上的例子，都是以单索引表的方式，每一列对应业务的某一个属性，当对应业务发生变化，需要修改索引表的结构。&/p&&p&&b&为了解决业务变化而带来的表结构修改问题，微信把业务属性数字化，设计如下的表结构：&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-fdf1a2ac0_b.jpg& data-caption=&& data-rawwidth=&889& data-rawheight=&610& class=&origin_image zh-lightbox-thumb& width=&889& data-original=&https://pic3.zhimg.com/v2-fdf1a2ac0_r.jpg&&&/figure&&p&IndexTable负责全文搜索的索引建立，它和逻辑无关，当搜索关键词时，只需要找到对应的DocId即可。MetaTable负责业务逻辑的过滤，通过Type和SubType来过滤对应业务的数据，最后输出BusItemId。&/p&&h2&4、搜索优化&/h2&&p&微信全文搜索于日5.4版本上线，到2017年春节后的6.5.7版本，总体用户量从4亿增加到9亿，重度用户数量也大幅度增长，微信本地搜索的数据量也大幅度增长，造成了搜索速度不断下降，用户投诉不断增加。我们统计过，从微信5.4版本到6.5.7版本，微信全文搜索各个任务的平均搜索时间增长超过10倍，给微信全文搜索带来巨大挑战。&/p&&p&&b&为了优化搜索时长，先看下搜索的流程图：&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-e48fcef97bd0c33744edaae_b.jpg& data-caption=&& data-rawwidth=&805& data-rawheight=&841& class=&origin_image zh-lightbox-thumb& width=&805& data-original=&https://pic1.zhimg.com/v2-e48fcef97bd0c33744edaae_r.jpg&&&/figure&&p&通过每个阶段的耗时，发现在取数据阶段，时间占比达到80%以上，并且搜索的结果集数据量越大，时间占比越高，最高可以达到95%。取数据阶段是一个循环的过程，所以优化一个循环需要从两方面着手，减少单次循环耗时和减少总体循环次数。&/p&&h2&优化1：减少单次循环执行耗时&/h2&&p&深入SQLite FTS4 Extension源码，发现FTS4的库函数Offsets耗时占单次循环执行耗时70%以上，并且数据量越大耗时越长。&/p&&p&&b&FTS4库函数Offsets：&/b&用于把词语偏移转为字节偏移，微信当中使用字节做结果排序和结果高亮。&/p&&p&&b&函数输入：&/b&&/p&&p&Query：用户查找的关键词；&/p&&p&命中Doc：关键词所命中的文档。文档就是全文搜索中的基本单位，可以是一个网页，一篇文章或者是一条聊天记录；&/p&&p&目标词语偏移：在搜索阶段，通过关键词查找搜索索引可以拿到目标词语偏移。&/p&&p&&b&函数输出：&/b&&/p&&p&目标字节偏移：表示关键词在命中Doc中的字节偏移。&/p&&p&&b&例如：&/b&&/p&&p&Query=我、命中Doc=我和我弟弟去逛街、目标词语偏移=0、2。&/p&&p&&b&把命中Doc经过分词器分词，可以得到下表：&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-07fda99bbfe3df2cd3251_b.jpg& data-caption=&& data-rawwidth=&1240& data-rawheight=&201& class=&origin_image zh-lightbox-thumb& width=&1240& data-original=&https://pic4.zhimg.com/v2-07fda99bbfe3df2cd3251_r.jpg&&&/figure&&p&最后计算可以得出目标字节偏移=0、6。&/p&&p&&b&下图是Offsets函数处理命中Doc字节数和耗时的关系：&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-bee9969fed61f5c93f506b_b.jpg& data-caption=&& data-rawwidth=&720& data-rawheight=&309& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic1.zhimg.com/v2-bee9969fed61f5c93f506b_r.jpg&&&/figure&&p&Offsets函数的处理过程中包括分词，所以第一步就优化分词器。&/p&&p&要优化分词器，分词规则是重中之重。微信的分词规则为英文和数字合并分词，非英文和数字单独分词。举个例子，如对于昵称“Hello520中国”，分词结果为“Hello”、“520”、“中”、“国”。这个分词规则的原因主要是在微信对全文搜索的结果排序需求主要是其他的属性排序，并非依据文档的相关性排序。即，全文搜索部分只需要找到存在关键词的文档，并不关心文档中存在几个关键词。而且用户的输入Query大部分情况都不能组成词语，存在方言，所以把整个词语全部拆开建立索引是符合需求的。&/p&&p&微信全文搜索最早开发于2013年底，FTS4是SQLite FTS Extension的最高版本，但是FTS4自带的分词器不能很好的支持中文，只能使用ICU分词器，当时ICU分词器的接入比较简单，对中文支持较好，所以使用了ICU分词器。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-fbaa81fbfbb0cabaad45b_b.jpg& data-caption=&& data-rawwidth=&863& data-rawheight=&209& class=&origin_image zh-lightbox-thumb& width=&863& data-original=&https://pic3.zhimg.com/v2-fbaa81fbfbb0cabaad45b_r.jpg&&&/figure&&p&对于昵称“Hello520中国”输出分词器中，开始是UTF8编码，分词器会做一次转化为Unicode编码，接着查找词典，最后进行后处理得到分词结果。从输入输出中可以发现，转化编码和查找词典这两步其实是多余的，所以微信舍弃ICU分词器，自定义了Simple分词器。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-d30fb08be0_b.jpg& data-caption=&& data-rawwidth=&821& data-rawheight=&322& class=&origin_image zh-lightbox-thumb& width=&821& data-original=&https://pic3.zhimg.com/v2-d30fb08be0_r.jpg&&&/figure&&p&Simple分词直接处理的UTF8编码的Doc内容，通过单个char，判断当前字符的Unicode编码范围和Unicode编码长度，根据不同的情况做出不同的处理。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-c11e412bb063241dbf616127_b.jpg& data-caption=&& data-rawwidth=&720& data-rawheight=&311& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic1.zhimg.com/v2-c11e412bb063241dbf616127_r.jpg&&&/figure&&p&经过分词器优化后Offsets函数耗时在处理10万Byte的耗时降低为21ms，但是这样的优化还不够，当处理超过10个10W结果Doc时，仍然会超过200ms，所以有了下一步的优化。&/p&&p&在移动端由于屏幕的限制，往往在最后显示搜索结果时，只会高亮少量命中的关键词，而Offsets函数会计算命中Doc中所有目标词语偏移，所以需要对Offsets函数进行改造。&/p&&p&最开始我尝试的方案是直接修改Offsets函数源码，发现FTS4对API的封装比较难使用，Offsets函数的依赖也比较多，修改出来的代码很难维护，可读性也不好，所以需要寻找新的方法来优化。在一番研究以后，我发现FTS5支持自定义辅助函数，并且有比较好的API的封装，所以最后使用FTS5自定义辅助函数(MMHighLight)重新实现Offsets函数的功能，并加入优化逻辑。&/p&&p&&b&输入：&/b&Query=我、命中Doc=我和我弟弟去逛街、目标词语偏移=0、2，目标返回个数=1。&/p&&p&分词器分步回调，当分词器第一次返回“我”，符合目标词语偏移的第一个0，并且此时已经满足目标返回个数1个，函数直接返回目标字节偏移=0。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-77eae5cf83f5ebc0fdda012c4d60034e_b.jpg& data-caption=&& data-rawwidth=&720& data-rawheight=&313& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic2.zhimg.com/v2-77eae5cf83f5ebc0fdda012c4d60034e_r.jpg&&&/figure&&h2&优化2：减少总体循环次数&/h2&&p&减少取数据阶段的总体循环次数，比较容易想到的就是在SQL层做数据的分页返回，分页返回就意味着需要在DB层排序，在DB层排序的决定因素就是排序因子。但是微信全文搜索面对的业务排序因子多并且复杂，无法直接使用SQL中的ORDER BY，所以需要通过一个中间函数转化，把所有的排序因子通过一个可比较的数字体现，最后再使用ORDER BY排序。&/p&&p&&b&这里简单说下，比较复杂的排序因子如下：&/b&&/p&&blockquote&&b&时间分段排序：&/b&时间范围在半年内，排序因子取决于下一级排序因子，时间范围在半年外，取决于时间的远近；&br&&b&函数结果排序：&/b&排序因子是一个函数计算的结果，不是一个直接的数据库Column，并且函数计算结果不可直接使用ORDER BY，例如字符串形式的数字。&/blockquote&&p&&b&通过以上的分析，减少总体循环次数的核心点就在于，把Java层的排序转移到SQL层去做，优点如下：&/b&&/p&&blockquote&减少I/O；&br&减少C层到Java层的数据拷贝。&/blockquote&&p&所以这里关键的实现点在于中间转化函数的实现，微信的中间转化函数MMRank是通过FTS5的辅助函数实现的。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-ecbfa665ab48d5bb9d93d7de2e07eb99_b.jpg& data-caption=&& data-rawwidth=&568& data-rawheight=&182& class=&origin_image zh-lightbox-thumb& width=&568& data-original=&https://pic1.zhimg.com/v2-ecbfa665ab48d5bb9d93d7de2e07eb99_r.jpg&&&/figure&&p&MMRank的实现原理就是通过把所有的排序因子转化到一个64位的Long数值当中，高优先级的排序因子置高位，低优先级的排序因子置低位。&/p&&p&&b&最后的SQL如下：&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-3ffb975d2cfc34d475a9_b.jpg& data-caption=&& data-rawwidth=&446& data-rawheight=&71& class=&origin_image zh-lightbox-thumb& width=&446& data-original=&https://pic1.zhimg.com/v2-3ffb975d2cfc34d475a9_r.jpg&&&/figure&&h2&优化3：特殊优化——聊天记录搜索优化&/h2&&p&微信全文搜索中有一个比较特殊的搜索任务，就是聊天记录。&/p&&p&&b&如图所示：&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f1b948f31a34f05bc7c607e_b.jpg& data-caption=&& data-rawwidth=&626& data-rawheight=&598& class=&origin_image zh-lightbox-thumb& width=&626& data-original=&https://pic3.zhimg.com/v2-f1b948f31a34f05bc7c607e_r.jpg&&&/figure&&p&图中的红色圈内的数字表示，此会话中，包含关键字“我”的聊天记录的个数，而会话的排序规则就是会话的活跃时间。&/p&&p&&b&微信聊天记录的搜索有一下两个特点：&/b&&/p&&blockquote&有统计属性；&br&数量非常多（单关键词命中最高可达到20万条）。&/blockquote&&p&从搜索流程图中可以看出，微信最初采用的方案是在Java层统计个数和排序，此方法在大数据的情况下不可取。鉴于之前分析过减少循环次数可以通过分页返回，其核心点在于把排序从Java层转移到SQL层，所以就有了优化方案一。&/p&&p&&b&【优化方案一：Group By】&/b&&/p&&p&&b&实现SQL如下：&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fd57f061c0a2e64a3556bdbd79ca1f4e_b.jpg& data-caption=&& data-rawwidth=&444& data-rawheight=&95& class=&origin_image zh-lightbox-thumb& width=&444& data-original=&https://pic1.zhimg.com/v2-fd57f061c0a2e64a3556bdbd79ca1f4e_r.jpg&&&/figure&&p&此方案通过Group By在SQL层直接统计出命中聊天记录的个数，并按照最近的时间排序。&/p&&p&&b&但是也有明显的缺陷：&/b&&/p&&blockquote&无法使用索引加速：当GroupBy和OrderBy同时使用是，OrderBy中必须包含GroupBy的字段才可以命中索引，原因是使用GroupBy会生成中间子表；&br&全量计算：GroupBy在SQL层统计命中聊天记录个数是统计了所有会话，上图中只需要统计3个会话，浪费了大量资源。&/blockquote&&p&&b&【优化方案二：分步计算】&/b&&/p&&p&鉴于方案一全量计算的问题，采用分步计算的方式。&/p&&p&&b&第一步：&/b&找出最近活跃的3个会话&/p&&figure&&img src=&https://pic7.zhimg.com/v2-26bc2e5e0d8ee7471eb2_b.jpg& data-caption=&& data-rawwidth=&533& data-rawheight=&88& class=&origin_image zh-lightbox-thumb& width=&533& data-original=&https://pic7.zhimg.com/v2-26bc2e5e0d8ee7471eb2_r.jpg&&&/figure&&p&&b&得到会话conv1,conv2,conv3，然后执行以下SQL，可以分别得到三个会话的命中个数：&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-5e5bf973a82bea71ef3fdd_b.jpg& data-caption=&& data-rawwidth=&536& data-rawheight=&193& class=&origin_image zh-lightbox-thumb& width=&536& data-original=&https://pic4.zhimg.com/v2-5e5bf973a82bea71ef3fdd_r.jpg&&&/figure&&p&但是这种方法也存在问题，需要执行多条SQL。&/p&&p&&b&【优化方案三：MessageCount】&/b&&/p&&p&鉴于方案二需要多条SQL的问题，可以通过自定义聚合函数实现一次性统计。执行步骤如下。&/p&&p&&b&第一步：&/b&找出最近活跃的3个会话&/p&&figure&&img src=&https://pic4.zhimg.com/v2-5fb1f8c427841ecfbce66295d77abf6c_b.jpg& data-caption=&& data-rawwidth=&533& data-rawheight=&90& class=&origin_image zh-lightbox-thumb& width=&533& data-original=&https://pic4.zhimg.com/v2-5fb1f8c427841ecfbce66295d77abf6c_r.jpg&&&/figure&&p&&b&得到会话conv1,conv2,conv3，然后执行以下SQL：&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-192c6d69_b.jpg& data-caption=&& data-rawwidth=&532& data-rawheight=&109& class=&origin_image zh-lightbox-thumb& width=&532& data-original=&https://pic2.zhimg.com/v2-192c6d69_r.jpg&&&/figure&&p&可以一次性得到三个会话的命中个数。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8e3b59bc8d1e_b.jpg& data-caption=&& data-rawwidth=&720& data-rawheight=&321& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic1.zhimg.com/v2-8e3b59bc8d1e_r.jpg&&&/figure&&h2&5、写在最后&/h2&&p&经过优化后，微信全文搜索全体用户各个任务平均耗时都在50ms以下，而重度用户各个任务的平均搜索耗时都在200ms以下，平均时间优化的幅度达到5倍以上。&/p&&p&后续还有很多值得优化的地方，例如，在计算高亮时，如果在DocList的数据结构中，直接加入字节偏移，那么还可以节省一部分时间。&/p&&p&（原文链接：&a href=&https://link.zhihu.com/?target=https%3A//mp.weixin.qq.com/s%3F__biz%3DMzAwNDY1ODY2OQ%3D%3D%26mid%3D%26idx%3D1%26sn%3D338a1c65b54a7bchksm%3Dc06efcfb5ca2ab2e610ffff49dscene%3D0%26key%3D33bb8bd62dfe11f25f0acdea9a02fc76037bcc42efd329e30e089a40eae8cb69fdee23%26ascene%3D0%26uin%3DMTQ5NTk2Nzc0Mg%253D%253D%26devicetype%3DiMac%2BMacBookPro11%252C1%2BOSX%2BOSX%2B10.11.6%2Bbuild%%26version%3Dnettype%3DWIFI%26fontScale%3D100%26pass_ticket%3DiTGdaMNHGdR4Ja1f3%252BafLQv5Gj3D2aY8AIOACKb%252FrNfygpmI8hdDvGOZyl3Bh8%252FY& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&点此进入&/a&，本文同步发布于：&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&52im.net/thread-1132-1-&/span&&span class=&invisible&&1.html&/span&&span class=&ellipsis&&&/span&&/a&）&/p&&h2&附录：更多有关微信、QQ的文章&/h2&&p&&b&[1] 有关QQ、微信的技术文章：&/b&&/p&&blockquote&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信手机端的本地数据全文检索优化之路&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&企业微信客户端中组织架构数据的同步更新方案优化实战&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队披露：微信界面卡死超级bug“15。。。。”的来龙去脉&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&QQ 18年：解密8亿月活的QQ后台服务接口隔离技术&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&月活8.89亿的超级IM微信是如何进行Android端兼容测试的&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&以手机QQ为例探讨移动端IM中的“轻应用”&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-932-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一篇文章get微信开源移动端数据库组件WCDB的一切！&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-921-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信客户端团队负责人技术访谈：如何着手客户端性能监控和优化&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-895-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信后台基于时间序的海量数据冷热分级架构设计实践&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-893-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创分享：Android版微信的臃肿之困与模块化实践之路&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-801-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信后台团队：微信后台异步消息队列的优化升级实践分享&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-789-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创分享：微信客户端SQLite数据库损坏修复实践&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-675-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯原创分享(一)：如何大幅提升移动网络下手机QQ的图片传输速度和成功率&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-697-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（下篇）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-696-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-620-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信Mars：微信内部正在使用的网络层封装库，即将开源&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-684-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如约而至：微信自用的移动端IM网络层跨平台组件库Mars已正式开源&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-623-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开源libco库：单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-310-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信新一代通信安全解决方案：基于TLS1.3的MMTLS详解&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-210-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创分享：Android版微信后台保活实战分享(进程保活篇)&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-209-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创分享：Android版微信后台保活实战分享(网络保活篇)&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-206-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Android版微信从300KB到30MB的技术演进(PPT讲稿) [附件下载]&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-205-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创分享：Android版微信从300KB到30MB的技术演进&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-200-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信技术总监谈架构：微信之道——大道至简(演讲全文)&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-199-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信技术总监谈架构：微信之道——大道至简(PPT讲稿) [附件下载]&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-201-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如何解读《微信技术总监谈架构：微信之道——大道至简》&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-186-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信海量用户背后的后台系统存储架构(视频+PPT) [附件下载]&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-624-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信异步化改造实践：8亿月活、单机千万连接背后的后台解决方案&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-178-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信朋友圈海量技术之道PPT [附件下载]&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-195-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信对网络影响的技术试验及分析（论文全文）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-179-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一份微信后台技术架构的总结性笔记&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-177-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&架构之道：3个程序员成就微信朋友圈日均10亿发布量[有视频]&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-168-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&快速裂变：见证微信强大后台架构从0到1的演进历程（一）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-170-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&快速裂变：见证微信强大后台架构从0到1的演进历程（二）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-143-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创分享：Android内存泄漏监控和优化技巧总结&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-142-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&全面总结iOS版微信升级iOS9遇到的各种“坑”&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-139-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创资源混淆工具：让你的APK立减1M&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-140-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信团队原创Android资源混淆工具：AndResGuard [有源码]&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-138-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Android版微信安装包“减肥”实战记录&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-137-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iOS版微信安装包“减肥”实战记录&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-136-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：iOS版微信界面卡顿监测方案&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-128-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信“红包照片”背后的技术难题&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-126-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：iOS版微信小视频功能技术方案实录&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-124-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：Android版微信如何大幅提升交互性能（一）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-125-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：Android版微信如何大幅提升交互性能（二）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-120-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：实现Android版微信的智能心跳机制&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-121-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：WhatsApp、Line、微信的心跳策略分析&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-122-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：谷歌消息推送服务(GCM)研究（来自微信）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-116-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端IM实践：iOS版微信的多设备字体适配方案探讨&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-862-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&信鸽团队原创：一起走过 iOS10 上消息推送(APNS)的坑&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-999-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯信鸽技术分享：百亿级实时消息推送的实战经验&/a&》&br&&&&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/forum.php%3Fmod%3Dcollection%26action%3Dview%26ctid%3D12& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&更多同类文章 ……&/a&&/blockquote&&p&&b&[2] 有关QQ、微信的技术故事：&/b&&/p&&blockquote&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&腾讯开发微信花了多少钱？技术难度真这么大？难在哪？&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-613-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&技术往事：创业初期的腾讯——16年前的冬天，谁动了马化腾的代码&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-599-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&技术往事：史上最全QQ图标变迁过程，追寻IM巨人的演进历史&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-874-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&技术往事：“QQ群”和“微信红包”是怎么来的？&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-290-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发往事：深度讲述，微信一路风雨的背后&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-204-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发往事：微信千年不变的那张闪屏图片的由来&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-203-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&开发往事：记录微信3.0版背后的故事（距微信1.0发布9个月时）&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-115-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一个微信实习生自述：我眼中的微信开发团队&/a&》&br&《&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-961-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&首次揭秘：QQ实时视频聊天背后的神秘组织&/a&》&br&&&&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/forum.php%3Fmod%3Dcollection%26action%3Dview%26ctid%3D14& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&更多同类文章 ……&/a&&/blockquote&&p&（本文同步发布于：&a href=&https://link.zhihu.com/?target=http%3A//www.52im.net/thread-.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&52im.net/thread-1132-1-&/span&&span class=&invisible&&1.html&/span&&span class=&ellipsis&&&/span&&/a&）&/p&
本文由微信团队原创分享，转自 WeMobileDev，感谢原作者。1、前言基于本地数据的全文搜索（Full-Text-Search，FTS）在移动应用上扮演着重要的角色。与基于服务端提供的搜索服务不同，移动端受硬件条件限制，尤其在数据量相对较大的情况下，搜索性能问题表现…
&figure&&img src=&https://pic2.zhimg.com/v2-53b4cf1b59aae20d6bbef_b.jpg& data-rawwidth=&1620& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1620& data-original=&https://pic2.zhimg.com/v2-53b4cf1b59aae20d6bbef_r.jpg&&&/figure&&blockquote&&b&&i&来源：&a href=&https://link.zhihu.com/?target=http%3A//www.wxapp-union.com/portal.php%3Fmod%3Dview%26aid%3D327& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&有用！关于微信小程序，那些开发文档没有告诉你的&/a&&/i&&/b&&p&&b&&i&作者：王婷婷&/i&&/b&&/p&&/blockquote&&p&本文由广研微信小程序的开发团队所做，作者为UI开发工程师王婷婷。本文从UI开发的角度，结合OM小程序的案例，剖析小程序的组件用法与传统HTML5标签的区别。&br&&/p&&h2&&b&小程序与传统HTML5的区别&/b&&/h2&&p&小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序就是基于HTML5开发。 &/p&&p&经过仔细研究文档和代码开发，从视图层的角度来说，小程序与传统HTML5还是有明显的区别，主要区别在于：&/p&&br&1、开发工具不同；&p&区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。&/p&&p&2、开发语言不同；&/p&&p&小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。&/p&&p&3、组件封装不同；&/p&&p&小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。&/p&&p&&b&小程序开发者工具&/b&&/p&&p&微信小程序的开发工具，基于MINA框架（现已取消该名称），现在官方公布的工具名为&b&微信web开发者工具&/b&。小程序开发工具是一种基于Native System系统层的框架，由于并非运行在浏览器中，所以JavaScript在web中的一些诸如Document、Window等方法无法使用。 &/p&&p&从执行的速度方面，普通HTML5和小程序有哪些不同呢，用一张图表简单表示下：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f22f385ea09ba512bd58_b.jpg& data-rawwidth=&678& data-rawheight=&276& class=&origin_image zh-lightbox-thumb& width=&678& data-original=&https://pic3.zhimg.com/v2-f22f385ea09ba512bd58_r.jpg&&&/figure&&br&&ul&&li&传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。&br&&/li&&li&相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。&br&&/li&&/ul&&p&小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度。&/p&&h3&&b&WXML&/b&&/h3&&p&&strong&1、标签&/strong&&/p&&p&WXML在语法上更接近XML语言，遵循SGML规范，区别于HTML语言随意的标签闭合方式，WXML语言必须包括开始标签和结束标签，以image标签为例，以下2种写法都支持：&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&&span class=&nt&&&image&/span& &span class=&na&&src=&/span&&span class=&s&&&&&/span& &span class=&nt&&/&&/span&
&span class=&nt&&&image&/span& &span class=&na&&src=&/span&&span class=&s&&&&&/span& &span class=&nt&&&&/image&&/span&
&/code&&/pre&&/div&&p&这里需要注意的是： &br&&/p&&p&&strong&所有组件与属性都是小写，以连字符-连接。&/strong&&/p&&p&&strong&2、文件引入&/strong&&/p&&p&WXML提供两种文件引入方式，import和include。区别在于：import可以引入定义好的template模板，模板是有作用域的；而include就是拷贝一个公用的代码片段到目标文件中，适合做公共页面片的拆分。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&&span class=&c&&&!--import--&&/span&
&span class=&nt&&&import&/span& &span class=&na&&src=&/span&&span class=&s&&&../template/a.wxml&&/span&&span class=&nt&&/&&/span&
&span class=&c&&&!--include--&&/span&
&span class=&nt&&&include&/span& &span class=&na&&src=&/span&&span class=&s&&&../include/footer.wxml&&/span&&span class=&nt&&/&&/span&
&/code&&/pre&&/div&&p&文件引入在小程序做模块化拆分的过程中非常重要。&br&&/p&&h3&&b&WXSS&/b&&/h3&&p&&strong&1、尺寸单位&/strong&&/p&&p&WXSS支持的单位有px、rem和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为固定尺寸。 其中1rpx=0.5px，在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。 &/p&&p&&strong&建议&/strong&：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 &br&所以工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&view{
font-size:26
height:400
&/code&&/pre&&/div&&p&备注：rpx的单位不光在样式中会自适应，写在WXML的style里也会根据屏幕自适应。&br&&/p&&p&&strong&2、样式引入&/strong&&/p&&p&看到很多文章说小程序不支持样式的@import，其实官方公布的第一个正式开发者工具就已经支持了。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&import &../../wxss/common.wxss&;
&/code&&/pre&&/div&&p&&strong&3、选择器&/strong&&br&&/p&&p&小程序支持的选择器在官方公布的文档中包括.class、#id、 element、element,element、::after(注意是双冒号)、::before这6种选择器。 &/p&&p&经过测试，小程序对于:first-child、:last-child、.class-a .class-b{}，甚至更多层级的嵌套都是支持的。 不过官方并不推荐级联的这种写法，因为考虑到后面切Native的扩展可能，会没办法支持级联选择。 &/p&&p&所以保险起见，不建议.class-a .class-b{}这种级联的写法，以免后期工具过滤导致页面错乱。&/p&&h3&&b&组件&/b&&/h3&&p&小程序在0.10.102800的版本中加入了 textarea，并即将废弃操作反馈的系列组件。 &br&我们简单通过一个表格来对比下HTML5和小程序的组件标签的区别；&/p&&figure&&img src=&https://pic2.zhimg.com/v2-7d628fc0f220e4f50001_b.jpg& data-rawwidth=&620& data-rawheight=&411& class=&origin_image zh-lightbox-thumb& width=&620& data-original=&https://pic2.zhimg.com/v2-7d628fc0f220e4f50001_r.jpg&&&/figure&&p&下面一一来分析下： &/p&&p&&b&1、view &/b&&/p&&p&div和view都是盒模型，默认display:block。 盒模型在布局过程中，一般推荐display:flex的写法，配合justify-content:align-items:的定义实现盒模型在横向和纵向的居中。&/p&&p&&strong&2、text&/strong&&/p&&p&除了text文本节点以外的其他节点都无法长按选中。截止到0.10.102800的开发者工具text支持嵌套text，不过有class的text会被面板过滤，样式不影响。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&&span class=&nt&&&text&/span& &span class=&na&&class=&/span&&span class=&s&&&text-tips&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&text&/span& &span class=&na&&class=&/span&&span class=&s&&&text-light&&/span&&span class=&nt&&&&/span&* &span class=&nt&&&/text&&/span&友情提示!
&span class=&nt&&&/text&&/span&
&span class=&c&&&!--支持text嵌套text--&&/span&
&span class=&nt&&&text&&/span&
&span class=&nt&&&view&&/view&&/span&
&span class=&nt&&&/text&&/span&
&span class=&c&&&!--不支持text嵌套其他标签--&&/span&
&/code&&/pre&&/div&&p&&strong&3、 icon&/strong&&br&&/p&&p&icon可以直接用微信组件默认的图标，默认是iconfont格式的，从WeUI那边沿袭过来的一种做法。 自定义的icon推荐svg sprite格式或者iconfont。 &/p&&p&目前来看，市面上还没有很好的自动合并单个svg为svg sprite的工具，需要手动拼图。&/p&&p&&strong&4、input&/strong&&/p&&p&input 的类型，有效值：text, number, idcard, digit, time, date 。 input不需要设置line-height或padding来纵向居中，默认placeholder的文字是居中的。 小程序把checkbox和radio都单独做成了组件，默认的input只支持输入文本。 上传文件在小程序里需要调用chooseImage事件完成；&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&&span class=&nt&&&input&/span& &span class=&na&&type=&/span&&span class=&s&&&file&&/span& &span class=&na&&class=&/span&&span class=&s&&&upload-input&&/span& &span class=&na&&accept=&/span&&span class=&s&&&image/*&&/span&&span class=&nt&&&&/span&
&span class=&c&&&!--HTML5的上传文件--&&/span&
&span class=&nt&&&view&/span& &span class=&na&&class=&/span&&span class=&s&&& upload-block&&/span& &span class=&na&&bindtap=&/span&&span class=&s&&&chooseImage&&/span&&span class=&nt&&&&/view&&/span&
&span class=&nt&&&view&/span& &span class=&na&&class=&/span&&span class=&s&&&upload-block&&/span& &span class=&na&&wx:for=&/span&&span class=&s&&&{{imageList}}&&/span& &span class=&na&&wx:for-item=&/span&&span class=&s&&&image&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&image&/span& &span class=&na&&src=&/span&&span class=&s&&&{{image}}&&/span& &span class=&na&&class=&/span&&span class=&s&&&pic&&/span& &span class=&na&&data-src=&/span&&span class=&s&&&{{image}}&&/span& &span class=&na&&bindtap=&/span&&span class=&s&&&previewImage&&/span&&span class=&nt&&&&/image&&/span&
&span class=&nt&&&/view&&/span&
&span class=&c&&&!--小程序的上传图片，可以调用app原生的拍照和上传图片接口--&&/span&
&/code&&/pre&&/div&&p&小程序CSS里的 :focus 不生效，需要修改placehoder的样式，通过placeholder-class=”class”来定义。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&.login .input-group input::-webkit-input-placeholder {
color: #c0c0c0;
.login .input-group input:focus::-webkit-input-placeholder {
&span class=&c&&&!--HTML5通过focus修改placeholder默认和点击时候的样式--&&/span&
&span class=&nt&&&input&/span& &span class=&na&&type=&/span&&span class=&s&&&text&&/span&
&span class=&na&&placeholder=&/span&&span class=&s&&&邮箱&&/span& &span class=&na&&placeholder-style=&/span&&span class=&s&&&color:#c0c0c0&&/span& &span class=&nt&&/&&/span&
&span class=&nt&&&input&/span& &span class=&err&&password&/span& &span class=&na&&type=&/span&&span class=&s&&&number&&/span& &span class=&na&&placeholder=&/span&&span class=&s&&&密码&&/span& &span class=&na&&placeholder-class=&/span&&span class=&s&&&placeholder&&/span&
&span class=&nt&&/&&/span&
&span class=&c&&&!--小程序里通过placeholder-style和placeholder-class修改样式，不过并不能修改点击时候input的边框颜色--&&/span&
&/code&&/pre&&/div&&p&&strong&5、picker&/strong&&/p&&p&picker默认支持普通、日期和时间三种选择器。 picker通过bindchange事件来调取range中自定义的数据数据，并展示到页面中，调用的是系统原生的select。 &/p&&p&这里小程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终用picker代替了。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&&span class=&nt&&&select&/span& &span class=&na&&class=&/span&&span class=&s&&&select-block&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&option&/span& &span class=&na&&value=&/span&&span class=&s&&&0&&/span&&span class=&nt&&&&/span&选择&span class=&nt&&&/option&&/span&
&span class=&nt&&&option&/span& &span class=&na&&value=&/span&&span class=&s&&&1&&/span&&span class=&nt&&&&/span&北京&span class=&nt&&&/option&&/span&
&span class=&nt&&&option&/span& &span class=&na&&value=&/span&&span class=&s&&&2&&/span&&span class=&nt&&&&/span&上海&span class=&nt&&&/option&&/span&
&span class=&nt&&&/select&&/span&
&span class=&c&&&!--HTML5的下拉框--&&/span&
&span class=&nt&&&picker&/span& &span class=&na&&bindchange=&/span&&span class=&s&&&bindPickerChange&&/span& &span class=&na&&value=&/span&&span class=&s&&&{{index}}&&/span& &span class=&na&&range=&/span&&span class=&s&&&{{area}}&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&view&/span& &span class=&na&&class=&/span&&span class=&s&&&picker&&/span&&span class=&nt&&&&/span&
{{area[index]}}
&span class=&nt&&&/view&&/span&
&span class=&nt&&&/picker&&/span&
area: ['中国', '美国', '巴西', '日本'],
&span class=&c&&&!--js里的area数组--&&/span&
&span class=&c&&&!--picker下拉框--&&/span&
&/code&&/pre&&/div&&p&&strong&6、 navigator&/strong&&br&&/p&&p&navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect； &/p&&p&navigator仅支持5级页面的跳转； &/p&&p&navigator不可跳转到小程序外的链接地址；&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&o&&&&/span&&span class=&nx&&navigator&/span& &span class=&kr&&class&/span&&span class=&o&&=&/span&&span class=&s2&&&navigator&&/span& &span class=&nx&&redirect&/span&
&span class=&nx&&url&/span&&span class=&o&&=&/span&&span class=&s2&&&../login/index&&/span& &span class=&o&&&&/span&&span class=&nx&&登录页&/span&&span class=&o&&&&/span&&span class=&err&&/navigator&&/span&
&/code&&/pre&&/div&&p&在小程序开发工具里，默认打开新页面，工具左上角有返回按钮。加上redirect，当前页打开，不出现返回按钮。&br&&/p&&p&&strong&7、image&/strong&&/p&&p&小程序的image与HTML5的img最大的区别在于：小程序的image是按照background-image来实现的。 默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽，auto在这里不生效。&/p&&p&（&strong&开发者说这样设置的原因是：如果设置 auto ，页面布局会因为图片加载的过程有一个闪的现象（例如高度从 0 到 height ），所以要求一定要设置一个宽度和高度。&/strong&） &/p&&p&最新的api支持获取图片的高宽。不过这里返回的高宽是px单位，不支持屏幕自适应； &/p&&p&图片包括三种缩放模式scaleToFill、aspectFit、aspectFill和9种裁剪模式，三种缩放模式的实现原理对应如下：&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&scaleToFill{
background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit{
background-size://保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill{
background-size://保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
&/code&&/pre&&/div&&p&&strong&8、button&/strong&&br&&/p&&p&额外补充下button的实现方式，button的边框是用:after方式实现的，用户如果在button上定义边框会出现两条线，需用:after的方式去覆盖默认值。不过这个应该会在最近的开发者工具中修复。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&button::after {
content:& &;
width:200%;
height:200%;
border:1px solid rgba(0, 0, 0, 0.2);
&/code&&/pre&&/div&&p&小程序不支持button:active这种样式的写法，button的点击态通过.button-hover{}的样式覆盖，也可修改hover-class为自定义的样式名。&br&&/p&&p&&strong&9、css3动画&/strong&&/p&&p&最新版的开发工具已经支持transition和keyframes动画，不用js苦哈哈的写动画队列了。&/p&&p&除了官方公布的小程序的组件之外，有一些标签比如，span、em、strong、b也是支持的，只是官方并不推荐使用。&/p&&h3&&b&浏览器内核&/b&&/h3&&ul&&li&&p&在iOS平台上，微信的浏览器渲染内核是wkwebview；&/p&&/li&&li&&p&而在Android平台上，微信则采用了腾讯QQ浏览器2016年4月份发布的X5内核（blink内核）作为渲染引擎。&/p&&/li&&li&&p&在小程序的开发工具上，小程序的JavaScript是运行在chrome内核（nwjs）中。&/p&&/li&&/ul&&h3&&b&autoprefixer&/b&&/h3&&p&小程序会在接下来的版本中加入自动补全css前缀，使用的插件是postcss的autoprefixer，设置的兼容级别是& ios 8及& android 4.1。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&const browserOptions = {
browsers: [
'last 3 versions',
'ios &= 8',
'android &= 4.1',
&/code&&/pre&&/div&&p&也就是说，我们在写css的时候只需要写没有前缀的写法。比如：display:flex，工具自动编译为display:display:-webkit-flex。&/p&&h3&&b&OM小程序实战&/b&&/h3&&p&&figure&&img src=&https://pic1.zhimg.com/v2-78c39abff79_b.jpg& data-rawwidth=&673& data-rawheight=&409& class=&origin_image zh-lightbox-thumb& width=&673& data-original=&https://pic1.zhimg.com/v2-78c39abff79_r.jpg&&&/figure&上图为OM小程序的开发界面。下面我们从布局、智能裁图和loading动画几个方面简单说下OM小程序具体的UI开发经验。 &/p&&p&&strong&1、flex布局&/strong&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-cfee1d16a80cba_b.jpg& data-rawwidth=&620& data-rawheight=&547& class=&origin_image zh-lightbox-thumb& width=&620& data-original=&https://pic1.zhimg.com/v2-cfee1d16a80cba_r.jpg&&&/figure&&p&以上图om的文章列表为例，文章的形态包括纯文字的和图文混合的。图文混合的文字不管是1行还是2行都需要相对于图片纵向居中。用flex的布局，就可以实现这3种状态不修改CSS文件，只按需隐藏DOM结构就搞定。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&.media {
justify-content://设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items://定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
.media .content {
&/code&&/pre&&/div&&p&在做传统H5的时候，为了兼容各种低端设备的机型，通常不太敢轻易尝试flex，但在小程序里就可以大胆的使用了。&/p&&p&&strong&2、智能裁图&/strong&&/p&&p&正是由于小程序把图片处理成背景图片，OM的素材管理页面图片的实现方式在这里遇到了一个挑战。 简单列举下om各种不同尺寸图片在平台上的展示方案。&/p&&blockquote&&p&1、高&50px： &/p&&p&（1）宽&175px，原图居中显示； &br&（2）宽&175px，定宽等比上下居中显示； &/p&&p&2、50px&高&400px： &/p&&p&（1）宽&175px，原图居中显示； &br&（2）宽&175px，定宽等比显示； &/p&&p&3、高&400px： &/p&&p&（1）宽&175px，原图居中显示、超出400px高度隐藏； &br&（2）宽&175px，定宽等比显示、超出400px高度隐藏；&/p&&/blockquote&&p&这种方案，用css和img实现起来，只需要设置外层盒子最大高宽，图片自适应缩放即可。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&.pic-list .pic-item .pic-body .pic {
width: 100%;
text-align:
max-height: 4
min-height: 0.5
display: -webkit-
-webkit-box-orient:
-webkit-box-align:
-webkit-box-pack:
.pic img {
-webkit-box-flex: 1;
&/code&&/pre&&/div&&p&然而因为小程序里是用背景图片的方式，简单的css设置并不能实现智能裁图的方案。需要配合js计算出不同尺寸图片对应的适配尺寸。&/p&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&.pic-list .pic-item .pic-body .pic {
width: 100%;
text-align:
max-height: 800
min-height: 100
align-items:
justify-content:
&/code&&/pre&&/div&&p&这里需要后台接口提供数据列表的图片高宽，js对拿到图片的不同尺寸进行算法计算，重新赋值再返回给数据。&/p&&p&&strong&3、css3动画改变默认loading&/strong&&/p&&p&小程序默认提供的loading是普通的菊花loading，这里OM使用自定义的keyframes序列帧动画。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-645a755d637bcdcfd6c73_b.jpg& data-rawwidth=&578& data-rawheight=&89& class=&origin_image zh-lightbox-thumb& width=&578& data-original=&https://pic3.zhimg.com/v2-645a755d637bcdcfd6c73_r.jpg&&&/figure&&div class=&highlight&&&pre&&code class=&language-xml&&&span&&/span&.icon-loading {
animation: loadingWhite 1.2
animation-timing-function: steps(10);
@keyframes loadingWhite {
background-position:0 0;
background-position:-500rpx 0;
&/code&&/pre&&/div&&h3&&b&写在最后&/b&&/h3&&ol&&li&&p&微信小程序集成了很多原生APP的组件，从体验和页面流畅度来说，都会比HTML5要优秀很多。&/p&&/li&&li&&p&微信小程序相对于HTML5开发来说，除了熟悉API需要学习成本之外，开发难度指数3颗星，还是很容易上手的。&/p&&/li&&li&&p&开发者工具、组件和API目前刚刚对外公测，还不算太成熟，里面还有很多坑需要开发者去填。&/p&&/li&&/ol&&p&文章篇幅有限，在这里只能简单从UI开发角度介绍下小程序的开发经验。有关小程序的更多API，可以查阅小程序开发文档 。 &/p&&p&由于开发工具一直在持续更新，文章中可能会有不准确或者更新不及时的地方，还请谅解。 &/p&&p&——————————————————————————————————————————————————————————————————————————————————&/p&&p&获取更多小程序尖货，请访问：&a href=&https://link.zhihu.com/?target=http%3A//www.wxapp-union.com& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信小程序联盟&/a&，或关注微信小程序联盟微信号。&/p&&p&&a href=&https://link.zhihu.com/?target=http%3A//weixin.qq.com/r/Nzjq8mzEtjHJrSiR920l& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&weixin.qq.com/r/Nzjq8mz&/span&&span class=&invisible&&EtjHJrSiR920l&/span&&span class=&ellipsis&&&/span&&/a& (二维码自动识别)&/p&
来源：作者：王婷婷本文由广研微信小程序的开发团队所做，作者为UI开发工程师王婷婷。本文从UI开发的角度，结合OM小程序的案例，剖析小程序的组件用法与传统HTML5标签的区别。 小程序与传统HTML5的区别小程…
&blockquote&&p&Programming make the world a better place, anyone can be anything&/p&&/blockquote&&h2&前言&/h2&&p&微信公众号2012年正式推出，至今已走过5个年头，在这五年的时间内，很多微信第三方企业迅速崛起，典型代表有微盟、微客来这些以公众号托管为主的企业。而今天我想跟大家聊的是微信公众号开发这个领域的一些事情。&/p&&h2&经历&/h2&&p&我是2013年末接触微信开发的，那时候还在上学，有朋友说想在学校搞一个微信公众号卖水果，于是我开始接触微信开发。最开始是看青龙老贼的教程入门的，后来接触到了github上面一个非常流行的类库wechat-php-sdk，再后来接触到了weiphp、微擎这样的开发框架，再到现在自己写的框架豆信，在微信开发这个领域已经走过了3个年头，期间开发过微商城、微餐饮、微投票等多款微信端应用，对于微信官方提供的接口算得上是滚瓜烂熟。&/p&&h2&产品&/h2&&p&最近这段时间，微信小程序（应用号）被炒的非常火，很多企业和个人都等着在下一个风口起飞，渐渐的就有些人不那么看好微信公众号了。作为一个纯技术爱好者，我不敢对公众号或者是小程序未来几年的市场情况和流行度做一个评价。单从开发的角度，给想接触微信开发的朋友介绍几款产品。&/p&&ul&&li&wechat-php-sdk&br&wechat-php-sdk是一个专门用于微信开发的类库，在github上面开源，有3000+的star，市面上很多与微信公众号相关的产品都有用到这个类库，其对微信官方提供的接口进行了高度封装，集成此类库后，在自己的应用中只需要简单的配置即可调用微信官方开放的诸多功能。对于产品形态不过度依赖微信，只想在自己的产品中简单集成微信端功能的开发者来说，可以选择此类库进行开发，此类库支持composer依赖安装。&/li&&li&weiphp&br&在搜索引擎上搜索微信开发框架，排在前面的几个产品中便有weiphp。weiphp是一个专门用于微信公众号开发的CMF系统（内容管理框架），基于onethink开发，支持通过插件来扩展功能，目前最新的版本是3.0。我是2014年夏天接触到weiphp的，花了差不多一年的时间，成为了weiphp社区最活跃的开发者，写了几篇《分分钟上手weiphp插件开发》系列教程，还录制过几个weiphp插件开发的视频。后来因为不是很喜欢weiphp框架的一些特性，便退出了weiphp的圈子。总的来说，weiphp的优点是上手容易、扩展方便、商业友好，自己改一改拿来给客户做做微信外包还是很方便的。缺点就是社区不够活跃，官方支持不够，产品迭代速度太慢。&/li&&li&微擎&br&在我看来，微擎可以算得上是目前国内最成熟的微信开发框架，功能非常完善，开发者众多，社区活跃，官方应用商城拥有3000+的扩展功能，诸多的商业用户支持。我最开始接触微擎也是在2014年夏天，那时候在微擎与weiphp之间，我选择了后者，原因是因为微擎的开发文档内容太多，看起来有点摸不着头脑，觉得入门可能比较困难，便放弃了。后来看到微擎逐渐把开发者分成机制完善，很多做微擎的开发者在微擎的平台上获得了不菲的收入，心里多少感觉有点遗憾。对于想要选择微擎进行开发的开发者来说，有几点是需要考虑的。首先是微擎的框架相比于thinkphp、YII这种的主流框架来说，上手不是特别容易。再就是微擎的功能虽多，但是对于喜欢小而美，不需要集成过多微信端功能的产品来说，过多的封装显得不是很灵活。第三点，也是最重要的一点，安装微擎框架后需要连接云服务才能更新框架，并且需要购买商业版才能去除版权，对于喜欢商业友好，不愿意花钱买商业版的开发者来说，微擎可能不是最好的选择。&/li&&li&豆信&br&豆信是一款专注于微信公众号开发的框架，基于thinkphp3.2.3开发而成，自主研发的插件扩展机制、模板视图工具使得豆信可以用来快速的集成微信公众号常用的功能。豆信官网的宣传语是“从未见过哪一款开发框架，如此这般简洁优雅”，虽然说的有点夸张，但是通读豆信源代码，可以在很多地方看到框架设计的优雅之处：核心源代码压缩后仅2.4M，真正的小而美；使用豆信封装的视图工具，20行以内的代码可以实现一个功能后台的增删改查；使用豆信封装的微信接口，三行代码可以搞定微信支付；高度集成wechat-php-sdk，能够灵活的处理微信端的各类消息；代码极其注重工整性，处处体现细节。豆信是一款商业友好的框架，基于apache2.0协议在github开源，官方提供社区支持与扩展服务。&/li&&/ul&&blockquote&&p&顺便提一句，豆信是我一个人独立开发的产品，虽然再说下去有王婆卖瓜的嫌疑，但是下面我还是想用几张图来简单介绍一下这一款优雅的微信开发框架。&/p&&ul&&li&&p&简洁&br&豆信是一个非常简洁的开源框架，对业务逻辑进行了高度封装，自主研发的视图构建工具大大简化了模板布局的工作，豆信核心文件的代码体积压缩后仅2.4M，功能完整性丝毫不亚于市面上已有的体积为几十M的框架。&figure&&img src=&https://pic1.zhimg.com/v2-6f875fdf7b92f_b.png& data-rawwidth=&359& data-rawheight=&188& class=&content_image& width=&359&&&/figure&&/p&&/li&&li&&p&高效&br&豆信引入了github上最为流行的wechat-php-sdk，对微信接口进行了高度封装，系统内核封装的微信交互Api能够对微信端发送的文本、语音、图片、位置、链接、短视频等类型的消息进行高效的处理，同时能够通过后台配置把用户关注、取消关注、点击菜单、上报地理位置、扫描带参数二维码等事件型消息分发到插件进行处理，这让微信交互处理变得非常灵活。&figure&&img src=&https://pic2.zhimg.com/v2-a12bee2eac9cbf4fdcbca1_b.png& data-rawwidth=&1470& data-rawheight=&866& class=&origin_image zh-lightbox-thumb& width=&1470& data-original=&https://pic2.zhimg.com/v2-a12bee2eac9cbf4fdcbca1_r.jpg&&&/figure&&br&&/p&&/li&&li&&p&优雅&br&豆信是一个非常优雅的开发框架，非常注重代码的工整性、可复用性，和功能的实用性、易扩展性。通读豆信源代码，在很多地方都能看到注重细节的体现。&figure&&img src=&https://pic4.zhimg.com/v2-f8b492a941d5542ead314f_b.png& data-rawwidth=&1438& data-rawheight=&651& class=&origin_image zh-lightbox-thumb& width=&1438& data-original=&https://pic4.zhimg.com/v2-f8b492a941d5542ead314f_r.jpg&&&/figure&&/p&&/li&&li&&p&易扩展&br&豆信自主研发了一套插件扩展机制，可以把微信消息分发到插件进行处理，在插件中可以获取粉丝信息、自定义分享、发起微信支付、调用模板通知等。通过插件来扩展功能变得非常容易。&figure&&img src=&https://pic1.zhimg.com/v2-e94fbd4cc29a3d1f3ad7c8_b.png& data-rawwidth=&1519& data-rawheight=&770& class=&origin_image zh-lightbox-thumb& width=&1519& data-original=&https://pic1.zhimg.com/v2-e94fbd4cc29a3d1f3ad7c8_r.jpg&&&/figure&&/p&&/li&&li&&p&社区支持&br&为了让框架能够更加快速良好的发展，豆信提供了社区支持：&a href=&http://link.zhihu.com/?target=http%3A//bbs.douchat.cc/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&豆信社区-一个专注于微信公众号开发的交流社区&/a& 在豆信社区可看到豆信框架的更新动态、发布的扩展功能，也可以在这里提交豆信使用过程中发现的BUG、一些功能建议，还能跟所有的社区成员一起讨论、交流、分享你在开发或使用过程中的心得与感悟。&figure&&img src=&https://pic3.zhimg.com/v2-eee20730aa52_b.png& data-rawwidth=&1041& data-rawheight=&1002& class=&origin_image zh-lightbox-thumb& width=&1041& data-original=&https://pic3.zhimg.com/v2-eee20730aa52_r.jpg&&&/figure&扩展服务&br&豆信云商城提供多款官方/开发者发布的插件，在这里你可以找到你想要的资源。&figure&&img src=&https://pic2.zhimg.com/v2-ebaeba7bc4e3_b.png& data-rawwidth=&1364& data-rawheight=&459& class=&origin_image zh-lightbox-thumb& width=&1364& data-original=&https://pic2.zhimg.com/v2-ebaeba7bc4e3_r.jpg&&&/figure&&/p&&/li&&/ul&&/blockquote&&h2&写在最后&/h2&&p&这篇文章结合本人这几年的微信开发经历，给大家简单介绍了几款常用的微信开发框架，最后用了很大的篇幅来详细介绍了豆信这一款产品，希望不会给大家造成我是来打广告的这样的误解。如果你是一个微信开发爱好者，欢迎对文中提到的内容进行补充，如果有表述不到位的地方，也欢迎批评指正。&/p&
Programming make the world a better place, anyone can be anything前言微信公众号2012年正式推出，至今已走过5个年头，在这五年的时间内，很多微信第三方企业迅速崛起，典型代表有微盟、微客来这些以公众号托管为主的企业。而今天我想跟大家聊的是微信公…
&p&-------------------
补充修正 -------------------&/p&&p&发现之前提到的工具 “百度短链接”网页已经被屏蔽，所以给大家说一下，之后用“新浪短链接”就好。具体的就放在下面回答了。&/p&&br&&p&------------------- 看正文-----------------------&/p&&br&&p&这不是一篇纯工具的文章，还配有一些使用感受以及小技巧。分了5个类型，详细列举了14个实用工具。建议看看文字解说，都是亲身体验过后拿来分享的。&/p&&br&&p&如果觉得有帮助，欢迎点赞+分享，指不定还陆续有别的呢。&/p&&br&&b&&u&一、5个绝佳辅助类&/u&&/b&&br&&p&&strong&1、搜起来：搜狗微信搜索&/strong&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//weixin.sogou.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&搜狗微信搜索_订阅号及文章内容独家收录，一搜即达&/a&&/p&&br&&figure&&img src=&https://pic1.zhimg.com/84fe1af3afeb89a3e12a0_b.png& data-rawwidth=&900& data-rawheight=&412& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic1.zhimg.com/84fe1af3afeb89a3e12a0_r.png&&&/figure&&br&&br&&p&这个官方的东西真心好用，但是肯定有人不知道。他可以搜微信公众号的信息以及所发布的文章信息。&/p&&br&&p&举个例子，假装我们都有很高的版权观，尊重原创，想要转载一篇文章，就想着放上他公众号的ID、名称（这两个关注就可见）、如果再附上对方公众号二维码是不是更有诚意。&/p&&br&&p&&strong&但是恰好文章中没有留二维码，你该怎么办？&/strong&看下图&/p&&br&&br&&p&&a href=&//link.zhihu.com/?target=http%3A//weixin.qq.com/r/6kjz-ITERbo6h5Wfnx3O& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&weixin.qq.com/r/6kjz-IT&/span&&span class=&invisible&&ERbo6h5Wfnx3O&/span&&span class=&ellipsis&&&/span&&/a& (二维码自动识别)&/p&&b&『日新注』&/b&&br&微信搜索截取的二维码有时效性，初步估算是6小时左右。也就是说，这个二维码一段时间后再扫码会显示『二维码失效』。这个bug还没解决，保守起见，如果想要对方二维码长期有效，那就找公众号运营者索取或者翻看之前的文章，&br&&br&&p&&strong&2、问卷调查：金数据&/strong&&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//jinshuju.net/columbus& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&金数据 - 免费好用的表单设计和数据收集分享工具&/a&&br&&/p&&br&&figure&&img src=&https://pic1.zhimg.com/7c765d0d9a465cfdb668f4_b.png& data-rawwidth=&900& data-rawheight=&427& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic1.zhimg.com/7c765d0d9a465cfdb668f4_r.png&&&/figure&&br&&br&&p&调查问卷终归会用到。金数据这个实测很好用，基础功能很强大，问卷也可设计美观。从前期的问题编辑到后期的数据整理都很便捷。&/p&&br&&p&昨天他们更新版本3.0，增加了&strong&数据批量处理、优化表单编辑、 不限表单数量&/strong&（曾经我都是在同一个表单收集数据，这次用时重新编辑问题，删除上次的数据）&br&&/p&&br&&p&同类型的还有：&/p&&br&&ul&&li&&p&表单大师 &a href=&//link.zhihu.com/?target=http%3A//www.jsform.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&表单大师,专业的表单设计和数据收集管理平台&/a&&/p&&/li&&li&&p&问卷网 &a href=&//link.zhihu.com/?target=http%3A//www.wenjuan.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&问卷网_领先的网络调查平台,问卷调查,市场调查,网络调查,表单设计&/a&&/p&&/li&&li&&p&麦客 &a href=&//link.zhihu.com/?target=http%3A//www.mikecrm.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&麦客 - 简单好用的表单和联系人管理工具&/a&&/p&&/li&&/ul&&br&&p&&strong&3、超实用：新浪短网址（百度短网址已被封）&/strong&&/p&
&p&&a href=&//link.zhihu.com/?target=http%3A//dwz.wailian.work/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&新浪短网址 短网址生成 网址缩短服务 - 短网址&/a&&/p&&br&&figure&&img src=&https://pic1.zhimg.com/v2-64b7c321e0ca991ed20e4_b.png& data-rawwidth=&2256& data-rawheight=&1434& class=&origin_image zh-lightbox-thumb& width=&2256& data-original=&https://pic1.zhimg.com/v2-64b7c321e0ca991ed20e4_r.png&&&/figure&&br&&p&这个超实用，而且立即见效。你在群里发个链接，半屏幕过去了，那个体验真是太恶心了。&br&&/p&&br&&p&曾经有用户群发那种类似支持参加XX活动的推广（广告），文字后是很长的报名链接。看到后，&strong&我的强迫症没忍住，就帮他改成短连接直接发回去了。&/strong&他很吃惊，随后告诉他这个方法后，给我发了几十块钱红包（意外之财）。&/p&&br&&p&&strong&4、巧用：草料二维码&/strong&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//cli.im/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&草料二维码生成器&/a&&br&&/p&&br&&p&这里是支持
文字，就是你可以把一段表白话生成二维码送给XX，但是文字多了，二维码就很密集，对于密集恐惧症来说很难受。
网址也是一样，链接过长也很恶心 (二维码自动识别)&/p&&br&&br&&p&二维码越来越好用，不论是分享个名片还是公众号都是他。其实它就是将一段地址链接改成二维码，安全系数上去了。&/p&&br&&p&如果是插坐长期用户就会发现，我们在推文中推荐阅读文章的时候，都是放一个二维码，写着“长按二维码，阅读原文”，其实就是&strong&将原文链接转成二维码&/strong&。&/p&&br&&p&至于我为啥想到这么做，因为没有原创标，不能给文本设置超链接，又不想授权给第三方编辑器（安全考虑）。&/p&&br&&ul&&li&&p&&strong&强调两个小技巧：&/strong&&/p&&/li&&/ul&&br&&p&1）文字or链接过长，二维码（里面的小黑块）就越密集，阅读体验实在太差（密集恐惧症患者）。所以这时候，你需要先把长链接用&strong&“百度短网址”&/strong&缩短，用缩短后的链接&strong&去生成二维码&/strong&。&br&&/p&&br&&p&&a href=&//link.zhihu.com/?target=http%3A//dwz.cn/2gzyyf& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&dwz.cn/2gzyyf&/span&&span class=&invisible&&&/span&&/a& (二维码自动识别)&/p&&br&&br&&p&2）二维码的大小可调，如果是用在微信文章中，在手机中阅读，大小建议设置在150-200之间。&/p&&br&&p&插坐学院统一用的二维码尺寸是150*150（你用搜狗微信搜索公众号，其显示的二维码大小也是&strong&150*150&/strong&左右），在Iphone6手机上显示效果大概是&strong&屏幕宽度的三分之一&/strong&，居中后，效果还是不错。&/p&&br&&p&&strong&注意：&/strong&缩小二维码尺寸，也会将二维码变“密集”，这个自己把握和选择。&/p&&br&&p&同类型还有：&/p&&br&&ul&&li&&p&wwei &a href=&//link.zhihu.com/?target=http%3A//www.wwei.cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微微在线二维码生成器&/a&&/p&&/li&&li&&p&联图
&a href=&//link.zhihu.com/?target=http%3A//www.liantu.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在线二维码图片生成器&/a&&/p&&/li&&li&&p&二维工坊 &a href=&//link.zhihu.com/?target=http%3A//www.2weima.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&二维工坊：二维码营销&/a&&/p&&/li&&/ul&&br&&p&&strong&5、创客贴&/strong&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.chuangkit.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&创客贴(CHUANGKIT)|简单好用的在线平面设计工具&/a&&br&&/p&&br&&figure&&img src=&https://pic4.zhimg.com/cdc6b32ebfec38b_b.png& data-rawwidth=&900& data-rawheight=&452& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic4.zhimg.com/cdc6b32ebfec38b_r.png&&&/figure&&br&&br&&p&这个高端洋气了，是个简单做海报的好工具。&strong&PPT、海报、微信朋友圈封面、邀请函、社交图片都可以搞定。&/strong&模板也够丰富。注册后才能将作品下载和分享，花点时间进去，做出高端设计是没问题的。&/p&&br&&b&&u&二、3个好用编辑器&/u&&/b&&br&&p&编辑器这个实在是太常用了，我说的话可能较多。其实现在市面上编辑器很多，且标题、图文等模板几乎都一样。&/p&&br&&p&曾经看到一篇文章罗列了20个编辑器，而且，没有一点说明或者使用感受，还说是走心推荐，也是无语。今天编辑器只推荐3个，个人常用的。&/p&&br&&p&&strong&1、有特殊功能的——135&/strong&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.135editor.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&135编辑器官网&/a&&br&&/p&&br&&figure&&img src=&https://pic2.zhimg.com/1d9ce29b32712dbae4f5cd_b.png& data-rawwidth=&900& data-rawheight=&424& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic2.zhimg.com/1d9ce29b32712dbae4f5cd_r.png&&&/figure&&br&&br&&p&在微信后台彻底大改版之前，135是为数不多的有15号字体的编辑器，所以是我的最爱。很多人推荐字号的时候，都是这一句&strong&“14-16号字体是阅读最舒适的”，但是几乎只有1%的人选择用15号。&/strong&&/p&&br&&p&说两个他家比较出出彩的功能：&strong&“破原创标”+“定时群发”&/strong&，前提是认证的公号授权给135。（这两个我本人没使用过，没法说体验）&br&&/p&&br&&p&135的公众号时常会推送一些编辑排版用的上的小技巧，当然前提是在自家编辑器上。最近也在频繁迭代中，相信会越来越好（毕竟曾是被黑过网站的，说明在同行中是有竞争力的）&/p&&p&&strong&2、教你知识的——i排版&/strong&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.ipaiban.com/%23& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&i排版-微信图文编辑器&/a&&br&&/p&&br&&figure&&img src=&https://pic2.zhimg.com/a26d64b3cd_b.png& data-rawwidth=&900& data-rawheight=&459& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic2.zhimg.com/a26d64b3cd_r.png&&&/figure&&br&&br&&p&整体风格轻松明快，页面也比较干净。先吐槽一句：以前超爱乱格式。（三藏老师莫打我）最近不断完善，隔几天会有提醒“XX-XX后台维护升级……”&/p&&br&&p&其实是真有效果的，&strong&功能也越来越多&/strong&，比如前两天新添加的“短连接”（类似上面提到的百度短连接）&/p&&br&&p&i排版的团队也很好，经常会出一些&strong&微信实用教程&/strong&，而且对微信公众号这个“硬件产品”投入很多精力研究。强烈推荐。&/p&&br&&p&&strong&3、容易上手的——秀米&/strong&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//xiumi.us/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&秀米_图文排版&/a&&br&&/p&&br&&figure&&img src=&https://pic4.zhimg.com/b015faec8d78acd42ecb_b.png& data-rawwidth=&900& data-rawheight=&456& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&https://pic4.zhimg.com/b015faec8d78acd42ecb_r.png&&&/figure&&br&&br&&p&很美观，有点小清新。不论是他们自己主页还是编辑页。查阅修改之前保存的草稿这一步，要比其他几个体验好。讲真，感觉相比其他两个，这家的设计