三步瘦身，做名副其实的「小程序」

   <p>小程序发布后，相信很多人已经蠢蠢欲动，心急的小伙伴更是已经操起小程序开发工具撸了起来。至于小程序是什么东西，在这几天朋友圈的狂轰乱炸后相信大家已经比较清楚，不清楚的可以点击</p>    <p><a href="/misc/goto?guid=4959735036718119532" rel="nofollow,noindex">https://mp.weixin.qq.com/cgi-...</a></p>    <p>但小程序作为新兴的东西，开发中一定会遇到一些坑，为了造福广大开发者，腾讯云为小程序量身打造了相关解决方案，今天就手把手带着大家使用微信小程序解决方案之一：瘦身方案WeCOS</p>    <p><a href="/misc/goto?guid=4959735036808987239" rel="nofollow,noindex">https://github.com/tencentyun...</a></p>    <h2>为什么我们需要 WeCOS ？</h2>    <p>为了提升小程序体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传失败。</p>    <p>上面这段话是在小程序官方文档里给出的，每个项目不能超过 1MB，超过 1MB 会导致项目文件在上传的时候上传失败，如图 1。在我们平时的开发中，通常会引用大量本地图片资源。而大家都知道，图片就是资源占用的元凶，它随时能让包的大小超过10MB、100MB。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e822d658de9e5f45114120343c2bfa23.png"></p>    <p>图1. 开发者工具在上传时不允许代码包超过1MB</p>    <p>常见的解决方法是：把图片传到图床进行存储，删掉本地图片，然后替换图片引用的地址。但是目前小程序开发者工具的功能还比较单一，无法批量替换。用户要么需要使用其他编辑器替换项目文件中图片的引用地址为线上地址，要么手动去替换。但这两种方式对于开发者而言都比较繁琐，在修改引用的同时还需要小心翼翼，因为在大量操作的过程中难免会引入其他问题。</p>    <p>为此，腾讯云官方提出了该问题的解决方案：WeCOS。</p>    <h2>什么是 WeCOS 呢？</h2>    <p>WeCOS 是一个本地命令行工具（也提供 npm 包），主要用于帮助开发者解决小程序包超过大小限制的问题。WeCOS 不仅支持自动将小程序项目的图片资源上传到配置好的腾讯云对象存储服务(COS)上存储，同时，还可以自动替换项目代码中本地资源引用地址为线上 URL，并移除项目目录中的图片资源。为小程序项目包瘦身，一键解决项目包超过 1MB 的烦恼。</p>    <h2>开始使用</h2>    <p>我们有一个开发好的小程序开发目录「app」，目录大小为 10M。目录下有大量图片且代码中有对图片资源的引用。为了能够上传并正常运行项目代码，下面来示范如何使用腾讯云 WeCOS 来解决项目包过大的问题。项目目录如图 2。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7b5cfba81d04beac576f48dd6e6a0a08.png"></p>    <p>图2. 待处理的开发目录</p>    <p>根据 WeCOS 的使用指引，只需三步，使用十分简单。</p>    <h3>第一步，前期准备</h3>    <p>注册腾讯云账号，开通 COS 并创建 Bucket。</p>    <p>在本机上安装 Node.js 的环境。</p>    <h3>第二步，安装 WeCOS 并修改配置文件</h3>    <p>在命令行中使用 node.js 自带的 npm 工具，输入 npm install wecos -g ，等待完成安装。-g 表示全局安装，这样才能全局调用 wecos 命令，安装如图 3。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6db41655e225b17653e84cc11138b7b1.png"></p>    <p>图3. 命令行输入安装wecos</p>    <p>根据指引，在与开发目录 app 同目录下创建一个 wecos.config.json 配置文件，在配置里填写基本的配置信息。配置文件如图 4。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/32588a809333c9f736cb1b10a83c7291.png"></p>    <p>图4. 同目录下创建wecos.config.json文件</p>    <p>wecos.config.json 里填写了最基本的配置项，如图 5。</p>    <p>其中，</p>    <ul>     <li> <p>appDir 指定了小程序开发目录。</p> </li>     <li> <p>appid 为腾讯云账号的 appid。</p> </li>     <li> <p>bucketname 是为存储图片创建的 bucket 的名称，这里是名为「weixintest」的bucket。</p> </li>     <li> <p>folder 可以指定到 bucket 下的某个目录，本文指定到「/wxtest」目录下。</p> </li>     <li> <p>region 是指定上传到 COS 的指定地区，这里指定为「tj」，即天津。目前 COS 支持天津、上海、广州。</p> </li>     <li> <p>secret_key、secret_id 是账户密钥，用户可以自行到腾讯云 COS 控制台上获取。</p> </li>    </ul>    <p>以上信息指定了开发目录以及图片要上传到的 COS 的地址，完成这些配置，基本上已经完工。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6001e53105a4f820a39cf974644f4c0e.png"></p>    <p>图5. wecos.config.json的配置</p>    <h3>第三步，运行程序</h3>    <p>最后，我们在命令行中执行 wecos 命令，如图 6。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/0b8d1a25cadfbfbdeb9d37184de567bb.png"></p>    <p>图6. 执行wecos命令</p>    <p>可以看到，命令行显示项目中的三个图片上传成功。翻看项目目录，发现图片已经被删除，代码中的图片引用也被换成了线上的地址，项目包一下子小了。同时，WeCOS 很贴心的在开发项目外生成了个 wecos_backup 目录，来保存原来的图片作为备份。除此之外，WeCOS 默认启用监听模式，这是为了让开发过程中无感知，当我们不再进行项目开发，停止运行 WeCOS 即可。目录如图 7。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d234bfb1b066b89500da4bb81b12acc8.png"></p>    <p>图7. WeCOS处理后的项目</p>    <p>被处理后的整个项目目录只剩下不到 5KB，用微信小程序开发者工具预览我们的小程序发现除了图片部分的更改，其他部分跟处理之前没有什么差别。此时，我们可以重新上传我们的小程序代码，代码很顺利的上传成功了，1MB 的限制什么的不再是问题。如图 8。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d3218e9d8c68021384bc0c857c397d0a.png"></p>    <p>图8. 处理后的代码包被上传成功</p>    <p>除了基础配置之外，WeCOS 还提供一些个性化的高级配置（说是高级配置，使用起来其实也是十分简便）。如自定义域名替换，匹配的图片文件后缀，是否开启图片压缩等等</p>    <p>以上为大家介绍了一遍 WeCOS 的基本用法。相信如此方便实用、短小精悍的工具一定能帮助大家更方便的创建微信小程序。</p>    <p> </p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000008132184</p>    <p> </p>