Idea！ 小程序包体积一直是困扰小程序业务扩展的重要卡点，整个⼩程序所有分包⼤⼩不超过 20M，单个分包/主包大小不能超过2M。小程序包体积优化成了老生常谈的话题。 其中对样式文件体积的压缩除了提取公共样式，样式合并简写，减少选择器层层嵌套等方法，对于经过长期迭代的小程序无效的样式类也占了很大的体积。 不知道大家有没有这样的习惯，功能更新迭代中我们更多的关注了html和js逻辑，对css样式经常是累加的过程，没有过多关注已经不用的样式类。项目经过长期迭代后无效样式在小程序包中的体积已经不可忽视了。 怎么办？刚开始我用最笨的方法，拿每个css的类名全局搜索有没有在用。一个页面几百行的css，筛选了一天后只减少了不到10kb的体积…… 如果能有段脚本帮我一键删除岂不省出了摸鱼的时间！ Action！ 说干就干！ 小程序中主要的样式选择器我用的都是类名，第一版就只关注类名，删除wxss中无效的样式类。这里只介绍工具的原理，大家可以动手操作起来！ 怎么知道wxss中哪些是无效的样式？分为两步走，首先要知道wxml中都有哪些类名，再检查wxss中类名是否存在wxml中。 一、遍历wxml筛选类名 考虑到子组件可能应用父组件的样式，先读取组件的json文件，获取使用到的自定义组件及组件路径构造json，key=组件名，value=组件路径； [代码]{ applywords:'../components/applyWords/index' barcard:'../components/barcard/barcard' headerimgcard:'../../../components/headerimgcard/index' } [代码] 考虑到组件中可能用到了template模板也应用了父组件样式，先遍历一遍wxml的每一行，出现<import>导入模板和<template name=‘template’>定义模板的，先读取模板内容筛选类名，构造json，key=模板名，value=模板类名数组； [代码] { WxEmoView: [ [ 'wxParse-hide' ], [ 'WxEmojiView', 'wxParse-inline' ], [ 'wxEmoji' ] ], wxParse: [], wxParseVideo: [ [ 'wrap-video-img' ], [ 'native-video' ] ], wxParseImg: [ [ 'wxParse' ] ] } [代码] 再遍历wxml的每一行，对于有class属性的行，将这一行的class筛选出构造数组； [代码] [ 'page-container', 'IphoneX' ] [代码] 将每一行的class数组push到另一个页面级的数组中，最后整个wxml页面将得到一个二维的class数组； [代码][ [ 'page-container', 'IphoneX' ], [ 'list-empty-spread', 'flex' ], ... [ 'loadMore', 'detail', 'title' ], [ 'loadings' ], ] [代码] 遍历到使用组件的行，用第一步获取到的组件路径找到组件的wxml，遍历筛选每一行的类名返回一个二维数组；concat拼接到页面级的数组中； 遍历到使用模板的行<template is=“templateName”/>时，用第二步获取到的类名concat拼接到页面级的数组中 最终一个wxml页面会得到一个二维的类名数组，如第四步的示例； 二、遍历wxss的每一行，与wxml获取到的类名做比对，筛选出无效的样式类 将wxml获取到的二维class数组flat()拉平成一维数组的classList; [代码][ 'page-container', 'IphoneX', ... 'loadMore', 'detail', 'title', 'loadings', ] [代码] 遍历wxss的每一行，遇到选择器行，判断选择器是否有效；注意选择器有选择器组的情况（.a .b, .c .d），先对选择器行现根据逗号切分成数组，再遍历数组根据空格再切分；最后得到一个二维数组; [代码]//将 ".detail-value .item-header-time,.item-header.spread-arrows, .mine-invited-tag .mine-invited-via {" //解析为 [ [ '.detail-value', '.item-header-time' ], [ '.item-header.spread-arrows' ], [ '.mine-invited-tag', '.mine-invited-via' ] ] [代码] 遍历这个二维数组与classList对比，如果其中一个类名不存在，则选择器组就无效，删除这个选择器组，如果整行的选择器组都无效，则该样式块就无效，删除整个样式块； 将要删除样式模块备份； Tips！ 上面只介绍了主体的流程，其中很多要考虑的细节： 在json文件中"usingComponents"声明的组件名可能是驼峰式的，在使用组件时组件名可能是-分割的； 对于template模板，可能使用模板在前，声明模板在后，可能使用import导入的模板，声明模板内可能有引用了另外的模板； 代码如果没有被格式化或格式不规范，各种匹配的情况更多； class属性中的动态类名的情况也要取到class=“loadMore {{ test ? ‘detail’ : ‘title’ }}”，除非动态类名是变量的情况就忽略不记； wxml和wxss中的注释行要被忽略； 样式选择器还有id选择器，标签选择器，复合选择器，伪类选择器，子级选择器，兄弟选择器等情况要处理； 之所以要备份删除的样式类是因为对于变量定义的动态类名或修改的第三方组件的样式类因在wxml中检查不到类名会被误删，所以还需要人工检查一遍是否需要恢复。 我这里没有检查组件是否是样式隔离的，默认没有样式隔离。 最后，将整个流程封装，将一个文件夹地址传入命令行，就可以将文件夹下所有组件中无效css秒删。 Finally！ 工具还有很多考虑不全待完善的地方，可能实现思路也不够简洁，欢迎大家一起探讨！有好的想法下方留言。

