项目场景：

在开发小程序的过程中使用wxss写代码量太多，推荐使用less更加的方便快捷
比如下图，左边的是less,右边是wxss,我们可以看出差距

解决方案：

第一步：
在VScode编辑器的扩展下载一个less扩展

第二步：
打开微信开发者工具，点击代码左侧的扩展，然后点击扩展右边的三个点，选择最下面的从已解包的扩展文件夹安装

第三步：
这里你先去看一下你的VScode安装在哪个目录选择VScode里面的data,里面的extensions文件夹里面找到下图的mrcrowl.easy.less-1.7.3文件，后面的数字是你下载的版本号

第四步：
点击导航栏的设置，点击扩展设置

第五步：
点上面的编辑器，然后点击下面的更多编辑器设置…

第六步：
之后会出来一个设置页面，点击扩展，找到里面的Easy LESS configur…再点击右边的编辑

第七步：
在代码中less.compile里面写入下面四行代码，他就会自动把你在less里面的代码转换为wxss的代码了

    "compress": false,"sourceMap": false,"out": true,"outExt": ".wxss"

在微信小程序中使用less相关推荐

微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
微信小程序中如何使用setData修改数组或对象中的某一参数
本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...

在微信小程序中使用less

项目场景：

解决方案：

在微信小程序中使用less相关推荐

最新文章

热门文章