微信小程序案例 3.8：模块化实验博客

关注

原创最新推荐文章于 2026-10-02 15:09:43 发布 147 阅读 AI 写同款· GEO 优化 ›

【愚公系列】《微信小程序与云开发从入门到实践》007-路由与模块化 在当今的移动应用开发中，微信小程序以其轻量化和便捷的特点，受到了越来越多开发者的青睐。而在构建复杂的小程序时，路由管理和模块化设计显得尤为重要。良好的路由设计可以帮助用户实现流畅的页面导航，而模块化则有助于提升代码的可读性和可维护性，促进团队协作。本篇文章将深入探讨微信小程序中的路由机制与模块化开发的最佳实践。我们将从基础概念入手，逐步解析如何有效地配置路由、管理页面间的跳转，以及如何将代码拆分成独立模块，提高项目的灵活性和扩展性。阅读详情

一、实验目的

理解微信小程序模块化编程思想，掌握模块导出module.exports与导入require()的用法。
学会四种模块数据调用方式：全局模块、不同目录模块、相同目录模块、本模块的变量与函数引用。
掌握getApp()获取全局 App 实例，读取 app.js 中的全局变量与全局函数。
理解模块文件路径规则，区分相对路径、同目录文件引入写法。
拓展作业：为不同模块输出内容设置不同背景颜色，区分各个模块输出区域。

二、实验环境

微信开发者工具，新建小程序项目，不使用云服务、不使用模板。

项目目录结构

模块化
├─common
│  └─common.js       //不同目录下模块
├─pages
│  └─index
│     ├─index.js
│     ├─index.wxml
│     ├─index.wxss
│     └─my‑index.js  //相同目录下模块
├─app.js
├─app.json
└─app.wxss

三、实验效果

页面标题为红色居中：引用来自不同模块的变量和函数

青色背景：输出全局模块的变量、函数返回结果
黄色背景：输出不同目录模块的变量、函数返回结果
紫粉色背景：输出相同目录模块的变量、函数返回结果
浅蓝色背景：输出本模块的变量、函数返回结果

每一块背景区域分别展示对应模块的文字信息，完成多模块内容展示。

四、核心知识点

module.exports：模块导出，把当前 js 文件内部变量、函数暴露出去，供其他 js 文件require导入使用。
require ("文件路径")：导入外部模块，接收module.exports导出的对象。
- 不同目录：使用相对路径 ../../common/common.js，../代表向上退回一级文件夹
- 同目录模块：直接写文件名 my-index.js
getApp()：获取小程序全局唯一 App 实例，可以访问app.js里面定义的全局变量、全局函数。
小程序四种模块来源：
- 全局模块：app.js，通过getApp()访问
- 不同目录模块：根目录common/common.js，使用require加相对路径导入
- 相同目录模块：和 index.js 同一个文件夹的my‑index.js
- 本模块：当前 index.js 内部自己定义的变量与函数
WXML 通过给 view 增加 class 类名，设置不同background-color背景色，完成拓展作业要求。

五、完整代码实现

1. common/common.js（根目录 common 文件夹）

// common.js
const comMsg = '来自不同目录下模块的变量';
function comFunc() {
  return '来自不同目录下模块的函数';
}

module.exports = {
  comMsg,
  comFunc
};

2. pages/index/my‑index.js（index 页面同目录）

// my‑index.js
const myIndexMsg = '来自相同目录下不同模块的变量';
function myIndexFunc() {
  return '来自相同目录下不同模块的函数';
}

module.exports = {
  myIndexMsg,
  myIndexFunc
};

3. app.js（项目根目录，全局模块）

// app.js
App({
  appMsg: '来自全局模块的变量',
  appFunc() {
    return '来自全局模块的函数';
  }
});

4. pages/index/index.js（页面逻辑）

// index.js
const indexMsg = '来自本模块的变量';
function indexFunc() {
  return '来自本模块的函数';
}
// 获取全局app实例
const app = getApp();
// 引入跨目录模块
const comm = require('../../common/common.js');
// 引入同目录模块
const myIndex = require('my-index.js');

