Wux WeApp 开源项目快速入门教程

2026-01-17 09:33:32作者：戚魁泉Nursing

本教程将引导您了解并设置 Wux WeApp 项目，一个基于微信小程序的组件库。

1. 项目目录结构及介绍

1.1 目录结构概览

wux-weapp
├── dist                # 构建输出目录
├── docs                # 文档目录
├── examples            # 示例代码
│   ├── pages           # 页面示例
│   └── components      # 组件示例
├── src                 # 源码目录
│   ├── components      # 自定义组件
│   ├── styles          # 全局样式
│   ├── utils           # 工具函数
│   ├── app.js          # 应用主入口
│   └── index.html      # 首页模板
├── config              # 构建配置
│   ├── project.config.json # 微信开发者工具项目配置
│   └── webpack.config.js  # Webpack 构建配置
└── package.json        # 项目依赖和元数据

1.2 主要文件说明

dist: 用于存放编译后的代码，用于部署到微信小程序。
examples: 包含了各种组件的演示页面和示例代码。
src: 源代码目录，其中：
- components: 存放自定义的 Wux WeApp 组件。
- styles: 保存全局 CSS 样式。
- utils: 存放辅助函数和工具类。
- app.js: 小程序主入口文件，定义 App 实例。
- index.html: 首页模板文件，仅在开发环境时使用。
config: 项目构建相关的配置文件。
- project.config.json: 微信开发者工具的项目配置。
- webpack.config.js: 使用 Webpack 进行编译的配置文件。
package.json: 项目依赖和元数据，包括 npm 包版本等。

2. 项目的启动文件介绍

2.1 `app.js` - 应用主入口

在 src/app.js 中，你需要初始化 Wux WeApp 的组件以及你的应用程序。这是一个标准的小程序主入口文件，通常包含以下部分：

// 引入 Wux WeApp 组件库
import wux from 'wux'

// 初始化应用
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

// 注册所有 Wux WeApp 组件
wux.register()

在这个例子中，我们首先导入了 Wux WeApp 库并注册了所有的组件，然后定义了小程序生命周期方法。

3. 项目的配置文件介绍

3.1 `project.config.json` - 微信开发者工具项目配置

此文件是微信开发者工具使用的默认配置，包含了小程序的基础信息、网络请求域名等。例如：

{
  "name": "wux-weapp",
  "version": "0.1.0",
  "miniProgramType": "development", // 设置开发类型，默认值为 development（开发版）
  "libVersion": "2.9.4", // 微信 SDK 版本
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "precompile": true, // 是否开启预编译特性
  "compileType": "watch" // 编译模式，默认值为 watch（监听模式）
}

3.2 `webpack.config.js` - Webpack 构建配置

这个文件用于定制项目的 Webpack 构建规则，包括路径映射、加载器选择、插件设置等。例如：

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src'),
        options: {
          presets: ['@babel/preset-env']
        }
      },
      // ...其他规则
    ]
  },
  // ...其他Webpack配置
}