微信小程序记录贴

这是一个记录贴记录一下写小程序的时候遇见的一些问题

微信小程序原生sass的使用

小程序目前已经支持sass,less,ts不用再去vscode导入插件然后转成wxss了具体操作如下: 官方文档->工具->开发辅助-># 原生支持 TypeScript->### 旧项目即可找到官方对此的说明

在 project.config.json 文件中，修改 setting 下的 useCompilerPlugins 字段为 ["typescript"]，即可开启工具内置的 typescript 编译插件。 如需同时开启 less 编译插件，可将该字段修改为 ["typescript", "less"]。 目前支持三个编译插件：typescript、less、sass

微信小程序引入icon-font

微信小程序坑比较多,引入icon-font建议看下这位老哥的教程: 详解：微信小程序中使用 iconfont 字体图标 - 掘金 (juejin.cn)

这里贴一下我的实践步骤

第一步:项目设置选中Base64

第二步:下载后修改文件为.scss(因为我配置了sass修改成wxss也可以)

第三步:app.wxss导入

第四步:按需修改默认icon样式更好适配微信小程序

.iconfont {
  font-family: "iconfont" !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第五步:使用

  <text class="iconfont icon-xxx;" />
  <text class="iconfont icon-wifi-5;" />

效果