Page({
  data: {
    // 全局模块
    msg1: 'index.js模块引用' + app.appMsg,
    msg2: 'index.js模块引用' + app.appFunc(),
    // 不同目录模块 common
    msg3: 'index.js模块引用' + comm.comMsg,
    msg4: 'index.js模块引用' + comm.comFunc(),
    // 相同目录 my‑index
    msg5: 'index.js模块引用' + myIndex.myIndexMsg,
    msg6: 'index.js模块引用' + myIndex.myIndexFunc(),
    // 本模块
    msg7: 'index.js模块引用' + indexMsg,
    msg8: 'index.js模块引用' + indexFunc()
  }
});

5. pages/index/index.wxml（页面结构，增加 class 区分背景）

<!--index.wxml-->
<navigation-bar title="模块化" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="box">
    <view class="title">引用来自不同模块的变量和函数</view>
    <!--全局模块 青色背景-->
    <view class="item global-item">
      <view>{{msg1}}</view>
      <view>{{msg2}}</view>
    </view>
    <!--不同目录模块 黄色背景-->
    <view class="item other-dir-item">
      <view>{{msg3}}</view>
      <view>{{msg4}}</view>
    </view>
    <!--同目录模块 紫色背景-->
    <view class="item same-dir-item">
      <view>{{msg5}}</view>
      <view>{{msg6}}</view>
    </view>
    <!--本模块 浅蓝背景-->
    <view class="item self-item">
      <view>{{msg7}}</view>
      <view>{{msg8}}</view>
    </view>
  </view>
</scroll-view>

6. pages/index/index.wxss（页面样式）

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.item {
  line-height: 2em;
  font-size: 40rpx;
  padding:10rpx;
}
/*全局模块 青色*/
.global-item{
  background-color: cyan;
}
/*不同目录模块 黄色*/
.other-dir-item{
  background-color: yellow;
}
/*同目录模块 紫粉色*/
.same-dir-item{
  background-color: orchid;
}
/*本模块 浅蓝*/
.self-item{
  background-color: lightblue;
}

7. app.wxss（全局样式）

/**app.wxss**/
.box {
  margin: 20rpx;
  padding: 20rpx;
  border: 2rpx solid silver;
}

.title {
  font-size: 40rpx;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 30rpx;
  color: red;
}

8. app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "模块化",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

六、实验步骤

创建新项目，选择不使用云服务，不使用模板。
根据目录结构新建common文件夹，新建common.js；在 pages/index 下新建my‑index.js。
将上面代码分别替换对应文件全部内容，所有标点符号必须是英文半角符号。
Ctrl+S保存全部文件。
开发者工具执行：清缓存 → 重新编译。
模拟器观察页面，查看四种不同模块输出，查看不同颜色背景区分各个模块。

七、踩坑与问题总结

require 导入模块报错找不到文件：一般是相对路径写错。跨目录需要写足够的../返回上层目录；同目录直接写文件名，不要加./也可以。
无法读取 app.js 全局数据：忘记调用const app = getApp()，必须先拿到 App 实例，才能访问全局成员。
拿不到外部模块变量函数：忘记写module.exports导出，没有导出的变量函数外部无法访问。
拓展作业背景色不生效：class 类名写错，wxml 中的 class 名称要和 wxss 选择器完全一致。
navigation‑bar 警告：属于 Skyline 渲染模式组件警告，不影响程序功能运行。

注意：小程序模块化遵循 CommonJS 规范，每个 js 文件都是独立模块，变量默认私有，只有导出后外部才可以访问。

八、实验小结

本次实验学习小程序模块化开发，掌握module.exports导出，require()导入，getApp()访问全局模块。项目可以把公共功能抽离到独立 js 模块，实现代码复用，减少重复代码。拓展作业通过 CSS 背景颜色区分不同模块输出内容，更加直观看到各个模块运行结果。开发时需要格外注意文件路径书写，路径错误会直接导致模块加载失败。