微信小程序原生支持TS、LESS、SASS能力探究

文章目录

  • 原生支持
  • 开始使用
    • 旧项目
    • 新建项目
    • TS声明文件更新
  • 功能说明
    • less 使用全局变量
    • sass 使用全局变量

可以参考原文

在之前开发小程序中,无法使用 less/sass 等 css 预编译语言,也无法使用 TS 进行开发,但在最新的编辑器版本中,对这些进行了支持。

原生支持

小程序代码包要求代码文件为 wxml / wxss / js / json / wxs。

如果我们希望使用 TypeScript 或 less 去开发小程序,就需要将 ts 文件或 less 文件编译成对应的 js 文件 或 wxss 文件,这个编译过程以前是需要开发者在工具外自行配置。

从开发者工具 1.05.2109101 以上开始,优化工具内置的编译模块,支持以编译插件的形式,扩展编译功能。

使用这种方式有两个好处:

  1. 项目内只需要创建 ts 文件即可,无需再生成同名的 js 文件,less/sass 文件同理。
  2. 编译流程由开发者工具控制,按需编译,开发体验更好。

开始使用

旧项目

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

新建项目

可在创建小程序项目时,选择对应的语言模板。 目前支持的语言模板有

  • TypeScript
  • TypeScript + Less
  • TypeScript + Sass

TS声明文件更新

从 开发者工具 1.05.2203032 以上开始,如果是从上述的模板创建的 TS 项目,遇到小程序相关类型声明过时的情况,可以手动更新。

具体步骤是在编辑器目录树上,找到 typings/types/wx 目录,右键,点击 「更新声明文件」 即可:

功能说明

  • 目前的 ts 代码转换成 js 代码的逻辑,是由 @babel/plugin-transform-typescript 插件进行处理的,因此在编译过程中,仅仅是移除了ts代码中类型声明等信息。类型错误这类信息,在编译过程是没有提示的,只在编辑器中给予提示的。
  • 启用 typescript 编译插件后,js 文件也是支持的,如果存在同名的 ts 和 js 文件,则优先使用 ts 文件。
  • 除了普通小程序,小程序插件开发也是支持的。
  • miniprogram-ci 从 1.6.1 版本开始,也支持此功能。

less 使用全局变量

从开发者工具 1.06.2403132 以上开始,支持 less 直接引用 app.less 中声明的变量和方法,编译器会默认为所有的非 app.less 文件增加引用

代码示例:

// app.less
@redcolor: red;
// 页面.less
.red {color: @redcolor; // 直接使用 app.less 中定义的变量
}

在开发者工具中预览效果

sass 使用全局变量

从开发者工具 1.06.2403132 以上开始,支持 sass 直接引用全局变量和方法,和 less 不同,我们需要新增一个 global.scss 文件放置在 app.scss 同级,将公共的变量和方法写在 global.scss 中,编译器会默认为所有的非 global.scss 文件增加引用。

代码示例:

// global.scss
$red: red;
// 其他.scss
.red {color: global.$red; // 使用 global 中的变量
}

在开发者工具中预览效果

注意:尽量不要在 global.scss 写非变量定义和方法定义,否则可能增大代码体积。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/53995.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3:el-table实现日期的格式化

后端如果返回的是时间戳,需要我们进行日期格式化 例如:2024-09-11T14:19:14 定义一个日期解析的工具组件 export function formatDateAsYYYYMMDDHHMMSS(dateStr: any) {const date new Date(dateStr);const year date.getFullYear();const month S…

Android 12 SystemUI下拉状态栏禁止QuickQSPanel展开

1.概述 遇到需求,QuickQSPanel首次下拉后展示快捷功能模块以后就是显示QuickQSPanel,而不展开QSPanel,接下来要从下滑手势下拉出状态栏分析功能实现。也就是直接是展开状态。 2、涉及核心类 frameworks\base\packages\SystemUI\src\com\and…

高级实时通信:基于 Python 的 WebSocket 实现与异步推送解决方案

高级实时通信:基于 Python 的 WebSocket 实现与异步推送解决方案 目录 🟢 WebSocket 协议概述🔵 在 FastAPI 中实现 WebSocket🟣 Django Channels 实现异步实时通信🔴 使用 Redis 实现实时推送 🟢 1. WebS…

关于 Camera Tuning 岗位的一些认识和看法

前言: 之前也写过几篇关于Camera Tuning岗位的相关介绍: IQ Tuning 学习路线 关于入职 ISP Tuning 岗位的几个问题及解答 随着工作时间越长,对这个岗位的认识较之前也有了一些更深刻的理解,这里整理总结一下。 一方面是当做现阶…

PHP一键约课高效健身智能健身管理系统小程序源码

一键约课,高效健身 —— 智能健身管理系统让健康触手可及 🏋️‍♀️ 告别繁琐,一键开启健身之旅 你还在为每次去健身房前的繁琐预约流程而烦恼吗?现在有了“一键约课高效健身智能健身管理系统”,所有问题都迎刃而解…

智能体-AI-Agent-简介

文章目录 一,什么是AI Agent二,扣子个人空间团队空间探索区 一,什么是AI Agent AI智能体并没有什么特别,本质上就是一个帮助你解决工作和学习中的一个工具。 很多自媒体把智能体描述的天花乱坠,那不过是他们畅想的智…

Spring Security认证与授权

1 Spring Security介绍 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架。由于它是Spring生态系统中的一员,因此它伴随着整个Spring生态系统不断修正、升级,在spring boot项目中加入springsecurity更是…

Vue的学习(三)

目录 一、for循环中key的作用 1‌.提高性能‌: ‌2.优化用户体验‌: ‌3.辅助Vue进行列表渲染‌: 4‌.方便可复用组件的使用‌: 二、methods及computed及wacth的区别 三、过滤器 1.Vue 2 过滤器简介 定义过滤器 使用过滤…

用 Swift 写 Android App ?来了解下 Skip 原生级跨平台框架

最近在找资料的时候,机缘巧合发现了一个有趣的商业跨平台框架 Skip ,刚好看到了它发布 1.0 正式版,主要作用是将 Swift 开发引入到 Android 领域,这样 App 就可以共享 Swift 的业务逻辑,在 SwiftUI 中完成 Android App…

C#基础(8)函数

前言 我们先前已经具备了一些自己写小程序的能力,但是依旧还是逃不过大量的代码,那么今天,我们就将学习一个减少我们重复工作量的东西:函数。 在数学中我们知道,函数就是一个固定的公式,会画固定的图。 …

Python | Leetcode Python题解之第395题至少有K个重复字符的最长子串

题目: 题解: class Solution:def longestSubstring(self, s1: str, k: int) -> int:if k 1: return len(s1)n len(s1)res 0for c in range(1, len(set(s1)) 1):# 滑窗中字母种类个数恰好为 cfreq Counter()l cnt tcnt 0 for r, ch in enu…

代码随想录训练营Day3 | 链表理论基础 | 203.移除链表元素 | 707.设计链表 | 206.反转链表

今天任务:学习链表理论基础 链表的类型 链表的存储方式 链表的定义…

开发一款通过蓝牙连接控制水电表的微信小程序

增强软硬件交互 为了更好的解决师生生活中的实际问题,开发蓝牙小程序加强了和校区硬件的交互。 比如通过蓝牙连接控制水电表,减少实体卡片的使用。添加人脸活体检测功能,提高本人认证效率,减少师生等待时间。 蓝牙水电控展示 蓝…

计算机科学基础 -- 超流水线

超流水线的概念 超流水线是一种进一步提高处理器性能的技术,它在传统流水线的基础上,将多个流水线组合在一起,能够在同一个时钟周期内同时执行多条指令。这种设计允许处理器的多个功能单元并行处理不同的指令,从而提高指令级并行…

HashMap常用方法及底层原理

目录 一、什么是HashMap二、HashMap的链表与红黑树1、数据结构2、链表转为红黑树3、红黑树退化为链表 三、存储(put)操作四、读取(get)操作五、扩容(resize)操作六、HashMap的线程安全与顺序1、线程安全2、…

【LeetCode每日一题】2024年9月第二周(上)

2024.9.9 中等 难度评分 1333 链接:2181. 合并零之间的节点 (1)题目描述: (2)示例 (3)分析 整体来说,描述还算清晰的题目,找到0节点所框定的区域&#xff0c…

Python中列表、元组、字典和集合的详细解释

Python中列表、元组、字典和集合的详细解释 1. 列表(List) 定义:列表是可变的有序集合,可以存储多个项目。列表中的项目可以是不同类型的。 特点: 有序:元素的顺序是固定的。可变:可以修改内…

Pandas读取某列、某行数据——loc、iloc区别

loc:通过行、列的名称或标签来索引 iloc:通过行、列的索引位置来寻找数据 首先,我们先创建一个DataFrame生成数据 import pandas as pddata {a:[1,2,3,4,5],b:[6,7,8,9,10],c:[11,12,13,14,15] } data pd.DataFrame(data) print(data) 运行…

工具、环境等其他小问题归纳

此篇文章内容会不定期更新,仅作为学习过程中的笔记记录 一、查询Windows 10环境下python版本与安装路径 若电脑成功安装了python环境,不小心忘了版本。 I、查询版本 1、cmd窗口快捷查询 Win R 输入cmd 进入窗口; 直接输入 python --version …

QT如何ui上的QTableWidget控件如何使用

在Qt中,QTableWidget是一个常用的控件,用于在UI上展示和操作表格数据。如果你是在Qt Designer中设计UI,那么你可以直接将QTableWidget从Widget Box拖拽到你的窗体上。如果你是在代码中创建UI,那么你需要通过编程方式添加QTableWid…