雪碧图PHP,如何在小程序中使用雪碧图
小程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在本地。但是使用icon-font有一个问题,就是不能使用渐变色,因此,需要渐变色的icon都只能使用图片来完成。如果这样的icon少还可以手动一张张上传到cdn,但是多到10-20张,手动传就是一件耗时费力的事了。因此,我们需要把我们的icon整合起来,做成一张雪碧图,然后将其上传到cdn,最后将cdn的地址替换到css中。在小程序中我们借助gulp来将这一系列步骤自动化,下面谈谈具体的实施方案。
目录结构
为了使我们的源码能使用更多的现代特性,我们将目录分为了src和dist两大目录,src存放我们的源码,而dist则存放gulp处理过后给小程序执行的代码。如下所示:
icons: 该目录存放所有的图片icons
style: 该目录存放共用的css,我们生成的雪碧图css也存放于此
gulpfile: gulp任务配置文件
gulp配置
先安装依赖包
yarn add sprity sprity-sass gulp gulp-if gulp-sass gulp-rename gulp-replace -D
我们采用sprity这个库来处理雪碧图,而sprity-sass则是针对scss的一个处理器。gulp-sass则是将scss文件处理为css,gulp-rename将其命名为小程序特有的wxss文件。
首先打开gulpfile编写我们的雪碧图处理代码,如下:
const gulp = require(‘gulp‘);
const sass = require(‘gulp-sass‘);
const rename = require(‘gulp-rename‘);
const sprity = require(‘sprity‘);
const gulpif = require(‘gulp-if‘);
gulp.task(‘sprity‘, () => {
return sprity.src({
src: ‘./src/icons/**/*.{png,jpg}‘, // icon存放目录
style: ‘_icon.scss‘, // 生成的icon文件
processor: ‘sass‘, // 处理器
})
.pipe(
gulpif(‘*.png‘, gulp.dest(‘./src/sprity/‘), // 生成的雪碧图存放路径
gulp.dest(‘./src/sprity/‘)) // 生成的icon存放路径
);
});
写完后,我们执行gulp sprity,可以发现我们sprity文件夹下生成了一张sprity.png和_icon.scss文件,其内容如下:
$buy-discount-card: -0px -0px 76px 76px;
$buy-product: -0px -76px 76px 76px;
$buy-service: -0px -152px 76px 76px;
$buy-times-card: -0px -228px 76px 76px;
$home: -0px -304px 76px 76px;
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}
@function sprite-width($sprite) {
@return nth($sprite, 3);
}
@function sprite-height($sprite) {
@return nth($sprite, 4);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite($sprite, $display: block) {
@include sprite-position($sprite);
background-repeat: no-repeat;
overflow: hidden;
display: $display;
@include sprite-width($sprite);
@include sprite-height($sprite);
}
.icon {
background-image: url(‘../sprity/sprite.png‘);
}
如果不用上传到cdn,那么我们就可以直接引用这个文件了,其用法如下:
@import ‘_icon.scss‘; // 引入生成的雪碧图文件
.icon-discount-card { // 编写icon
@include sprite($buy-discount-card); // 此处的变量为_icon.scss前面几行定义的变量,这些变量的名称都是根据icon文件名来生成
}
.icon-home {
@include sprite($home);
}
如上代码所示,我们就写好了我们的icon文件,到时候直接使用 icon icon-home即可。你可能会觉得还要自己手写图标会很麻烦,sprity也支持直接生成图标,不过得自己手动去写对应的模板,有兴趣的可以网上找一下相关资料,此处不展开。
雪碧图文件已经生成了,我们下一步要做的就是将其上传到cdn,这里我们的做法是使用node自带的spawn来执行shell命令,而这个shell命令会把我们的雪碧图上传到cdn上。在有赞内部,我们使用superman这个工具,如果读者是上传到别的cdn服务器,应该也会有相应的命令上传配置,建议找一下cdn的文档。gulp上传雪碧图代码如下:
const replace = require(‘gulp-replace‘);
const { spawn } = require(‘child_process‘);
gulp.task(‘cdn‘, () => {
const reg = /\/\/img\.yzcdn\.cn(.+)\.png/g; // 匹配上传的路径
const sm = spawn(‘superman‘, [‘cdn‘, ‘./src/sprity/sprite.png‘]); // 执行上传命令
sm.stdout.on(‘data‘, (data) => {
const d = reg.exec(data);
if(d && d.length > 0) { // 根据返回值来匹配
gulp.src([‘./src/sprity/_icon.scss‘])
.pipe(replace(/\.\.\/sprity\/sprite\.png/g, d[0])) // 替换本地雪碧图
.pipe(gulp.dest(‘./src/style/‘));
}
});
});
以上步骤做完后,基本就大功告成了。如果更进一步,我们可以把生成的scss的px改为微信建议的rpx,代码如下:
if(d && d.length > 0) { // 根据返回值来匹配
gulp.src([‘./src/sprity/_icon.scss‘])
.pipe(replace(/\.\.\/sprity\/sprite\.png/g, d[0])) // 替换本地雪碧图
.pipe(replace(/(-?)(\d+)px/g, ($1, $2, $3) => {
return $2 + parseInt($3) * 2 + ‘rpx‘;
}))
.pipe(gulp.dest(‘./src/style/‘));
}
以上,我们就完成了在小程序中使用雪碧图,为了能让我们一边写代码,一边能看到相应的输出,我们可以通过gulp来watch我们的文件,当检测到变化时就重新生成一份代码到dist中。
雪碧图PHP,如何在小程序中使用雪碧图相关推荐
- php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...
- 微信小程序中使用ECharts--折线图、柱状图、饼图等
微信小程序开发者的反馈,表示他们强烈需要像 ECharts 这样的可视化工具.但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同. 因此,ECharts 团队和微信小程序官方 ...
- 在微信小程序中实现生成海报图并保存到相册
效果图镇楼: 技术依赖: 弹窗 (vant-weapp 提供的 van-popup 组件) 海报图 (wx-canvas-2d 工具) 弹窗组件的使用方式可以点击上面链接查看,本篇主要讲解海报图绘制方 ...
- 微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- 微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- 微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
- 微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法 小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
- 支付宝小程序中使用F2图表
支付宝小程序中使用F2图表 介绍 最近在支付宝小程序开发中接到显示图表的需求,因为支付宝小程序方未提供相关插件,并且目前支付宝小程序不支持document,所以根据推荐使用f2-canvas图表组件. ...
- 微信小程序中使用阿里iconfont
1.从阿里iconfont中下载自己的iconfont项目 2.下载成功之后解压至项目文件夹下 我们需要用到的文件只有以上箭头的四个 3.如果我们直接使用.ttf .woff .woff2文件,在进行 ...
- 微信小程序中的JavaScript 简明介绍
小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求. 1 ECMAScript 在大部分开发者看来,ECMAScr ...
最新文章
- 关注 | 5G 和 WiFi-6,谁是智能制造的主角?
- C# 并行任务——Parallel类
- .mmp怎么打开查看?
- [恢]hdu 1846
- CSS overflow属性与display属性
- thinkphp5 事务回滚_卓象程序员:ThinkPHP5实现事务功能
- 怎样提高文章原创度,被快速收录?
- Rob Knight: PCR不需要做三个平行再混合!
- 理解目标检测里的Anchor-based和Anchor-free
- 浅谈游戏《神秘海域4:盗贼末路》
- 2022美国科学院院士名单公布:图灵奖得主、龙书作者Alfred V. Aho当选!
- MySQL权限篇之SHOW DATABASES及SHOW VIEW
- 算法设计与分析基础 第一章谜题
- Day 40 多表查询以及pymysql相关操作
- 华为云磁盘挂载与分区扩容
- 第1139期AI100_机器学习日报(2017-10-31)
- php steam 第三方登录,Steam第三方授权登录异常 《绝地求生》国服绑定中招
- 阿斯顿扩大打算打算大大飒飒是打算打算的
- Hex文件转Bin文件
- HTML+css3个人博客html源码
热门文章
- php转义和反转,PHP转义,反转义
- Windows窗口(DirectX3D11学习笔记)
- 菜鸟笔记--函数基础
- html 图像热点在线处理,html area图片热点的使用介绍附相关属性一览表
- 朝花夕拾 - 2020 1024
- STM32MP157网络环境 TFYPNFS搭建手册-学习记录
- C++ 基本编程工具 DevCpp5.4.0 + 经典 VC6.0 | 软件分享 |
- 【转】codelite
- Android 9 低内存应用程序保活
- 建立时间保持时间及违例如何处理,求最大时钟频率