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

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

小程序发布后,相信很多人已经蠢蠢欲动,心急的小伙伴更是已经操起小程序开发工具撸了起来。至于小程序是什么东西,在这几天朋友圈的狂轰乱炸后相信大家已经比较清楚,不清楚的可以点击 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 条评论
登录 后参与评论

相关文章

来自专栏施炯的IoT开发专栏

Windows 10 IoT Serials 8 – 如何改变UWP应用的目标平台

    Windows Insider计划直接加速了Windows系统的迭代,缩短了系统发布的周期。就Windows 10 IoT Core而言,迭代的速度和W...

1777
来自专栏俗人笔记

Nginx+PHP php文件404错误的一个可能原因

网站本来是nginx + php-fpm socket的方式跑的,nginx是自己编译安装了。昨天尝试把网站加上https,就根据https://certbot...

1133
来自专栏hadoop学习笔记

发行版DKhadoop开发环境安装常见问题与解决方法汇总

Dkhadoop版本的下载安装以及运行环境搭建等各个方面内容基本都已经分享过了,今天给大家就dkhadoop开发环境安装中常见的问题以及解决方法进行汇总整理,希...

742
来自专栏LeoXu的博客

使用 Chrome 浏览器调试 WebView 中的网页

然后呢,运行 Android 程序,再打开 Chrome 浏览器,在地址栏输入 chrome://inspect/#devices,回车,然后找到这个 devi...

743
来自专栏PHP实战技术

想要成为Linux大神,你应该和我一样这样做!

大神终究是孤独的,在Linux这条路上,有太多的人,而我们走着走着就分离了,我们在各自的道路上按照我们自己的方法去寻找着属于我们的道路,属于我们的那一片领土! ...

2988
来自专栏LIN_ZONE

Linux各目录及每个目录的详细介绍(转载)

Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图:

822
来自专栏玩转JavaEE

V部落博客管理平台开源啦! Vue+SpringBoot强强联合!

V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发。 演示地址: http://45.77.146.32:8081/index.html 项目...

3319
来自专栏运维小白

25.2 安装Docker

Docker安装 curl https://download.docker.com/linux/centos/docker-ce.repo -o /etc/y...

3559
来自专栏磨磨谈

cephonebox发布(ceph+calamari集成iso)

现在已经是2016年收官的一个月了,之前一直想做一个calamari的集成版本,之所以有这个想法,是因为,即使在已经打好包的情况下,因为各种软件版本的原因,造成...

574
来自专栏建站达人

如何搭建 WordPress 博客

WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管...

1102

扫码关注云+社区