手机版

三步瘦身 名副其实的“小程序”

时间:2021-12-17 来源:互联网 编辑:宝哥软件园 浏览:

小程序发布后,相信很多人已经跃跃欲试,不耐烦的朋友已经开始小程序开发工具了。至于小程序是什么,相信大家在经历了这几天朋友圈的疯狂轰炸之后已经很清楚了。如果你不清楚,你可以点击https://mp.weixin.qq.com/cgi-.

然而,作为一个新兴事物,小程序在发展中必然会遇到一些坑洼。为了让广大开发者受益,腾讯云为小程序量身定制了相关解决方案。今天,我们将带大家一起使用微信小程序的解决方案之一:瘦身计划WeCOShttps://github.com/tencentyun.

为什么我们需要 WeCOS ?

为了提高小程序体验的流畅性,编译好的代码包大小要小于1MB,大于1MB的代码包上传会失败。

以上段落在小程序的官方文档中给出。每个项目不能超过1MB。如果项目文件超过1MB,将无法上传,如图1所示。在我们平时的开发中,我们通常会参考大量的本地图像资源。众所周知,图片是资源占用的罪魁祸首,它可以使包的大小随时超过10MB或100MB。

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

图1。开发人员工具不允许代码包在上传时超过1MB。

常见的解决方法是将图片转移到图片床上存储,删除本地图片,然后替换图片引用的地址。但是目前小程序开发者工具的功能比较简单,无法批量替换。用户要么需要使用其他编辑器将项目文件中图片的引用地址替换为在线地址,要么手动替换。但是这两种方法对于开发人员来说比较繁琐,修改引用的时候需要小心,因为在大量操作的过程中难免会引入其他问题。

为此,腾讯云正式提出了解决这个问题的方案:WeCOS。

什么是 WeCOS 呢?

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

开始使用

我们开发了一个小程序开发目录“app”,目录大小为10M。目录中有很多图片,代码中有图片资源的引用。为了正常上传和运行项目代码,我们来演示一下如何使用腾讯云WeCOS解决项目包过大的问题。项目目录如图2所示。

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

图2。要处理的开发目录

根据WeCOS的指南,只需要三个步骤,使用起来非常简单。

第一步,前期准备

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

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

在命令行中,使用node.js提供的npm工具,输入npm install wecos -g,等待安装完成。-g表示全局安装,这样就可以全局调用wecos命令。安装如图3所示。

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

图3。安装wecos的命令行输入

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

三步瘦身,做名副其实的「小程序」(图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)

图5. wecos.config.json的配置

第三步,运行程序

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

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

图6. 执行wecos命令

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

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

图7. WeCOS处理后的项目

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

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

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

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

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

版权声明:三步瘦身 名副其实的“小程序”是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。