前言

在之前的學(xué)習(xí)中，我詳細(xì)了解了小程序項(xiàng)目的組成結(jié)構(gòu)和JSON配置文件的作用。今天將深入探討構(gòu)成小程序頁(yè)面的另外三個(gè)核心文件：WXML、WXSS和JS文件。這三個(gè)文件與JSON文件共同組成了小程序的完整頁(yè)面體系，它們各司其職，協(xié)同工作，為開(kāi)發(fā)者提供了完整的頁(yè)面開(kāi)發(fā)能力。

一、WXML模板文件

1.1 什么是WXML

WXML（WeiXin Markup Language）是微信小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，用于構(gòu)建小程序的頁(yè)面結(jié)構(gòu)。

1.2 WXML與HTML的主要區(qū)別

WXML雖然與HTML相似，但在標(biāo)簽體系和功能特性上有顯著差異：

標(biāo)簽對(duì)應(yīng)關(guān)系：

• <view> 代替 <div> - 視圖容器，用于布局和包裹內(nèi)容

• <text> 代替 <span> - 文本容器，用于包裹文本內(nèi)容

• <image> 代替 <img> - 圖片組件，用于顯示圖片

• <navigator> 代替 <a> - 導(dǎo)航組件，用于頁(yè)面跳轉(zhuǎn)

示例對(duì)比：

html

<!-- HTML寫法 -->
<div class="container">
  <span class="title">產(chǎn)品名稱</span>
  <img src="product.jpg" alt="產(chǎn)品圖片">
  <a href="detail.html">查看詳情</a>
</div>

<!-- WXML寫法 -->
<view class="container">
  <text class="title">產(chǎn)品名稱</text>
  <image src="product.jpg"></image>
  <navigator url="/pages/detail/detail">查看詳情</navigator>
</view>

二、WXSS樣式文件

2.1 什么是WXSS

WXSS（WeiXin Style Sheets）是微信小程序的樣式語(yǔ)言，用于描述WXML組件的外觀樣式。

2.2 WXSS的主要特點(diǎn)

① 兼容CSSWXSS支持CSS的大部分特性，包括：

• 常用選擇器（類選擇器、ID選擇器、元素選擇器）

• 盒模型相關(guān)屬性

• Flex布局和Grid布局

• 文本樣式和字體設(shè)置

• 背景和邊框樣式

示例：

css

