微信开发者工具如何使用SCSS和配置wxml文件高亮及格式化

IT码农-爱吃辣条

已于 2022-09-07 09:06:31 修改

阅读量3.9k

点赞数 2

分类专栏：前端小程序文章标签： scss 前端微信开发者工具

于 2022-08-15 15:22:01 首次发布

本文链接：https://blog.csdn.net/qq_24504591/article/details/126347544

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

小程序

4 篇文章 0 订阅

订阅专栏

1. 在`VSCode`编辑器中安装`EasySass`和`wxml-vscode`插件

在这里插入图片描述

2. 导入已安装的vscode扩展

1、打开VSCode安装目录

C:\Users\用户名\*****\.vscode\extensions

在这里插入图片描述

2、将对应的插件文件夹复制到微信开发者工具的扩展目录下

打开微信开发者工具的扩展文件夹。编辑 => 打开编辑器扩展目录

在这里插入图片描述

3、修改`spook.easysass-0.0.6/package.json`文件中的配置

设置编译结果文件的后缀为.wxss
在这里插入图片描述
也可以修改开发者工具的配置 settings.json，打开路径：文件=>首选项=>设置

"easysass.compileAfterSave": true,
"easysass.excludeRegex": "_+\\S*",
"easysass.formats": [
    {
      "format": "compressed",
      "extension": ".wxss"
    }
  ]

4、重启开发者工具，在开发者工具上的展示效果

微信开发者工具 => 视图 => 扩展

在这里插入图片描述

5、如何使用`wxml-vscode`的格式化功能

格式化支持通过 F1或者 CMD + Shift + P输入 format wxml命令或者右键菜单，也可以配置 wxmlConfig.onSaveFormat开启保存后自动格式化

在这里插入图片描述

接口环境配置

// 获取当前帐号信息
const accountInfo = wx.getAccountInfoSync()
let env = ""
const baseApi = {
  // 开发版
  develop: "******",
  // 体验版
  trial: "******",
  // 正式版
  release: "******"
}
// 当手机处于低版本的情况下,直接将地址写成开发版的
let envVersion = accountInfo.miniProgram.envVersion
if (!envVersion) {
  env = baseApi.release
} else {
  env = baseApi[envVersion]
}