基于Wepy开发小程序插件详解（推荐）

更新时间：2019-08-01 09:39:40 作者：炸鸡超人

本文主要介绍了基于Wepy进行小程序插件开发（推荐），小编觉得很不错，现在分享给大家，供大家参考。

发展

我们——

使用wepy开发项目时，不需要手动配置app.wpy，插件会自动监听目录下文件的变化，并自动生成并更新对应的app.json。

注意：本插件只会在编译好的文件dist中添加配置，不会改变源文件。

注：我还发现它是按照命名的顺序添加的，所以在开发阶段可以用客户端指定路径，但是如果要发布的话还是要手动添加。

这个插件可以根据情况使用，如果是个人项目我觉得还是值得用的，毕竟每次都手动添加新页面比较麻烦，但如果是协作项目，最好在开发到一定阶段的时候手动填写，因为这样会方便别人知道你项目的所有跳转路径。

plugins: [ autopages: {} ]

我们——

将px单位转换为rpx单位或其他单位的插件。

plugins: { px2units: { filter: /.wxss$/ } },

注：根据实验结果，这个只对wxss文件起作用，wxml的内联样式不会发生改变。

//输入 .userinfo-nickname { width: 200px; height: 200px;/*no*/ margin: 200rpx; }

//输出 .userinfo-nickname { width: 200rpx; height: 200px; margin: 200rpx; }

有点没用。虽然它会节省少量的代码，但它仍然有一些可能需要使用的配置项。

配置项 功能

(): 除数

转换后的值等于 /

（）： 多种的

转换后的值等于*

（）

小数点后的位数

（）

不转换 px 单位。默认为 /no/

（）

转换单位，默认值为rpx

我们——

文本替换，添加对象，支持单条或者多条规则，多条规则可以用或来实现，对象是生成文件的路径，如'dist/app.js'，每条规则也支持多个替换条目，也可以用或来实现。

module.exports.plugins = { 'replace': { filter: /moment\.js$/, config: { find: /([\w\[\]a-d\.]+)\s*instanceof Function/g, replace: function (matchs, word) { return ' typeof ' + word + " ==='function' "; } } } };

使用方法很简单，指定后缀文件匹配规则替换功能。

生产

以我的一个项目为例，不使用插件的情况下，包大小为6.04M。

然后看看如何一步步减小它的尺寸。

我们——

JS 压缩插件

module.exports.plugins = { 'uglifyjs': { filter: /\.js$/, config: { } }, };

因为小程序主要由JS代码组成，所以效果非常可观，文档中只描述了这种用法，还有很多自定义选项需要自己去研究，文档中给出的参数说明链接是，即便如此，单单JS就已经很强大了。

使用前后压缩比

6.04万

2.76万

45.69％

我们——

文件压缩插件支持css、xml、json

module.exports.plugins = { 'filemin': { filter: /\.(json|wxml|xml)$/ } };

压缩比 使用前 使用后

2.76万

2.72万

98.55％

出色地...

有点尴尬，那个尺寸确实微不足道，一来样式本来就不多，二来 CSS 本身的压缩空间有限，不可能再精简样式属性，不过聊胜于无吧。

我们——

图像压缩插件

module.exports.plugins = { 'imagemin': { filter: /\.(jpg|png|jpeg)$/, config: { 'jpg': { quality: 80 }, 'png': { quality: 80 } } } };

请参阅参数说明

压缩比 使用前 使用后

2.72万

2.24万

82.35％

不得不说还是可以的，基本用法大家用过加壳的都熟悉，就不多说了，直到有一天腾讯出了一个重量级的杀手锏，下面请看——

腾讯已上线小程序瘦身工具，可将小程序项目中的图片资源自动上传至 COS，并自动将代码中对图片资源地址的引用替换为线上地址，同时移除项目目录中的图片资源，从而减少代码包大小，解决包大小超限问题。

前期准备工作：

我假设你已经完成了准备工作，然后我们将先安装插件。

npm install wecos -g

在开发目录app同一目录下创建..json配置文件，填写基本配置信息。

然后直接运行命令

命令行显示项目中的图片已经上传成功。查看项目目录发现图片已被删除，代码中图片引用也替换成了线上地址，项目包变小了。同时在开发项目外部生成了一个目录，用于保存原始图片作为备份。另外默认开启了监控模式，就是为了让开发过程无感化，当我们不再开发项目的时候，可以停止运行。

与 wepy-- 相比。

压缩比 使用前 使用后

2.72万

1.46万

53.67%

前者操作简单，没有额外依赖，后者效率极高，具体选择还是看项目需求。

以上就是本文的全部内容了，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。