文档章节

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

腾讯云开发者社区
 腾讯云开发者社区
发布于 2017/01/16 11:43
字数 1682
阅读 396
收藏 16

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

小程序发布后,相信很多人已经蠢蠢欲动,心急的小伙伴更是已经操起小程序开发工具撸了起来。至于小程序是什么东西,在这几天朋友圈的狂轰乱炸后相信大家已经比较清楚,不清楚的可以点击 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 的基本用法。相信如此方便实用、短小精悍的工具一定能帮助大家更方便的创建微信小程序。


更多技术干货请看腾讯云技术社区

© 著作权归作者所有

腾讯云开发者社区
粉丝 182
博文 248
码字总数 662864
作品 0
深圳
私信 提问
iOS9系列专题三——应用瘦身

更小,更快——iOS9的App Thinning apple在iOS9中引入了一套新的app瘦身方案,通过一些优化策略,将尽可能的减小app安装包的体积。这部分的大多工作是由app store来完成,开发者并不需要付出...

珲少
2015/09/27
510
0
[Android技术专题]APK瘦身看这一篇文章就够了

前言 之前我在微信群里面有说到,随着Android开发越来越成熟,关于Android方面的技术文章越来越多,作为开发者不缺资源,缺乏的是系统的知识和指导,对于学生和上班族来讲,更缺乏筛选信息的...

张明云
2016/08/11
0
0
java jre精简瘦身(转载学习)

打开JRE安装目录.目录包括bin,lib二个文件夹,所以就是将这两个文件进行瘦身了, 1. bin: 可以认为这是Java虚拟机. 2. lib: 执行class文件时,Java虚拟机需要用到的类库及资源文件. 一、bin瘦...

小海bug
2018/10/11
184
2
张明云的Live——Android 安装包瘦身指南

本次Live入口:Android 安装包瘦身指南 大家好,我是张明云,常活跃于知乎和简书,知乎 Android 开发和编程话题下优秀回答者;简书《Android 开发经验谈》专题管理员,超过 11K 的关注。目前...

张明云
2016/09/18
0
0
iOS应用程序瘦身的静态库解决方案

为什么要给程序瘦身? 随着应用程序的功能越来越多,实现越来越复杂,第三方库的引入,UI体验的优化等众多因素程序中的代码量成倍的增长,从而导致应用程序包的体积越来越大。当程序体积变大...

欧阳大哥2013
05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx+tomcat配置https

1、nginx配置https和【proxy_set_header X-Forwarded-Proto $scheme;】 2、java代码: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServe......

perofu
23分钟前
4
0
必看的Linux系统新手进阶老手心得

不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题。无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题。网络上给的答案千千万万,而却还有很多人踌躇...

Linux就该这么学
26分钟前
4
0
Spring Boot 配置元数据指南

1. 概览 在编写 Spring Boot 应用程序时,将配置属性映射到 Java bean 上是非常有用的。但是,记录这些属性的最好方法是什么呢? 在本教程中,我们将探讨 Spring Boot Configuration Proces...

liululee
29分钟前
3
0
foreach查找子类

$list = $menu_model -> menu_list();$parent_list = [];foreach ($list as $v){ if ($v['pid'] == 0) { $parent = $v; foreach ($list as $v1) ......

小小小壮
41分钟前
3
0
基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言 今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.h...

htdaydayup
47分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部