微信小程序中用WebStorm使用LESS

前提

自己前端不熟悉,很多都需要练习

网上找了一个css的demo, 放到微信小程序后,可以运行

图片很大,没有弄,加载可能有点慢(不相关的,就不扯了)

Less环境

Less需要nodejs的npm
nodejs的环境这里略了
自己百度

通过

npm install less -g

安装好 less
(没有用过的,可以理解为 maven的库, gradle库,pods的库)

WebStorm的Less使用

先关联对应的less

当然,对应的wxss文件,在webstorm中的显示,

可以参考自己其他文章

WebStorm:遇到的问题

这里,只要创建less文件,就会自动生成对应的wxss文件了(当然,写好保存less文件,会自动刷新wxss文件,很方便吧)

直接wxss和 less的比较

我们先看下页面

页面很简单

就只有一个 sky 套用 3个cloud 类

view class="container">
 <view class="sky">
  <view class="clouds_one"> </view >
  <view class="clouds_two"> </view >
  <view class="clouds_three"> </view >
  <view class="clouds_three"></view>
 </view>

</view>

再看看css

.sky {
 height: 480px;
 background: #007fd5;
 position: relative;
 overflow: hidden;
 animation: sky_background 50s ease-out infinite;
}
.sky .clouds_one {
 background: url("../../resources/cloud/cloud_one.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 50s linear infinite;
 transform: translate3d(0, 0, 0);
}
.sky .clouds_two {
 background: url("../../resources/cloud/cloud_two.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 75s linear infinite;
 transform: translate3d(0, 0, 0);
}
.sky .clouds_three {
 background: url("../../resources/cloud/cloud_three.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 120s linear infinite;
 transform: translate3d(0, 0, 0);
}
@keyframes cloud {
 0% {
 left: 0;
 }
 100% {
 left: -200%;
 }
}

我们发现有很多重复的地方

功能不难,但是占了70行,并且很难复用

修改的画,还要看里面的逻辑

修改也不方便

Less的使用

我们简单定义变量 和 方法以后

用less 大体是这样的

@dodo-out-height : 480px; //@dodo-out-height : 480rpx;
@dodo-bg-sky : #007fd5;
@dodo-img-url-clouds_one : "../../resources/cloud/cloud_one.png";
@dodo-img-url-clouds_two : "../../resources/cloud/cloud_two.png";
@dodo-img-url-clouds_three : "../../resources/cloud/cloud_three.png";

.sky {
 height: @dodo-out-height;
 background: @dodo-bg-sky;
 position: relative;
 overflow: hidden;
 animation: sky_background 50s ease-out infinite;
}
.sky .clouds_one {
 .dodo_clouds(@url:@dodo-img-url-clouds_one, @time: 50s)
}
.sky .clouds_two {
 .dodo_clouds(@url:@dodo-img-url-clouds_two, @time: 75s)
}
.sky .clouds_three {
 .dodo_clouds(@url:@dodo-img-url-clouds_three, @time: 120s)
}
.dodo_clouds (@url: @dodo-img-url-clouds_one, @height: 100%, @width: 300%, @time: 100s){
 background: url(@url);
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud @time linear infinite;
 transform: translate3d(0, 0, 0);
}
@keyframes cloud {
 0% {
 left: 0
 }
 100% {
 left: -200%
 }
}

保存后,

我们发现对应的wxss文件,也改变了,直接生成了可以读取的文件

和之前直接写的文件没有太大区别

也不会出现对应的变量和方法

.sky {
 height: 480px;
 background: #007fd5;
 position: relative;
 overflow: hidden;
 animation: sky_background 50s ease-out infinite;
}
.sky .clouds_one {
 background: url("../../resources/cloud/cloud_one.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 50s linear infinite;
 transform: translate3d(0, 0, 0);
}
.sky .clouds_two {
 background: url("../../resources/cloud/cloud_two.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 75s linear infinite;
 transform: translate3d(0, 0, 0);
}
.sky .clouds_three {
 background: url("../../resources/cloud/cloud_three.png");
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 300%;
 animation: cloud 120s linear infinite;
 transform: translate3d(0, 0, 0);
}
@keyframes cloud {
 0% {
 left: 0;
 }
 100% {
 left: -200%;
 }
}

预览下:

也没有区别,只是代码写起来更方便(建议机子配置可以的画,开发别用微信提供的ide,效率太低)

less很强大,其他的地方,有时间再深入,

感觉less好用在于它的复用性 :)

简单demo源码:http://xiazai.jb51.net/201703/yuanma/weapp-start-master(jb51.net).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

  • 微信小程序 使用腾讯地图SDK详解及实现步骤

    微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 申请开发者密钥(key):申请密匙 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com

  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具

  • 微信小程序 合法域名校验出错详解及解决办法

    微信小程序 合法域名校验出错详解及解决办法 看下出现错误: 微信小程序开发,遇到这个问题怎么办? 产生原因是因为发起了wx.request请求 而请求的域名没有在微信公众平台后台设置. 1.开发者自己手动设置不检验 不管你有没有拿到App ID ,我相信很多人都会和我一样做一件事,就是二话不说先大概了解下文档,然后直接上github找项目,导入试试.我是这么做的,结果上来就报这个错,后来发现其实可以自己设置本地开发工具不校验域名,完全没有影响. 在"项目">最后一个选项,勾选之后

  • 微信小程序 出现47001 data format error原因解决办法

    微信小程序 出现47001 data format error原因解决办法 看下错误: 主要原因是请求的数据不是json格式引起的 分享下我用的代码和函数: 发送模板消息 public function sendmessage(){ $data=$_POST=json_decode(file_get_contents('php://input'), TRUE); $access_token=$this->getAccessToken(); $request_url='https://api.we

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • 微信小程序 下拉列表的实现实例代码

    微信小程序 下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r

  • 微信小程序中用WebStorm使用LESS

    前提 自己前端不熟悉,很多都需要练习 网上找了一个css的demo, 放到微信小程序后,可以运行 图片很大,没有弄,加载可能有点慢(不相关的,就不扯了) Less环境 Less需要nodejs的npm nodejs的环境这里略了 自己百度 通过 npm install less -g 安装好 less (没有用过的,可以理解为 maven的库, gradle库,pods的库) WebStorm的Less使用 先关联对应的less 当然,对应的wxss文件,在webstorm中的显示, 可以参考自

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • 微信小程序 在Chrome浏览器上运行以及WebStorm的使用

    「微信小程序」的开发框架体验起来,还不错--自带了UI框架.但是问题是他的IDE,表现起来相当的糟糕--其实主要是因为,我当时买WebStorm License买了好多年.所以,我觉得他的IDE真不如我这个付费好用. 而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」.微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了. 如果我们放任下去,未来的Web世界令人堪忧. 好了,废话说完了: 文章太长不想看,可以直接看Demo哈哈: GitHu

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

    在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示 子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s

  • 微信小程序 图片加载(本地,网路)实例详解

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.

  • 微信小程序之小豆瓣图书实例

    最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信web开发者工具,开发工具比较简洁,功能相对比较少,个性化设置也没有.了解完开发工具之后,顺便看了一下小程序的官方开发文档,大概了解了小程序的开发流程和一些常用的API. 了解了小程序之后,自己就有了想要做一个小demo的冲动,虽然自己对小程序还没有做过很多实践,只是在官方例子上徘徊,但是还是想做出点小东西.既然要做一个demo,自然需要到数据,自己有又不想独自搭建服务端,所以在网上搜索可以用来提供测试数据的免费api,最后我选择了豆瓣

  • 微信小程序入门教程

    微信小程序(下面简称小程序)近些月来刷爆了我们这些程序猿们的圈子,可以说无数的程序猿磨刀霍霍,准备在这快蛋糕上杀出一片天地.那么作为前端开发人员,小程序开发和我们平常的开发有什么不同的地方呢?让我们一起来走进门里看看. 我们从下面几个方向来了解一下小程序的开发: 1.开发工具 2.布局差异 3.JS差异 4.其它 序 先看一张小程序初始化的目录: 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:app.js.ap

  • 详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序 实例开发总结

    微信小程序 开发过程中遇到问题总结 第一次正式开发一个小程序,就从以下几个方面来谈一谈小程序的开发过程和心得吧,主要说说这次项目中用到的功能. 数据请求 这次的小程序,没有太多的附加功能,所以数据以及对数据的处理是这次的主体工作,小程序向用户提供API,供用户向自己的服务器请求数据,值得一提的是,开发小程序之前,需要先在微信公众平台申请appID,并且绑定域名,域名必须是https协议,然后在小程序的开发工具的配置信息中完善信息,请求的地址需要在前面绑定的域名下.这个项目中用到wx.reques

随机推荐