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

2024-02-24 06:01:42

开发

使用 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%

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

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

微信小程序wepy框架笔记小结

该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风格上80%以上接近VUE 优势组件化开发小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互事件仍需在页面处理.无法实现组件化的松耦合与复用的效果. wepy组件示例 // index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel>
详解wepy开发小程序踩过的坑(小结)

H5内嵌富文本编辑器微信小程序没有支持的原生富文本组件,可以通过web-view内嵌H5实现富文本编辑功能,起初使用的是wangEditor富文本编辑器,因为项目使用的是七牛云存储,wangEditor在pc端上传是没有问题的,但在在移动端调用不了本地图片,于是换了个功能强大二次开发较强的富文本编辑器vue-quill-editor,更多请参考官方文档, 基于此对上传图片进行二次开发. 七牛云 + elementUi + vue-quill-editor上传图片和富文本 $ npm insta
详解微信小程序框架wepy踩坑记录（与vue对比）

wepy框架借鉴了vue的语法风格和功能特性,但是在使用过程中还是发现与vue有很大的不同.现在总结一下自己开发中遇到的问题,共大家参考一下.如果第一次用wepy开发,强烈建议仔细阅读一下这篇文章,一定对你有帮助,会帮你节约很多宝贵的时间.开发过程中也建议大家时不时的回来阅读一次,巩固加强记忆. wepy中的组件组件里面的坑还不是一般的多! 首先来说说组件间的数据共享.在vue中你也能做到这一点,只要把 data 写成一个对象就可以了,当然你不想让所有的子组件都共享同一份数据,vue中的解决方
微信小程序第三方框架对比之 wepy / mpvue / taro

众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 小程序开发有哪些痛点
微信小程序wepy框架学习和使用心得详解

一.微信小程序wepy框架简介: 微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性.相对更容易上手,提高开发效率; 二.WePY项目的创建与目录结构 WePY的安装或更新都通过npm进行,全局安装或更新WePY
微信小程序 wepy框架与iview-weapp的用法详解

最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看(https://github.com/Tencent/weui-wxss),这里主要做view-weapp的介绍小程序相关项目 1.wepy项目 https://github.com/Tencent/wepy 2.iview-weapp https://weapp.iviewui.co
微信小程序框架wepy之动态控制类名

本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法,供大家参考,具体内容如下控制类名 style <style lang="less" scoped> .liBkgCor { background-color: red; } </style> template <view class="t_tab"> <li @tap.stop="changeLi({{1}})" class="
Linux 命令查询小程序中的 WePY 云开发实践

大家好,今天我来为大家分享一下, Linux 命令查询小程序中的 WePY 云开发实践. Why WePY 首先,先分享一下为什么要选择 WePY ? 在项目开始进行选型的时候,我可选的底层框架有 WePy.MPVue.Taro.MinUI,这些框架都是工程化做得很好的框架,可以帮助小程序项目长期进行维护.其中,Taro 因为采用的是我所不熟悉的 React ,所以从一开始就被排除.MPVue 我看了以后,它更多是给 Web 开发者提供小程序转化工具,而不是给小程序开发者提供类 Vue 工具,所
详解基于Wepy开发小程序插件(推荐)

开发 wepy-plugin-autopages 使用 wepy 开发项目时不需要手动配置 app.wpy 下的 config.pages,autopages 插件会自动监控 pages 目录下文件的变化,自动生成更新对应 app.json 下的 pages. 注意:该插件只会对编译文件dist里配置添加,源文件是不会改动的. 注意:我还发现有个问题是他是按命名顺序添加的,所以开发阶段可以用客户端指定路径,但是发布的话还是乖乖手动添加吧这插件看情况使用吧,如果是个人项目的话我觉得还是值得用的,
详解基于mpvue的小程序markdown适配解决方案

美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. mpvue 的核心目标是提高开发效率,增强开发体验.使用该框架,开发者只需初步了解小程序开发规范.熟悉 Vue.js 基本语法即可上手.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js
详解基于mpvue微信小程序下载远程图片到本地解决思路

说明最近有些空余时间开始着手优化我那个吉他自学小助手的微信小程序,其中有一个功能是下载吉他谱到本地,开始以为只是很简单的拿到图片url然后down下来就好了,其实不然...最终通过google解决了这个问题,现在记录一下,以便后续翻阅. 少废话先看东西演示.gif 流程梳理获取图片远程地址数组-->遍历拿到图片缓存(临时地址)(wx.getImageInfo)-->保存缓存图片到本地(wx.saveImageToPhotosAlbum) 完整代码子组件代码逻辑 //子组件downloa
详解如何在微信小程序开发中正确的使用vant ui组件

微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr
详解PHP实现支付宝小程序用户授权的工具类

背景最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过程学到的知识支付宝开放接口的调用模式以及实现方式支付宝小程序授权的流程 RSA加密方式吐槽点支付宝小程序的入口隐藏的很深,没有微信小程序那么直接了当支付宝小程序的开发者工具比较难用,编译时候比较卡,性能有很大的问题每提交一次代码,支付宝小程序的体验码都要进行更换,比较繁琐,而且loca
详解如何在微信小程序中愉快地使用sass

前言在微信小程序中,css是用wxss来表示,但写法基本一致.需要注意的是wxss扩展了两个特性,分别是: 尺寸单位样式导入具体可参考wxss,此处不做过多赘述. 为了方便打包sass,我们使用gulp来处理我们的scss文件,将其转换为wxss. 目录结构在开发中,我们一般会有一个src源代码目录,一个dist目录用来输出我们打包的代码.而本次讲解用到的目录结构如下: build目录用来配置我们的打包参数,目前里面只有一个config.js文件 dist目录为打包输出的目录,也是小程序
详解如何使用微信小程序云函数发送短信验证码

其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 1.安装下载后的SDK在cloudfunctions文件夹下会包含3个云函数文件夹,如下: 由于目前IDE没有云函数导入功能,您需要手工创建同名的云函数,然后将云函数下的文件手工拷进去注:下载的SDK是一个
详解基于Koa2开发微信二维码扫码支付相关流程

前段时间在开发一个功能,要求是通过微信二维码进行扫码支付.这个情景我们屡见不鲜了,各种电子商城.线下的自动贩卖机等等都会有这个功能.平时只是使用者,如今变为开发者,也是有不小的坑.所以特此写一篇博客记录一下. 注: 要开发微信二维码支付,你必须要有相应的商户号的权限,否则你是无法开发的.若无相应权限,本文不推荐阅读. 两种模式打开微信支付的文档,我们可以看到两种支付模式:模式一和模式二.这二者的流程图微信的文档里都给出了(不过说实话画得真的有点丑). 文档里指出了二者的区别: 模式一开发前,商
详解Linux 下开发微信小程序安装开发工具

详解Linux 下开发微信小程序安装开发工具 1. git clone https://github.com/yuan1994/wechat_web_devtools 然后创建一个文件夹 mkdir /opt/tencent/ 移动文件 mv ./wechat_web_devtools /opt/tencent 修改用户组 chown -R root:root /opt/tencent/wechat_web_devtools 启动测试工具 /opt/tencent/wechat_web_devt

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

相关推荐

随机推荐