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

作者介绍:叶嘉梁 腾讯云工程师 热衷社区分享 热衷新技术的实践 相信编码如写诗

小程序发布后,相信很多人已经蠢蠢欲动,心急的小伙伴更是已经操起小程序开发工具撸了起来。至于小程序是什么东西,在这几天朋友圈的狂轰乱炸后相信大家已经比较清楚,不清楚的可以点击 https://mp.weixin.qq.com/cgi-bin/wx

但小程序作为新兴的东西,开发中一定会遇到一些坑,为了造福广大开发者,腾讯云为小程序量身打造了相关解决方案,今天就手把手带着大家使用微信小程序解决方案之一:瘦身方案WeCOS https://github.com/tencentyun/wecos

为什么我们需要 WeCOS ?

为了提升小程序体验流畅度,编译后的代码包大小需小于 1MB ,大于 1MB 的代码包将上传失败。

上面这段话是在小程序官方文档里给出的,每个项目不能超过 1MB,超过 1MB 会导致项目文件在上传的时候上传失败,如图 1。在我们平时的开发中,通常会引用大量本地图片资源。而大家都知道,图片就是资源占用的元凶,它随时能让包的大小超过10MB、100MB。

图1. 开发者工具在上传时不允许代码包超过1MB

常见的解决方法是:把图片传到图床进行存储,删掉本地图片,然后替换图片引用的地址。但是目前小程序开发者工具的功能还比较单一,无法批量替换。用户要么需要使用其他编辑器替换项目文件中图片的引用地址为线上地址,要么手动去替换。但这两种方式对于开发者而言都比较繁琐,在修改引用的同时还需要小心翼翼,因为在大量操作的过程中难免会引入其他问题。

为此,腾讯云官方提出了该问题的解决方案:WeCOS。

什么是 WeCOS 呢?

WeCOS 是一个本地命令行工具(也提供 npm 包),主要用于帮助开发者解决小程序包超过大小限制的问题。WeCOS 不仅支持自动将小程序项目的图片资源上传到配置好的腾讯云对象存储服务(COS)上存储,同时,还可以自动替换项目代码中本地资源引用地址为线上 URL,并移除项目目录中的图片资源。为小程序项目包瘦身,一键解决项目包超过 1MB 的烦恼。

开始使用

我们有一个开发好的小程序开发目录「app」,目录大小为 10M。目录下有大量图片且代码中有对图片资源的引用。为了能够上传并正常运行项目代码,下面来示范如何使用腾讯云 WeCOS 来解决项目包过大的问题。项目目录如图 2。

图2. 待处理的开发目录

根据 WeCOS 的使用指引,只需三步,使用十分简单。

第一步,前期准备

注册腾讯云账号,开通 COS 并创建 Bucket。 在本机上安装 Node.js 的环境。

第二步,安装 WeCOS 并修改配置文件

在命令行中使用 node.js 自带的 npm 工具,输入npm install wecos -g,等待完成安装。-g 表示全局安装,这样才能全局调用 wecos 命令,安装如图 3。

图3. 命令行输入安装wecos

根据指引,在与开发目录 app 同目录下创建一个 wecos.config.json 配置文件,在配置里填写基本的配置信息。配置文件如图 4。

图4. 同目录下创建wecos.config.json文件

wecos.config.json 里填写了最基本的配置项,如图 5。 其中,

  • appDir 指定了小程序开发目录。
  • appid 为腾讯云账号的 appid。
  • bucketname 是为存储图片创建的 bucket 的名称,这里是名为「weixintest」的bucket。
  • folder 可以指定到 bucket 下的某个目录,本文指定到「/wxtest」目录下
  • region 是指定上传到 COS 的指定地区,这里指定为「tj」,即天津。目前 COS 支持天津、上海、广州。
  • secret_key、secret_id 是账户密钥,用户可以自行到腾讯云 COS 控制台上获取。

