微信小程序语法

最新推荐文章于 2025-10-04 11:49:48 发布

原创最新推荐文章于 2025-10-04 11:49:48 发布 · 918 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

一、WXML 模板语法

1. 数据绑定

通过双大括号 {{ }} 实现数据与视图的绑定，支持内容、属性和简单运算。

内容绑定：<view>{{ message }}</view>，其中 message 是页面 data 中的数据

属性绑定：<image src="{{ imgUrl }}"></image>，属性值需用双引号包裹

运算支持：

算术运算：{{ 1 + 2 }}

逻辑判断：{{ isShow ? '显示' : '隐藏' }}

字符串拼接：{{ 'Hello ' + name }}

2. 条件渲染

根据条件控制元素是否渲染，主要有 wx:if 和 hidden 两种方式。

wx:if 系列：

<view wx:if="{{ score > 90 }}">优秀</view>
<view wx:elif="{{ score > 60 }}">及格</view>
<view wx:else>不及格</view>

特点：动态创建/移除元素，适合条件不常变化的场景

hidden：

<view hidden="{{ isHide }}">内容</view>

特点：通过样式控制显示（display: none），适合频繁切换的场景

3. 列表渲染

通过 wx:for 循环渲染列表数据，配合 wx:key 提高性能。

基本用法：

<view wx:for="{{ list }}" wx:key="index">
  {{ index }}: {{ item.name }}
</view>

item 为当前项，index 为索引，默认名称可通过 wx:for-item 和 wx:for-index 自定义

wx:key 作用：标识列表项唯一性，推荐使用数据中的唯一字段（如 id），避免使用 index（频繁更新时可能出错）

4. 事件绑定

响应用户交互，通过 bind:事件名或 catch:事件名绑定，事件处理函数定义在页面 .js 中。

常用事件：tap（点击）、input（输入）、change（值改变）、longpress（长按）

基本用法：

<button bind:tap="handleTap">点击</button>

// 页面 .js 中
Page({
  handleTap(e) {
    console.log('点击事件触发', e)
  }
})

传递参数：通过 data-* 自定义属性，在事件对象中通过 e.currentTarget.dataset 获取

<button bind:tap="handleClick" data-id="123">点击</button>

// 页面 .js 中
handleClick(e) {
  console.log(e.currentTarget.dataset.id) // 输出 123
}

bind 与 catch 区别：bind 不阻止事件冒泡，catch 阻止事件冒泡

5. 表单双向绑定

通过 wx:model 实现表单控件与数据的双向绑定。

<input wx:model="{{ username }}" type="text" placeholder="请输入用户名" />
<checkbox wx:model="{{ isAgree }}" />同意协议

// 页面 .js 中
Page({
  data: {
    username: '',
    isAgree: false
  }
})

二、WXSS 样式语法

1. 基础语法

WXSS 基于 CSS 扩展，支持大部分 CSS 选择器和属性，新增 rpx 尺寸单位和样式导入功能。

2. 尺寸单位 rpx

rpx（responsive pixel）是自适应单位，规定屏幕宽度为 750rpx，适配不同设备。

示例：在 375px 宽的设备上，1rpx = 0.5px；在 750px 宽的设备上，1rpx = 1px。

<view style="width: 375rpx; height: 100rpx;"></view>

3. 样式导入

通过 @import 导入外部 WXSS 文件，路径为相对路径。

// 页面 .wxss 中
@import "../../common/common.wxss";

.container {
  padding: 20rpx;
}

4. 选择器

支持的选择器：类选择器（.class）、id 选择器（#id）、元素选择器（view、button 等）、后代选择器（.parent .child）、伪类选择器（:active、:focus）。

不支持通配符（*）、属性选择器（[attr]）等。

5. 全局与局部样式

全局样式：在 app.wxss 中定义，作用于所有页面

局部样式：在页面 .wxss 中定义，仅作用于当前页面，同名样式会覆盖全局样式（遵循 CSS 优先级）

三、页面与应用配置语法

1. 全局配置（app.json）

配置小程序全局属性，如页面路径、窗口表现、tabBar 等，格式为 JSON 对象。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "小程序示例",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home-selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/images/log.png",
        "selectedIconPath": "/images/log-selected.png"
      }
    ]
  }
}

2. 页面配置（页面 .json）

配置当前页面的窗口表现，覆盖全局配置中 window 字段的同名属性。

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

四、WXS 脚本语法

1. 基本概念

WXS（WeiXin Script）是小程序的脚本语言，用于在 WXML 中处理数据，不能在 .js 中使用，语法类似 JavaScript 但有差异。

2. 使用方式

WXML 中嵌入 WXS：

<wxs module="m1">
  function formatPrice(price) {
    return '¥' + price.toFixed(2);
  }
  module.exports = {
    formatPrice: formatPrice
  };
</wxs>

<view>{{ m1.formatPrice(99) }}</view> // 输出 ¥99.00

引用外部 WXS 文件：

// utils/tools.wxs
function toUpperCase(str) {
  return str.toUpperCase();
}
module.exports = {
  toUpperCase: toUpperCase
};

// 页面 WXML 中
<wxs src="/utils/tools.wxs" module="tools"></wxs>
<view>{{ tools.toUpperCase('hello') }}</view> // 输出 HELLO

3. 与 JavaScript 差异

变量声明：仅支持 var，不支持 let、const

函数定义：仅支持 function 关键字，不支持箭头函数

作用域：与 .js 作用域隔离，不能调用小程序 API 或 .js 中定义的函数

数据类型：支持 number、string、boolean、object、array、function、date、regexp 等

五、网络请求语法

1. wx.request 基本用法

wx.request({
  url: 'https://api.example.com/data', // 必须为 HTTPS 协议
  method: 'GET', // 请求方法，默认 GET
  data: {
    id: 123
  },
  header: {
    'Content-Type': 'application/json'
  },
  success(res) {
    console.log('请求成功', res.data);
  },
  fail(err) {
    console.error('请求失败', err);
  },
  complete() {
    console.log('请求完成');
  }
});

2. 注意事项

需在微信公众平台配置合法域名（本地调试可关闭校验）

默认超时时间可通过全局配置 networkTimeout 调整

支持 Promise 封装，简化异步代码

function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success(res) { resolve(res.data) },
      fail(err) { reject(err) }
    });
  });
}

// 使用
request({ url: 'https://api.example.com/data' })
  .then(data => console.log(data))
  .catch(err => console.error(err));