开源项目 miniProgram 使用教程

开源项目 miniProgram 使用教程

miniProgram猫眼电影/Taro/微信小程序/React项目地址:https://gitcode.com/gh_mirrors/min/miniProgram

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

miniProgram/
├── README.md
├── package.json
├── src/
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── pages/
│   │   ├── index/
│   │   │   ├── index.js
│   │   │   ├── index.json
│   │   │   ├── index.wxml
│   │   │   └── index.wxss
│   │   └── logs/
│   │       ├── logs.js
│   │       ├── logs.json
│   │       ├── logs.wxml
│   │       └── logs.wxss
│   └── utils/
│       └── util.js
└── project.config.json

• README.md: 项目说明文件。
• package.json: 项目依赖管理文件。
• src/: 源代码目录。
  • app.js: 小程序的入口文件。
  • app.json: 小程序的全局配置文件。
  • app.wxss: 小程序的全局样式文件。
  • pages/: 小程序的页面目录。
    • index/: 首页目录。
      • index.js: 首页逻辑文件。
      • index.json: 首页配置文件。
      • index.wxml: 首页结构文件。
      • index.wxss: 首页样式文件。
    • logs/: 日志页面目录。
      • logs.js: 日志页面逻辑文件。
      • logs.json: 日志页面配置文件。
      • logs.wxml: 日志页面结构文件。
      • logs.wxss: 日志页面样式文件。
  • utils/: 工具函数目录。
    • util.js: 工具函数文件。
• project.config.json: 小程序项目配置文件。

2. 项目的启动文件介绍

app.js

app.js 是小程序的入口文件，主要负责小程序的初始化工作。以下是一个简单的 app.js 示例：

App({
  onLaunch: function () {
    // 小程序启动时的初始化操作
    console.log('小程序启动了');
  },
  globalData: {
    userInfo: null
  }
});

app.json

app.json 是小程序的全局配置文件，主要配置小程序的页面路径、窗口表现、网络超时时间等。以下是一个简单的 app.json 示例：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

app.wxss

app.wxss 是小程序的全局样式文件，可以定义一些全局的样式规则。以下是一个简单的 app.wxss 示例：

page {
  background-color: #f6f6f6;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

3. 项目的配置文件介绍

project.config.json

project.config.json 是小程序的项目配置文件，主要用于配置小程序的开发工具设置、编译设置等。以下是一个简单的 project.config.json 示例：

{
  "miniprogramRoot": "src/",
  "projectname": "miniProgram",
  "description": "A simple mini program",
  "appid": "touristappid",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "compileType": "miniprogram"
}

以上是 miniProgram 项目的目录结构、启动文件和配置

miniProgram猫眼电影/Taro/微信小程序/React项目地址:https://gitcode.com/gh_mirrors/min/miniProgram