/* 與CSS基本一致 */
.container {
  display: flex;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.title {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

② 擴(kuò)展的特性

尺寸單位rpx：

• 響應(yīng)式像素，可以根據(jù)屏幕寬度自適應(yīng)

• 設(shè)計(jì)稿一般以750rpx為基準(zhǔn)

css

/* 在750rpx設(shè)計(jì)稿上，375rpx相當(dāng)于屏幕一半寬度 */
.box {
  width: 375rpx;  /* 在任何寬度的屏幕上都是屏幕的一半 */
  height: 200rpx;
}

樣式導(dǎo)入：

css

/* 導(dǎo)入外部樣式文件 */
@import "common.wxss";

2.3 樣式優(yōu)先級(jí)規(guī)則

text

內(nèi)聯(lián)樣式 > 頁(yè)面樣式 > 全局樣式

• 內(nèi)聯(lián)樣式：直接在WXML中寫的style屬性

• 頁(yè)面樣式：當(dāng)前頁(yè)面的.wxss文件

• 全局樣式：app.wxss文件

三、JS邏輯文件（具體細(xì)節(jié)后面講解）

3.1 JS文件的分類與作用

在小程序中，JS文件按照功能和使用場(chǎng)景分為三類，每類文件都有特定的調(diào)用函數(shù)：

① app.js - 應(yīng)用入口文件

• 通過(guò)調(diào)用 App() 函數(shù) 來(lái)注冊(cè)整個(gè)小程序

• 是整個(gè)小程序的起點(diǎn)，管理全局狀態(tài)

• 執(zhí)行一次，整個(gè)小程序生命周期內(nèi)有效

② 頁(yè)面的.js文件 - 頁(yè)面邏輯文件

• 通過(guò)調(diào)用 Page() 函數(shù) 來(lái)注冊(cè)單個(gè)頁(yè)面

• 每個(gè)頁(yè)面都必須有對(duì)應(yīng)的JS文件

• 管理頁(yè)面的數(shù)據(jù)、事件和生命周期

③ 普通的.js文件 - 功能模塊文件

• 不需要調(diào)用特定函數(shù)，直接定義模塊功能

• 用于封裝可復(fù)用的工具函數(shù)和業(yè)務(wù)邏輯

• 通過(guò) require() 或 import 在其他文件中引入使用

3.2 JS文件的基本結(jié)構(gòu)

基于上面的分類，JS文件的基本結(jié)構(gòu)也相應(yīng)不同：

① app.js 的基本結(jié)構(gòu)

// 調(diào)用 App() 函數(shù)注冊(cè)小程序
App({
  // 全局?jǐn)?shù)據(jù)
  globalData: {},
  
  // 生命周期函數(shù)
  onLaunch() {},
  onShow() {},
  onHide() {},
  
  // 全局方法
  globalMethod() {}
})

② 頁(yè)面.js 的基本結(jié)構(gòu)

// 調(diào)用 Page() 函數(shù)注冊(cè)頁(yè)面
Page({
  // 1. 數(shù)據(jù)部分 - 定義頁(yè)面的初始數(shù)據(jù)
  data: {},
  
  // 2. 生命周期函數(shù) - 控制頁(yè)面的生命周期
  onLoad() {},
  onShow() {},
  onReady() {},
  
  // 3. 事件處理函數(shù) - 響應(yīng)用戶的交互操作
  handleTap() {},
  
  // 4. 自定義函數(shù) - 實(shí)現(xiàn)特定的業(yè)務(wù)邏輯
  customMethod() {}
})

③ 普通.js 的基本結(jié)構(gòu)

// 直接定義模塊功能
// 工具函數(shù)定義
function formatTime() {}

// 導(dǎo)出供其他文件使用
module.exports = {
  formatTime: formatTime
}

四、總結(jié)：四個(gè)文件協(xié)同工作

通過(guò)今天的學(xué)習(xí)，我完整了解了小程序頁(yè)面的四個(gè)核心文件：

• .json文件 - 配置管理

  • 頁(yè)面窗口配置

  • 導(dǎo)航欄樣式設(shè)置

• .js文件 - 邏輯控制

  • 數(shù)據(jù)處理和狀態(tài)管理

  • 生命周期控制

  • 事件響應(yīng)處理

• .wxml文件 - 結(jié)構(gòu)展示

  • 頁(yè)面結(jié)構(gòu)描述

  • 數(shù)據(jù)綁定渲染

  • 條件/列表渲染

• .wxss文件 - 樣式美化

  • 頁(yè)面樣式設(shè)置

  • 響應(yīng)式布局實(shí)現(xiàn)

  • 視覺(jué)樣式美化

這四個(gè)文件形成了一套完整的前端開(kāi)發(fā)體系：

• 分離關(guān)注點(diǎn)：每個(gè)文件負(fù)責(zé)特定的功能

• 緊密協(xié)作：JS提供數(shù)據(jù)，WXML展示結(jié)構(gòu)，WXSS美化外觀，JSON配置表現(xiàn)

• 高效開(kāi)發(fā)：清晰的職責(zé)劃分提高了開(kāi)發(fā)效率和代碼可維護(hù)性

掌握這四個(gè)文件的特性和使用方法，是開(kāi)發(fā)微信小程序的基礎(chǔ)。在實(shí)際開(kāi)發(fā)中，需要根據(jù)業(yè)務(wù)需求，合理地在四個(gè)文件間分配功能，編寫出結(jié)構(gòu)清晰、易于維護(hù)的小程序代碼。

總結(jié)

到此這篇關(guān)于微信小程序開(kāi)發(fā)之WXML、WXSS與JS的文章就介紹到這了,更多相關(guān)微信小程序WXML、WXSS與JS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論