Wepy-Mall 开源项目教程

1. 项目的目录结构及介绍

Wepy-Mall 项目的目录结构如下：

wepy-mall/
├── dist/
├── node_modules/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── app.wpy
│   ├── config.js
│   └── package.json
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .wepyrc
├── package-lock.json
└── package.json

目录结构介绍

• dist/: 编译后的文件目录。
• node_modules/: 项目依赖的模块。
• src/: 源代码目录。
  • assets/: 静态资源文件，如图片、样式文件等。
  • components/: 项目中使用的组件。
  • pages/: 项目的页面文件。
  • app.wpy: 项目的入口文件。
  • config.js: 项目的配置文件。
  • package.json: 项目的依赖和脚本配置。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmrc: npm 配置文件。
• .wepyrc: Wepy 配置文件。
• package-lock.json: npm 锁定文件。
• package.json: 项目的依赖和脚本配置。

2. 项目的启动文件介绍

项目的启动文件是 src/app.wpy。这个文件是 Wepy 项目的入口文件，包含了项目的全局配置和生命周期函数。

app.wpy 文件内容概览

<style>
  /* 全局样式 */
</style>

<template>
  <!-- 全局模板 -->
</template>

<script>
  import wepy from 'wepy';

  export default class extends wepy.app {
    config = {
      pages: [
        'pages/index',
        'pages/otherPage'
      ],
      window: {
        backgroundTextStyle: 'light',
        navigationBarBackgroundColor: '#fff',
        navigationBarTitleText: 'WePY App',
        navigationBarTextStyle: 'black'
      }
    };

    onLaunch() {
      console.log('App Launch');
    }

    onShow() {
      console.log('App Show');
    }

    onHide() {
      console.log('App Hide');
    }
  }
</script>

主要功能

• 全局配置: 在 config 对象中定义了页面的路径和窗口的样式。
• 生命周期函数: onLaunch, onShow, onHide 等函数用于处理应用的生命周期事件。

3. 项目的配置文件介绍

项目的配置文件主要包括 src/config.js 和 package.json。

src/config.js

这个文件包含了项目的运行时配置，如 API 地址、环境变量等。

module.exports = {
  apiUrl: 'https://api.example.com',
  env: 'development'
};

package.json

这个文件定义了项目的依赖和脚本命令。

{
  "name": "wepy-mall",
  "version": "1.0.0",
  "description": "A WePY project",
  "scripts": {
    "build": "wepy build",
    "dev": "wepy build --watch"
  },
  "dependencies": {
    "wepy": "^1.7.3"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-node": "^9.0.1",
    "eslint-plugin-promise":