找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] WeCOS——微信小程序COS瘦身解决方案,让你的小程序更加轻盈

[复制链接]
查看: 734|回复: 4
最佳答案
0 

5

主题

5

帖子

91

积分

新人求带

积分
91
 楼主| 发表于 2017-2-8 15:59:46 | 显示全部楼层 |阅读模式
通过WeCOS,你的小程序项目中的图片资源会自动上传到你的腾讯云对象存储服务(COS),且WeCOS自动替换代码中图片资源地址的引用为线上地址,移除项目目录中的图片资源,从而减小小程序包大小,为你解决包大小超过限制的烦恼。 WeCOS

a7067.jpg

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

在开发小程序的过程中,图片资源通常会占用较大空间,很容易超出官方的1MB限制。这时候,使用WeCOS,可以让你在开发过程中不需要关心图片资源占用多少空间的问题,专注于自己的逻辑开发。

准备工作


安装
  1. npm install -g wecos
复制代码

基本配置

在你的小程序目录同级下创建wecos.config.json文件

wecos.config.json配置项例子:
  1. {
  2.   "appDir": "./app",
  3.   "cos": {
  4.     "appid": "1234567890",
  5.     "bucketname": "wxapp",
  6.     "folder": "/", //资源存放在bucket的哪个目录下
  7.     "region": "wx", //创建bucket时选择的地域简称
  8.     "secret_key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  9.     "secret_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  10.   }
  11. }
复制代码

配置项        类型                说明
appDir        [String]        默认 ./app,小程序项目目录
cos                [Object]        必填,填写需要上传到COS对应的配置信息,部分信息可在COS控制台查看

使用

在配置文件同级目录下命令行执行
  1. wecos
复制代码

注意,执行前需要在该目录下创建wecos.config.json文件

高级配置
配置项类型说明
backupDir[String]默认 ./wecos_backup,备份目录
uploadFileSuffix[Array]默认 [".jpg", ".png", ".gif"],图片上传后缀名配置
uploadFileBlackList[Array]默认 [],图片资源黑名单
replaceHost[String]默认 '',把指定域名替换成 targetHost
targetHost[String]默认 '',使用自定义域名
compress[Boolean]默认 false,是否开启压缩图片
watch[Boolean]默认 true,是否开启实时监听项目目录


设置备份目录

由于WeCOS在运行时会自动将项目下的图片上传至COS然后删除,这样可能存在丢失源文件的风险,因此我们也提供了备份源文件的功能,每上传一张图片,会在项目同级的某个目录下备份该文件

为了方便使用,可以通过以下配置来修改备份目录名,如果不需要使用该功能,可以设置为空值
  1.   "backupDir": "./wecos_backup"
复制代码

设置图片后缀

有些时候,我们需要限制上传图片的格式,例如只允许jpg格式,可以通过WeCOS提供的图片后缀配置项来定义

WeCOS默认支持jpg,png,gif三种格式,假如你还需要添加其他格式,例如webp,可以在该配置项中添加
  1.   "uploadFileSuffix": [".jpg",".png",".gif",".webp"]
复制代码

设置图片黑名单

开发过程中,某些特定的图片我们不希望被上传,可以通过WeCOS的黑名单配置来解决这个问题,配置后上传程序会自动忽略掉这些图片

黑名单配置支持目录或具体到文件名的写法
  1.   "uploadFileBlackList": ["./images/logo.png","./logo/"]
复制代码

自定义域名

如果希望 COS 文件链接使用自定义的域名,可以配置 targetHost 代替默认域名,可以省略:http://:
  1.   "targetHost": "http://example.com"
复制代码

如果代码中的图片链接想换一个域名,可以配置 replaceHost targetHost 来实现。
  1.   "replaceHost": "http://wx-12345678.myqcloud.com",
  2.   "targetHost": "https://example.com"
复制代码

设置图片黑名单

开发过程中,某些特定的图片我们不希望被上传,可以通过WeCOS的黑名单配置来解决这个问题,配置后上传程序会自动忽略掉这些图片

黑名单配置支持目录或具体到文件名的写法

  "uploadFileBlackList": ["./images/logo.png","./logo/"]


开启图片压缩

图片上传到COS之后虽然大大减轻了程序包的大小,但如果图片自身体积过大,访问速度也会影响到用户体验

令人激动的是,WeCOS在图片上云的基础功能上还额外提供了基于腾讯云万象优图的图片压缩功能。

首先,你需要在万象优图控制台创建 COS的同名bucket

然后,开启该选项,资源将被压缩后上传(注:如果图片已经小到一定程度,压缩后大小可能不会变化)
  1.   "compress": true
复制代码

设置实时监听

WeCOS默认实时监听项目目录变化,自动处理图片资源,在开发过程中,如果觉得实时监听不方便,或者只需要一次性处理就停止,可以修改该配置,程序将只会执行一次后退出
  1.   "watch": false
复制代码

高级用法

如果你除了上述使用命令行来执行的方式外,还想使用其他的方式,例如定制化成自己的模块,我们也提供了直接引用的使用方法满足你个性化的需求
  1. var wecos = require('wecos');

  2. /**
  3. * option 可选 [String|Object]
  4. * 传入 String,指定配置文件路径
  5. * 传入 Object,指定配置项
  6. */
  7. wecos([option]);

  8. //指定配置文件路径
  9. wecos('./wecos-config.js');

  10. //指定配置项
  11. wecos({
  12.     appDir: './xxx',
  13.     cos: {
  14.         ...
  15.     }
  16. });
复制代码

相关

WeCOS-UGC-DEMO
——小程序用户资源上传COS DEMO

COS-AUTH——COS鉴权服务器DEMO

游客,如果您要查看本帖隐藏内容请回复


git:https://github.com/tencentyun/wecos
回复

使用道具 举报

最佳答案
0 

0

主题

1

帖子

44

积分

新人求带

积分
44
发表于 2017-2-20 14:48:12 | 显示全部楼层
要说些什么呢?
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

21

帖子

1311

积分

专家路上

积分
1311
发表于 2017-2-25 21:11:47 | 显示全部楼层
谢谢楼主了
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

8

帖子

266

积分

新人求带

积分
266
发表于 2017-4-5 13:09:27 | 显示全部楼层
看啊看卡!!
回复

使用道具 举报

最佳答案
0 

0

主题

51

帖子

326

积分

略知一二

积分
326
发表于 2017-9-14 09:29:57 | 显示全部楼层
好东西……
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com