进阶初学：微信小程序核心语法与配置实战DAY02

在上一篇我们搭建了小程序基础，这篇将带你深入WXML 模板、WXSS 样式、全局 / 页面配置和网络请求，让你能写出更灵活、美观的小程序。

一、WXML 模板语法：让页面 "活" 起来

WXML 是小程序的页面结构语言，通过模板语法实现动态渲染，核心是条件渲染和列表渲染。

1. 条件渲染：控制元素显示 / 隐藏

• wx:if 系列：条件满足时才渲染节点，不满足时会从 DOM 中移除

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

• hidden属性：通过 CSS 控制显示 / 隐藏，节点始终存在于 DOM 中

<view hidden="{{!isLogin}}">请先登录</view>

区别：频繁切换显示用hidden，只在少数情况显示用wx:if，性能更优。

2. 列表渲染：循环展示数据

• wx:for：遍历数组，重复渲染节点
• wx:key：指定唯一标识，提升列表渲染性能（必填）

<view wx:for="{{list}}" wx:key="id">
  <text>第{{index+1}}项：{{item.name}}</text>
</view>

Page({
  data: {
    list: [
      {id: 1, name: '小程序学习'},
      {id: 2, name: '样式美化'},
      {id: 3, name: '网络请求'}
    ]
  }
})

二、WXSS 样式：适配多端的页面美化

WXSS 是小程序的样式语言，基于 CSS 扩展，核心解决多端适配和样式复用问题。

1. 核心单位：rpx

• rpx（响应式像素）：自动适配不同屏幕宽度，750rpx = 屏幕宽度
• 示例：在 375px 宽的手机上，1rpx = 0.5px；在 414px 宽的手机上，1rpx ≈ 0.552px

.box {
  width: 375rpx; /* 永远占屏幕一半宽度 */
  height: 200rpx;
  margin: 0 auto;
}

2. 样式导入与作用域

• @import 导入：复用公共样式

/* 在页面wxss中导入公共样式 */
@import '/styles/common.wxss';

• 全局样式 vs 局部样式：
  • app.wxss：全局样式，作用于所有页面
  • 页面.wxss：局部样式，仅作用于当前页面
  • 就近原则：局部样式优先级高于全局样式，同名样式会覆盖全局

三、全局配置：app.json 掌控小程序整体

app.json 是小程序的全局配置文件，决定了小程序的页面结构、导航栏、底部 Tab 等。

1. 核心配置项

• pages：页面路径数组，第一个元素是首页

"pages": [
  "pages/index/index",
  "pages/mine/mine",
  "pages/logs/logs"
]

• window：全局窗口样式（导航栏、状态栏等）

"window": {
  "navigationBarTitleText": "我的小程序",
  "navigationBarBackgroundColor": "#1677ff",
  "backgroundColor": "#f5f5f5"
}

• tabBar：底部导航栏（最多 5 个 Tab）

"tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-active.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "images/mine.png",
      "selectedIconPath": "images/mine-active.png"
    }
  ]
}

• style：指定样式版本，推荐"v2"（新版样式）

四、页面配置：page.json 个性化定制

每个页面都可以有自己的.json配置文件，用于单独设置页面样式，遵循就近原则：页面配置会覆盖全局app.json的同名配置。

// pages/mine/mine.json
{
  "navigationBarTitleText": "个人中心",
  "enablePullDownRefresh": true, // 开启下拉刷新
  "backgroundColor": "#ffffff"
}

就近原则：页面配置优先级 > 全局配置，方便对单个页面做特殊定制。

五、网络请求：获取后端数据

小程序通过wx.request()发起网络请求，通常在页面生命周期onLoad()中调用，用于加载初始数据。

1. 基础用法

Page({
  onLoad() {
    // 页面加载时发起请求
    wx.request({
      url: 'https://api.example.com/data', // 接口地址
      method: 'GET', // 请求方法
      success: (res) => {
        console.log('请求成功', res.data);
        this.setData({
          list: res.data // 将返回数据绑定到页面
        });
      },
      fail: (err) => {
        console.error('请求失败', err);
      }
    });
  }
})

2. 注意事项

• 域名必须在微信公众平台提前配置为合法域名
• 开发阶段可在开发者工具中勾选「不校验合法域名」方便调试
• 支持GET/POST等请求方法，可通过data传递参数