文章目录
微信小程序官方提供了比较完整的开发文档,也提供了官方的开发工具。但是本人还是习惯于用vscode,同时,可以安装vscode中的插件来辅助开发。
1. vsode插件
(1) Live Sass Compile——实时将sass打包为wxss
wxss的语法是原生的css,非常不方便,这个插件可以将sass实时打包为css,同样也也可以让后缀名为wxss。习惯于用less的,可以使用另一个插件:Easy WXLESS。
这个插件的默认方式是打包为css文件,如果能直接打包为wxss是最好不过的,所以需要修改配置文件。在工程的根目录找到或者创建文件夹.vscode下的settings.json添加如下配置:
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".wxss",
"savePath": null
}
]
}
更详细的配置介绍,请参见:https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
在wxss文件的同级目录下新建.scss文件,点击vscode底部的[Watch Sass]后,所有的.scss会在修改后实时被打包为同名的.wxss文件,并会额外生成一个map文件。<