详解基于Wepy开发小程序插件(推荐)


Posted in Javascript onAugust 01, 2019

开发

wepy-plugin-autopages

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

注意:该插件只会对编译文件dist里配置添加,源文件是不会改动的。
注意:我还发现有个问题是他是按命名顺序添加的,所以开发阶段可以用客户端指定路径,但是发布的话还是乖乖手动添加吧

这插件看情况使用吧,如果是个人项目的话我觉得还是值得用的,毕竟每次新增页面都要手动添加很繁琐,但是如果是合作项目开发到某个阶段的时候还是手动填上去吧,因为便于其他人可以知道你项目的所有跳转路径有哪些。

plugins: [
 autopages: {}
]

wepy-plugin-px2units

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

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

注意:根据实验所得只对wxss文件起作用,在wxml的行内样式不改变。

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

略微有点鸡肋,虽然会节省一点微不足道的代码量,但是它本身还是有些可能需要用到的配置项的。

配置项 作用
divisor(Number): 除数 转换后的值 等于 pixel / divisor
multiple(Number): 倍数 转换后的值 等于 pixel * multiple
decimalPlaces(Number) 小数点后保留的位数
comment(String) 不转换px单位的注释,默认为 /no/
targetUnits(String) 转换单位,默认值为 rpx

wepy-plugin-replace

文本替换,为 plugins 添加 replace 对象,支持单个或者多个规则,多个规则可以以 Array 或者 Object 实现,filter 的对象为生成后文件的路径, 例如'dist/app.js',每个规则也同时支持多个替换条目,同样是以 Array 或者 Object 实现。

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。

然后看看怎么一步步将其体积减少。

wepy-plugin-uglifyjs

JS压缩插件

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

因为小程序基本JS代码为主,所以这个效果非常可观,文档只写了这个用法,还有很多自定义选项需要自己去研究,文档给出的参数说明链接是UglifyJS2,即使如此,单单JS一项都好厉害。

使用前 使用后 压缩率
6.04M 2.76M 45.69%

wepy-plugin-filemin

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

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

使用前 使用后 压缩率
2.76M 2.72M 98.55%

唔。。。

有点尴尬,那点体积真的微不足道,一来样式本来就不多,二来css本身压缩空间有限,不可能把样式属性简化吧,聊胜于无。

wepy-plugin-imagemin

图片压缩插件

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

参数说明请看imagemin

使用前 使用后 压缩率
2.72M 2.24M 82.35%

不得不说还是可以的,基本用法大家用过打包器都不陌生就不说了,直到某一天腾讯出了一款重量大杀器,请看看下面——

WeCOS

腾讯推出的小程序瘦身工具,通过 WeCOS,小程序项目中的图片资源会自动上传到 COS 上,且 WeCOS 自动替换代码中图片资源地址的引用为线上地址,移除项目目录中的图片资源,从而减小代码包大小,解决包大小超过限制的问题。

前期准备工作:

  • 进入 腾讯云官网,注册腾讯云账户,指引参考 注册腾讯云。
  • 登录 对象存储控制台,开通对象存储服务,创建存储桶,指引参考 创建存储桶
  • 通过 GitHub 地址 下载 WeCOS 工具。
  • 在 Node.js 官网下载环境并安装。

我就默认你们都搞好了前期,然后我们先安装插件

npm install wecos -g

在与开发目录app同目录下创建一个 wecos.config.json 配置文件,在配置里填写基本的配置信息。

  • appDir 指定了小程序开发目录。
  • appid 为腾讯云账号的appid。
  • bucketname 是为存储图片创建的 bucket 的名称,这里是名为 weixintest 的 bucket。
  • folder 可以指定到 bucket 下的某个目录,本文指定到 /wxtest 目录下。
  • region 是指定上传到 COS 的指定地区,这里指定为 tj ,即天津。目前COS 支持天津、上海、广州。
  • secret_key、secret_id是账户密钥,用户可以自行到腾讯云 COS 控制台上获取。

之后直接运行命令

wecos

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

和wepy-plugin-imagemin相比。

使用前 使用后 压缩率
2.72M 1.46M 53.67%

前者操作简单无额外依赖,后者效率惊人,具体取舍看项目需要吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json原理分析及实例介绍
Nov 29 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
原生JS实现分页
Apr 19 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 #Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 #Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 #Javascript
微信小程序组件传值图示过程详解
Jul 31 #Javascript
vue.js实现回到顶部动画效果
Jul 31 #Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 #Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
You might like
11个PHP 分页脚本推荐
2011/08/15 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
强制设为首页代码
2006/06/19 Javascript
在网页中屏蔽快捷键
2006/09/06 Javascript
IE中jscript/javascript的条件编译
2006/09/07 Javascript
不错的asp中显示新闻的功能
2006/10/13 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
css3中transition属性详解
2014/09/02 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
汽车装潢店创业计划书范文
2014/02/05 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
施工员岗位职责
2015/02/10 职场文书
辞职信如何写
2015/02/27 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
六五普法心得体会2016
2016/01/21 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS