0基础开发小程序08，深入理解小程序框架与组件化开发

尔岚 . 发布于 2025-05-09 11:08:05 159 浏览

在前面的系列文章中，我们逐步带领0基础的小伙伴走进了小程序开发的世界，经过前面的学习，我们已经对小程序开发有了一定的认识，今天我们将聚焦于小程序框架以及组件化开发，这是小程序开发中非常重要的两个方面，能帮助我们更高效、更规范地构建出功能丰富的小程序。

小程序框架概述

小程序框架是小程序运行的基础环境和核心支撑，它提供了一系列的API和机制，让开发者能够轻松地实现页面搭建、数据绑定、事件处理等功能。

框架结构与文件组织

小程序的框架主要包含了页面（Page）、样式（WXSS）、脚本（JS）、配置（JSON）等部分，一个小程序项目通常由多个页面组成，每个页面都有对应的.wxml、.wxss、.js和.json文件。

我们创建一个简单的首页页面，在pages目录下创建一个home文件夹，其中包含home.wxml、home.wxss、home.js和home.json文件。

home.wxml：这是页面的结构文件，用于描述页面的布局和内容，我们可以使用各种标签来构建页面，比如<view>用于创建视图容器，<text>用于显示文本等。
```
<view class="container">
<text>欢迎来到我的小程序</text>
</view>
```
home.wxss：负责页面的样式设计，它类似于CSS，但又有一些小程序特有的样式规则，在这里我们可以设置视图容器的背景颜色、文本颜色等。
```
.container {
background-color: #f0f0f0;
text-align: center;
padding-top: 50px;
}
```
home.js：是页面的逻辑处理文件，在这里我们可以监听页面的生命周期函数，处理用户事件等，比如我们可以在页面加载时执行一些初始化操作。
```
Page({
onLoad: function() {
  console.log('页面加载完成');
}
});
```
home.json：用于配置当前页面的一些属性，比如页面的标题、导航栏样式等。
```
{
"navigationBarTitleText": "首页"
}
```

框架的生命周期函数

小程序框架提供了丰富的生命周期函数，这些函数在页面的不同阶段被触发,让开发者能够精准地控制页面的行为。

onLoad：页面加载时触发，通常用于进行页面的初始化操作，比如获取数据、设置初始状态等。
onShow：页面显示时触发，当页面从后台重新进入前台时会调用,可以用于刷新页面数据等操作。
onReady：页面初次渲染完成时触发,此时可以获取到页面的节点信息等。
onHide：页面隐藏时触发,比如切换到其他页面或者小程序进入后台时调用。
onUnload：页面卸载时触发,比如页面被关闭时调用。

我们在页面的onShow函数中添加一个功能,当页面显示时打印一条提示信息。

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

组件化开发

组件化开发是小程序开发中非常重要的理念，它将页面拆分成多个独立的、可复用的组件,大大提高了开发效率和代码的可维护性。

组件的创建与使用

我们可以通过在项目中创建一个components目录来存放组件，比如创建一个名为button-component的按钮组件，它包含button-component.wxml、button-component.wxss、button-component.js和button-component.json文件。

button-component.wxml：

<view class="button-container">
<button bindtap="handleButtonTap">{{buttonText}}</button>
</view>

button-component.wxss：

.button-container {
text-align: center;
}
button {
background-color: #1aad19;
color: white;
padding: 10px 20px;
border-radius: 5px;
}

button-component.js：

Component({
properties: {
  buttonText: {
    type: String,
    value: '点击我'
  }
},
methods: {
  handleButtonTap: function() {
    console.log('按钮被点击啦');
  }
}
});

button-component.json：
```
{
"component": true
}
```

在页面中使用这个组件，只需要在对应的页面.wxml文件中引入即可。

<import src="../../components/button-component/button-component.wxml"/>
<view class="page-content">
  <button-component buttonText="自定义按钮文本"></button-component>
</view>

组件间的通信

组件间的通信是组件化开发中一个关键的问题,小程序提供了多种组件通信的方式。

属性绑定：父组件向子组件传递数据可以通过属性绑定的方式，比如我们在上面的按钮组件中，通过properties接收父组件传递的buttonText属性。

事件绑定：子组件向父组件传递数据可以通过事件绑定的方式，子组件触发一个自定义事件，父组件监听这个事件并获取传递的数据，我们可以在按钮组件中添加一个自定义事件buttonClick，在父组件中监听这个事件。在按钮组件的button-component.wxml中添加事件绑定：

<view class="button-container">
<button bindtap="handleButtonTap" bind:buttonClick="sendButtonClickEvent">{{buttonText}}</button>
</view>

在按钮组件的button-component.js中触发事件：

Component({
properties: {
  buttonText: {
    type: String,
    value: '点击我'
  }
},
methods: {
  handleButtonTap: function() {
    console.log('按钮被点击啦');
    this.triggerEvent('buttonClick', { message: '按钮点击事件触发' });
  }
}
});

在父组件的页面home.wxml中监听事件：

<import src="../../components/button-component/button-component.wxml"/>
<view class="page-content">
<button-component buttonText="自定义按钮文本" bind:buttonClick="handleButtonClick"></button-component>
</view>

在父组件的home.js中处理事件：

Page({
handleButtonClick: function(e) {
  console.log(e.detail.message);
}
});

全局数据共享：对于一些需要在多个组件之间共享的数据，可以使用全局的App实例来实现，在app.js中定义全局数据：

App({
globalData: {
  sharedValue: '这是全局共享的数据'
}
});

在组件中获取全局数据：

Component({
properties: {},
methods: {
  getGlobalData: function() {
    const app = getApp();
    console.log(app.globalData.sharedValue);
  }
}
});

实战演练：构建一个简单的购物小程序页面

我们通过一个实战演练来巩固所学的知识,构建一个简单的购物小程序页面。

页面布局设计

我们的购物小程序页面主要包含商品列表、购物车图标和导航栏。在pages/shopping/shopping.wxml中进行页面布局：

<view class="navigation-bar">
  <text>购物小程序</text>
</view>
<view class="product-list">
  <!-- 商品列表占位 -->
</view>
<view class="cart-icon">
  <image src="../../images/cart.png"></image>
  <text>购物车</text>
</view>

在pages/shopping/shopping.wxss中设置样式：

.navigation-bar {
  background-color: #ff6600;
  color: white;
  text-align: center;
  padding: 20px 0;
}
.product-list {
  padding: 20px;
}
.cart-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-align: center;
}
.cart-icon image {
  width: 40px;
  height: 40px;
}
.cart-icon text {
  display: block;
  margin-top: 5px;
}

商品列表组件实现

创建一个商品列表组件product-item，用于展示单个商品的信息。在components/product-item/product-item.wxml中：

<view class="product-item">
  <image src="{{productImage}}"></image>
  <text>{{productName}}</text>
  <text>价格: {{productPrice}}</text>
  <button bindtap="handleAddToCart">加入购物车</button>
</view>

在components/product-item/product-item.wxss中：

.product-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.product-item image {
  width: 100px;
  height: 100px;
}

在components/product-item/product-item.js中：

Component({
  properties: {
    productImage: {
      type: String,
      value: ''
    },
    productName: {
      type: String,
      value: ''
    },
    productPrice: {
      type: String,
      value: ''
    }
  },
  methods: {
    handleAddToCart: function() {
      console.log('加入购物车成功');
      const app = getApp();
      if (!app.globalData.cartList) {
        app.globalData.cartList = [];
      }
      app.globalData.cartList.push(this.properties);
    }
  }
});

在购物页面的pages/shopping/shopping.wxml中引入商品列表组件并填充数据：

<import src="../../components/product-item/product-item.wxml"/>
<view class="navigation-bar">
  <text>购物小程序</text>
</view>
<view class="product-list">
  <product-item productImage="../../images/product1.jpg" productName="商品1" productPrice="19.9"></product-item>
  <product-item productImage="../../images/product2.jpg" productName="商品2" productPrice="29.9"></product-item>
</view>
<view class="cart-icon">
  <image src="../../images/cart.png"></image>
  <text>购物车</text>
</view>

通过以上步骤，我们就完成了一个简单购物小程序页面的基本功能，从页面布局到组件化实现，涵盖了小程序框架和组件化开发的多个方面，希望大家通过这个实战演练，能对小程序开发有更深入的理解和掌握😃，在后续的学习中，我们还可以继续完善这个购物小程序，比如实现购物车的详细功能、订单管理等，让它变得更加完整和强大💪。

0基础开发小程序08