6 月 5 日，爱范儿旗下品牌「未来社」（大湾区科技沙龙中心、汇聚热爱潮流生活方式青年的时髦发生地）举办了首场「在家版市集」，聚集了众多热爱生活的优秀创造者，通过直播方式介绍他们创造的作品，同时借助直播间的电商能力，让同样热爱生活的小伙伴可以直达商品购买页面，购买心仪的作品。 周末市集是未来社提供的业态之一，基于线下的人流，为商家提供一个商品交易场所。由于疫情的影响、空间与时间上的限制，未来社开始尝试线上新模式——「在家版市集」，将线下市集搬到线上来，给不能出门或距离较远的朋友提供了一个不一样的逛市集体验。 此外，未来社还通过社群形式连接创造者，让更多有作品的创造者一起加入市集和分享自己的作品。 未来社借助糖纸小程序一站式完成市集活动的线上宣传、直播卖货、用户交流，以更高的效率获得更佳的活动效果。今天我们将基于未来社的社群连接方式，聊一聊「如何让小程序用户快速加入群聊，实现更高效的用户运营」。 未来社线上市集的用户体验全流程 未来社的线上市集是在糖纸小程序群空间中进行活动展示和内容沉淀的，用户可以在小程序中参与活动、参与讨论、参与分享、加入群聊。整体的流程如下： 用户在小程序上生成专属海报，分享给朋友或转发至朋友圈，邀请好友参与活动，好友只需扫描海报上的二维码，即可直达小程序活动页。 通过点击活动上方的「可爱直播 1 群」，即可快速加入群聊。 群成员互相分享直播卡片、小程序卡片，新成员即可快速进入直播间和商城。 直播画面插入加群二维码，也能让观众扫码加入到社群中。 未来社的线上市集为用户提供了一个非常快捷方便的体验流程。对于工作人员，也可以将时间和精力放在直播服务和用户咨询服务中，无需重复性的引导和邀请用户进群，极大的提高了整体的运营效率。 [图片] [图片] 如何在小程序中放置永不失效的二维码，让用户一键加群 小程序用完即走的特性，给企业和用户提供了一个更轻便的服务体验，但对于企业来说，需要留住小程序用户，为其持续提供服务，才能提高用户黏性和用户转化率。 通过企业个人微信号和微信群，将用户引流到私域流量池上，是众多企业选择的运营方式之一，以往的实现方式有两种： 方式一：在小程序中直接插入二维码，用户需要截图后再使用微信扫一扫功能，添加客服微信或进入微信群； 方式二：在小程序中插入加群按钮，用户点击按钮跳转到公众号文章中，需要用户再长按识别二维码，添加客服微信或进入微信群。 [图片] 虽然最终都能让用户添加客服或者进入群聊，但过程太过于繁杂，容易导致用户失去耐心而选择放弃。 在微信小程序近期更新的版本中，一个重磅功能解决了以上难题：**小程序支持用户长按识别二维码，直接跳转到微信好友、微信群、企业微信好友、企业微信群。**详见《微信内测小程序重磅功能！直接跳转微信群、企业微信，私域引流利器？》 这个功能极大地简化了添加微信客服和进入微信群的操作步骤，也为运营人员在日后的用户引流与转化上提供了更大的发挥空间，是无数小程序运营者的福音。 但目前该功能还在内测中，暂未对所有开发者开放，今天我们将介绍另一种加群方式，即通过微信客服消息功能让小程序用户快速进群。 第一步，创建进群二维码 如果你需要让用户先添加客服，再通过客服邀请用户进群，那么你可以在「知晓社群精灵 - 渠道活码」中创建专属的客服二维码，并设置相应的欢迎语和加群二维码，当用户扫码添加客服后，不仅可以更好的了解平台、活动等相关信息，也能通过客服的自动回复快速加入群聊。 [图片] 在小程序中配置客服二维码，有利于企业利用微信客服号中的一对一服务、群发消息、朋友圈等功能，为用户提供更好的服务。如果你希望简化用户的操作流程，那么只需创建群二维码即可。 在「企业微信后台 - 客户联系 - 加客户」中新建加入群聊，配置群聊信息和入群欢迎语。 [图片] [图片] Ps：通过该方式创建的加群二维码永不过期，且群满 200 人会自动建新群。 第二步，配置客服消息 在「知晓社群精灵 - 小程序引流」中点击「开通客服消息」，如果你的小程序未授权到知晓云服务中，需先完成授权操作，按步骤完成或参考开发文档。 在「知晓云控制台 - 对应的企业和应用 - 微信 - 客服消息 - 智能回复」中设置相应的关键词回复，将进群二维码放置到客服消息中，当用户点击小程序中的进群按钮时，在客服消息页面弹出加群二维码，从而引导用户快速进群。详见开发文档。 扫描下方小程序卡片，立即体验在客服消息系统中加进群聊（如果你对市集感兴趣，还可以关注未来社每周六的直播活动～） [图片] 关于让小程序用户快速加入群聊的实现方式我们就介绍到这里，如果你有任何疑问和需求，可随时向小晓云留言。

