微信小程序 WXML、WXSS 和JS介绍及详解

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的概念，用户扫一扫或者搜一下即可打开应用。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用性能。微信小程序的开发涉及三个核心技术：WXML、WXSS和JS，它们分别用于构建小程序的结构、样式和行为。 WXML（WeiXin Markup Language）是一种标记语言，类似于HTML，是微信小程序页面结构的描述语言。每个页面都是由对应的.wxml文件构成。WXML中，标签的使用比HTML更加严格，单标签必须以/>结尾。微信小程序提供了一些基础的组件标签，如<view>和<text>，其中<view>类似于HTML中的<div>，是一个块级元素，而<text>则是文本内容的容器。虽然也可以使用其他HTML标签，如<div>，但它们在小程序中会被解释为内联元素，并且不在白名单上的属性会被移除。此外，WXML支持条件渲染和列表渲染，并且可以绑定事件处理函数。 在WXML中，一些组件有自己的特性，例如scroll-view组件可以控制滚动条的位置，但用户滚动后不会自动更新scroll-top和scroll-left属性，开发者需要通过setData方法手动更新。而input组件在微信小程序中默认仅支持文本居左，其他属性（如居中或居右）无法通过模拟器设置实现，只能通过表单标签来获取其值。对于map组件，需要在页面的onLoad事件中再进行加载，以避免直接在首页加载失败的问题。 WXSS（WeiXin Style Sheets）是微信小程序的样式表，类似于CSS。由于微信小程序的渲染机制，WXSS的大部分特性与CSS相同，但是也有一些差异，例如不支持大括号嵌套，不能使用@keyframes和CSS动画，也不能引入本地资源。WXSS中引入的字体和图片必须使用线上资源或base64编码。WXSS同样支持rpx单位，它是一种基于屏幕宽度的尺寸单位，推荐用于布局。在WXSS中，伪类如:hover、:active、:focus以及伪元素如::before和::after是被支持的，但是:first-child、:last-child、:nth-child等选择器则不支持。WXSS还支持媒体查询，以便在不同屏幕尺寸下进行样式适配。 JS（JavaScript）是微信小程序的行为控制部分。与传统Web开发不同，小程序的JS运行环境是独立于视图层的。开发者通过编写JS代码来处理用户的操作，或者改变数据模型，从而通过setData方法将数据变化同步到页面视图上。微信小程序的JS中不能直接获取到页面的px级宽度和高度，开发者无法知道当前使用的是rpx还是px单位，这是微信小程序JS开发中需要注意的一个局限性。 除了基础的结构、样式和行为的开发，微信小程序还提供了一些高级特性，例如全局配置、生命周期函数、模块化开发和组件化开发等。全局配置中可以设置窗口外观、导航条样式、网络超时时间等，而生命周期函数则用于监听小程序的不同生命周期事件。模块化开发允许将JS代码分割成不同的模块，以提高代码的组织性和可维护性。组件化开发则可以将页面的一部分作为一个独立的组件，这样可以在多个页面中复用相同的组件。 总而言之，微信小程序的WXML、WXSS和JS是三个紧密协作的技术栈，它们共同决定了小程序的结构、样式和交互方式。开发者需要熟悉这些技术，以便高效地开发出具有良好用户体验的小程序。