微信小程序_03
2018-05-30 本文已影响33人
_兜兜转转_
使用小程序编译器js提示不友好,css样式同样提示不友好,所以记录一下使用webStorm编写wxss和less自动生成wxss代码。
1.使用npm
全局安装less
,命令是npm install scss -g
.
2.打开webStorm导入小程序工程,设置webStorm自动less转换wxss文件。
2.1操作是webStorm-》Preferences->Tools->File Watchers
![](https://img.haomeiwen.com/i783986/780598f29d5c0e18.png)
2.2添加watcher
![](https://img.haomeiwen.com/i783986/afb26317898d0eef.png)
2.3右下角-》apply-》OK。
3.新建less文件
![](https://img.haomeiwen.com/i783986/0a54207e4852abfc.png)
4.coding
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 15rpx;
}
添加如上代码->保存.
然后打开logs.wxss
文件,发现刚才写的样式在logs.wxss
中都有了。
至此,使用less编写样式实现了。
5.预览小程序
我是直接打开小程序编译器和webStorm,在webStorm中编写,自动保存后,小程序自己主动刷新。