微信小程序中scss、ts、wxml

666HZ6662025-07-04 20:27

1. WXML（WeiXin Markup Language）

它的功能类似于 HTML，主要用于搭建页面的结构。借助各种组件标签，像 <view>、<text>、<button> 等，就能构建出小程序的界面。并且，它还支持数据绑定、条件渲染以及列表渲染等功能。

html 复制代码

<!-- 页面结构 -->
<view class="container">
  <text>{{message}}</text>
  <button bindtap="changeMessage">点击修改文本</button>
</view>

2. SCSS（Sassy CSS）

这是 CSS 的一种扩展语言，小程序支持 SCSS 语法（需在工具里进行配置）。通过使用变量、嵌套、混合等特性，能让样式的编写更加高效。编写完成后，SCSS 文件会被编译成小程序所使用的 wxss 文件。

css 复制代码

/* 页面样式 */
.container {
  padding: 20rpx;
  
  text {
    color: #333;
    font-size: 32rpx;
  }
  
  button {
    margin-top: 20rpx;
    background-color: #07c160;
  }
}

3. TS（TypeScript）

它是 JavaScript 的超集，为 JavaScript 增添了静态类型检查功能。在小程序里使用 TypeScript，可以提高代码的可维护性和开发效率。小程序的逻辑层代码，像页面的生命周期函数、事件处理函数等，都可以用 TypeScript 来编写。

javascript 复制代码

// 页面逻辑
Page({
  data: {
    message: 'Hello World'
  },
  
  // 点击事件处理函数
  changeMessage() {
    this.setData({
      message: '你好，小程序！'
    });
  }
});