以上信息指定了开发目录以及图片要上传到的 COS 的地址,完成这些配置,基本上已经完工。

图5. wecos.config.json的配置

第三步,运行程序

最后,我们在命令行中执行 wecos 命令,如图 6。

图6. 执行wecos命令

可以看到,命令行显示项目中的三个图片上传成功。翻看项目目录,发现图片已经被删除,代码中的图片引用也被换成了线上的地址,项目包一下子小了。同时,WeCOS 很贴心的在开发项目外生成了个 wecos_backup 目录,来保存原来的图片作为备份。除此之外,WeCOS 默认启用监听模式,这是为了让开发过程中无感知,当我们不再进行项目开发,停止运行 WeCOS 即可。目录如图 7。

图7. WeCOS处理后的项目

被处理后的整个项目目录只剩下不到 5KB,用微信小程序开发者工具预览我们的小程序发现除了图片部分的更改,其他部分跟处理之前没有什么差别。此时,我们可以重新上传我们的小程序代码,代码很顺利的上传成功了,1MB 的限制什么的不再是问题。如图 8。

图8. 处理后的代码包被上传成功

除了基础配置之外,WeCOS 还提供一些个性化的高级配置(说是高级配置,使用起来其实也是十分简便)。如自定义域名替换,匹配的图片文件后缀,是否开启图片压缩等等。如果有需要可以直接参考 https://github.com/tencentyun/wecos 上的使用介绍。

以上为大家介绍了一遍 WeCOS 的基本用法。相信如此方便实用、短小精悍的工具一定能帮助大家更方便的创建微信小程序。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算与大数据

研发:git flow 研发工作流程

git flow命令仓库:https://github.com/heidsoft/gitflow

723
来自专栏张戈的专栏

Linux网络实时流量监测工具iftop的安装使用

概述:网络管理是基础运维中一个很重要的工作,在看似平静的网络运行中,其实暗流汹涌,要保证业务系统稳定运行,网络运维者必须要了解网络的流量状态、各个网段的使用情形...

3344
来自专栏王小雷

python数据分析工具安装集合

用python做数据分析离不开几个好的轮子(或称为科学棧/第三方包等),比如matplotlib,numpy, scipy, pandas, scikit-le...

2175
来自专栏ytkah

finecms设置伪静态后分享到微信不能访问怎么处理

  finecms设置伪静态后分享到微信不能访问,分享的链接自动增加了一串参数,类似这样的***.html?from=singlemessage&isappin...

2835
来自专栏架构说

Docker源码分析(一):Docker架构

文章来源: ? InfoQ推出了《Docker源码分析》系列文章。 另外,欢迎加入架构说技术交流群 234303445 1 背景 1.1 Docker简介 Do...

34214
来自专栏非著名程序员

推荐一款超级下载利器工具,突破网盘的下载限制

目前随着网盘一步一步的关闭或者收费,目前能用的网盘已经不多了,百度网盘目前是为数不多的,暂时没有关闭或者收费的网盘。但是我们都知道,下载网盘里的东西的时候,各种...

952
来自专栏马涛涛的专栏

webpack@3简单使用

这篇博客用的是webpack3的版本,作为入门理解学习 非原创,只为学习记录。博客大部分内容引用来源如下:

716
来自专栏北京马哥教育

rsync同步的艺术

如果你是一位运维工程师,你很可能会面对几十台、几百台甚至上千台服务器,除了批量操作外,环境同步、数据同步也是必不可少的技能。 说到“同步”,不得不提的利器就是r...

2977
来自专栏L宝宝聊IT

esxi存储(外部共享存储)

17510
来自专栏菜鸟致敬

[菜鸟致敬⑤] 极简搭建 hexo博客

可能有人看到这里觉得文章写得太省略,比如 github还需要添加 ssh密匙一类的旁枝末节的东西,但是我想说的是,文章适用人群是菜鸟程序员而不是懵逼小白,我们需...

713

扫码关注云+社区