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

一、WXML

WXML（WeiXin Markup Language）是一套标记语言，类似于HTML，用于描述微信小程序的界面。WXML具有以下特点：

• 建立在HTML5标准之上，拥有类似于HTML的结构语法和基本标签
• 支持数据绑定，根据数据动态渲染页面
• 支持自定义组件，提高代码复用性

WXML基本语法如下：

<标签名 属性名1="属性值1" 属性名2="属性值2">内容</标签名>

其中，标签名与属性名均不区分大小写，属性值必须用双引号括起来。

示例1：展示一个WXML页面

<view class="container">
  <view class="header">
    <text>这是头部</text>
  </view>
  <view class="content">
    <text>这是内容</text>
  </view>
  <view class="footer">
    <text>这是底部</text>
  </view>
</view>

二、WXSS

WXSS（WeiXin Style Sheets）是一种样式表语言，类似于CSS，用于描述小程序的界面样式。与CSS不同的是，WXSS支持rpx单位，可以根据设备的屏幕宽度进行自适应。

WXSS基本语法如下：

选择器 {
  属性名1: 属性值1;
  属性名2: 属性值2;
}

示例2：展示一个WXSS样式

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 10%;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 50rpx;
  font-size: 18rpx;
}
.content {
  flex: 1;
  text-align: center;
  line-height: 400rpx;
  font-size: 30rpx;
}
.footer {
  height: 10%;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 50rpx;
  font-size: 18rpx;
}

三、JS

JS（JavaScript）是一种脚本语言，用于构建小程序的业务逻辑。小程序中的JS代码全部运行在微信客户端中，可以通过调用微信提供的API操作小程序的各种能力。

JS基本语法如下：

// 单行注释
/* 多行
注释 */

// 变量声明
var a = 1;
let b = 2;
const c = 3;

// 函数声明
function add(x, y) {
  return x + y;
}

// 条件语句
if (a > b) {
  console.log("a > b");
} else {
  console.log("a <= b");
}

// 循环语句
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// API调用
wx.request({
  url: 'https://api.example.com',
  success: function(res) {
    console.log(res.data);
  }
});

示例3：展示一个简单JS代码

// index.js
Page({
  data: {
    text: 'hello world!'
  },
  onLoad: function() {
    console.log('页面加载完成')
  }
})

以上是“微信小程序 WXML、WXSS 和JS介绍及详解”的完整攻略，通过WXML、WXSS和JS的学习，您可以了解小程序的基本界面结构、样式和业务逻辑。