微信小程序中scss、ts、wxml
1. WXML(WeiXin Markup Language)
它的功能类似于 HTML,主要用于搭建页面的结构。借助各种组件标签,像 <view>
、<text>
、<button>
等,就能构建出小程序的界面。并且,它还支持数据绑定、条件渲染以及列表渲染等功能。
<!-- 页面结构 -->
<view class="container"><text>{{message}}</text><button bindtap="changeMessage">点击修改文本</button>
</view>
2. SCSS(Sassy CSS)
这是 CSS 的一种扩展语言,小程序支持 SCSS 语法(需在工具里进行配置)。通过使用变量、嵌套、混合等特性,能让样式的编写更加高效。编写完成后,SCSS 文件会被编译成小程序所使用的 wxss
文件。
/* 页面样式 */
.container {padding: 20rpx;text {color: #333;font-size: 32rpx;}button {margin-top: 20rpx;background-color: #07c160;}
}
3. TS(TypeScript)
它是 JavaScript 的超集,为 JavaScript 增添了静态类型检查功能。在小程序里使用 TypeScript,可以提高代码的可维护性和开发效率。小程序的逻辑层代码,像页面的生命周期函数、事件处理函数等,都可以用 TypeScript 来编写。
// 页面逻辑
Page({data: {message: 'Hello World'},// 点击事件处理函数changeMessage() {this.setData({message: '你好,小程序!'});}
});