一、服务商表现与权益专区上线通知“小程序服务商助手”小程序新增了【表现与权益专区】，平台对服务商在生态的表现进行定期画像，服务商的权益将会根据表现科学合理分配。服务商可根据自己在各个指标的表现，进行针对性地分析和提升。详情请参考： https://developers.weixin.qq.com/community/minihome/doc/000aecf70acc1018755bbaf1651401?blockType=99 二、微信第三方平台若干项能力开放与优化第三方平台近期新增了多个第三方平台权限集，提升了绑定开发小程序的数量，以及优化了多个接口能力，详情请参考： https://mp.weixin.qq.com/s/k8rSqh2Vjtjvi876S-nqRg 三、小程序风险用户扫描功能上线 为提高微信开放平台生态安全性，针对小程序各应用场景中可能存在的恶意注册、营销作弊等黑产风险和安全问题，平台在小程序开发管理功能上线了风险用户扫描接口，协助开发者保障小程序正常安全运营。详情请参考： https://mp.weixin.qq.com/s/NquweFW_0iym_Jcke7pTcQ 四、小程序直播相关能力更新 小程序直播新增长期订阅群发接口、升级推流设备直播能力等，详情请参考： https://developers.weixin.qq.com/community/minihome/list/1216387783892418561/2 五、服务平台小程序开发服务专区未更新服务下架通知 由于服务平台改版及服务更新，服务商需将服务重新编辑并提交审核后方可在小程序开发服务专区进行服务展示。12月4日后，未重新提审的服务将无法在服务平台正常展示。详情请参考： https://developers.weixin.qq.com/community/develop/article/doc/0008a2c93acc18ea855b1fce951c13 六、小程序类目资质更新 [图片] 详情请参考小程序开放的服务类目 第三方快速创建的小程序可选择的类目参考“第三方平台-快速创建小程序接口-类目参考表”： https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/Mini_Programs/Fast_Registration_Interface_document.html