小程序的基本架构（WXML、WXSS、JS、JSON）

微信小程序作为一种轻量级的应用形式，凭借其便捷的开发模式和高效的运行机制，已经成为移动开发的重要选择。它的基本架构由四种核心文件类型构成：WXML、WXSS、JS和JSON，每种文件承担不同的职责，共同完成小程序的逻辑、样式和结构定义。

WXML：小程序的结构层

WXML（WeiXin Markup Language）是小程序的模板语言，类似于HTML，但提供了更丰富的组件和逻辑绑定能力。它通过数据绑定、条件渲染和列表渲染等特性，将动态数据与页面结构紧密结合。

数据绑定示例

<view>{{message}}</view>

在对应的JS文件中定义数据：

Page({
  data: {
    message: 'Hello World!'
  }
})

条件渲染

<view wx:if="{{showText}}">显示文本</view>
<view wx:else>隐藏文本</view>

列表渲染

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

WXSS：小程序的样式层

WXSS（WeiXin Style Sheets）是小程序的样式语言，扩展了CSS的特性，支持rpx单位和样式导入。它的核心目标是实现自适应布局。

基本样式示例

.container {
  width: 750rpx; /* 750rpx等于屏幕宽度 */
  height: 200rpx;
  background-color: #f0f0f0;
}

样式导入

@import "common.wxss";

选择器支持

WXSS支持class选择器、id选择器和伪类选择器，但不支持通配符选择器。

JS：小程序的逻辑层

JavaScript文件处理页面逻辑、事件响应和数据交互。每个页面或组件都有对应的JS文件，通过Page()或Component()方法注册。

页面逻辑示例

Page({
  data: {
    count: 0
  },
  increment: function() {
    this.setData({
      count: this.data.count + 1
    });
  }
})

事件处理

<button bindtap="increment">点击增加</button>

生命周期函数

Page({
  onLoad: function(options) {
    console.log('页面加载');
  },
  onShow: function() {
    console.log('页面显示');
  }
})

JSON：小程序的配置层

JSON文件用于静态配置，包括页面配置和全局配置。它采用严格的JSON格式，不支持注释。

页面配置示例

{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "custom-component": "/components/custom/custom"
  }
}

全局配置

app.json是小程序的全局配置文件：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff"
  }
}

文件组织与协作

一个典型的小程序页面由四个同名不同后缀的文件组成：

• index.wxml
• index.wxss
• index.js
• index.json

这种分离式的架构设计使得结构、样式、逻辑和配置各司其职，便于开发和维护。例如，当需要修改页面样式时，开发者只需关注WXSS文件，而不会影响其他层面的代码。

组件化开发

小程序支持自定义组件，每个组件也由四个文件组成：

components/
  custom/
    custom.wxml
    custom.wxss
    custom.js
    custom.json

组件配置需要在json中声明：

{
  "component": true,
  "usingComponents": {}
}

数据通信机制

小程序提供了多种数据传递方式：

页面间传值

wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})

组件通信

父组件向子组件传递数据：

<custom-component prop-a="{{dataA}}"></custom-component>

子组件properties定义：

Component({
  properties: {
    propA: {
      type: String,
      value: ''
    }
  }
})

全局与局部样式

WXSS支持全局样式和局部样式：

• app.wxss：全局样式，作用于所有页面
• page.wxss：局部样式，仅作用于当前页面

样式优先级遵循就近原则，局部样式会覆盖全局样式。

模块化开发

JavaScript支持模块化导入导出：

// utils.js
function formatTime(date) {
  // 实现代码
}
module.exports = {
  formatTime: formatTime
}

// 页面JS
const utils = require('../../utils/utils.js')

动态样式处理

WXSS支持通过JS动态设置样式：

<view style="color: {{textColor}};">动态样式</view>

JS中控制：

Page({
  data: {
    textColor: 'red'
  },
  changeColor: function() {
    this.setData({
      textColor: 'blue'
    })
  }
})

配置覆盖规则

小程序的配置遵循以下优先级：

1. 页面配置 > 全局配置
2. 后面的配置 > 前面的配置

例如，如果在app.json和页面json中都定义了navigationBarTitleText，页面配置会覆盖全局配置。

特殊文件处理

除了四种基本文件类型外，小程序还有一些特殊文件：

• project.config.json：项目配置文件
• sitemap.json：搜索索引配置
• 插件配置文件

这些文件虽然不是必须的，但在特定场景下非常有用。例如project.config.json可以保存项目的个性化配置：

{
  "setting": {
    "es6": true,
    "postcss": true
  }
}