weapp-github-trending 项目教程

weapp-github-trending 项目教程

weapp-github-trending微信小程序：Github今日榜单项目地址:https://gitcode.com/gh_mirrors/we/weapp-github-trending

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

weapp-github-trending/
├── app.js
├── app.json
├── app.wxss
├── components/
│   ├── component1/
│   │   ├── component1.js
│   │   ├── component1.json
│   │   ├── component1.wxml
│   │   └── component1.wxss
│   └── component2/
│       ├── component2.js
│       ├── component2.json
│       ├── component2.wxml
│       └── component2.wxss
├── pages/
│   ├── page1/
│   │   ├── page1.js
│   │   ├── page1.json
│   │   ├── page1.wxml
│   │   └── page1.wxss
│   └── page2/
│       ├── page2.js
│       ├── page2.json
│       ├── page2.wxml
│       └── page2.wxss
├── project.config.json
└── utils/
    └── util.js

目录结构介绍

• app.js: 小程序的入口文件，负责全局逻辑。
• app.json: 小程序的全局配置文件，包括页面路径、窗口表现、网络超时时间等。
• app.wxss: 小程序的全局样式文件。
• components/: 存放自定义组件的目录。
  • component1/, component2/: 具体的组件目录，包含组件的逻辑、配置、模板和样式文件。
• pages/: 存放小程序页面的目录。
  • page1/, page2/: 具体的页面目录，包含页面的逻辑、配置、模板和样式文件。
• project.config.json: 项目的配置文件，包含小程序的名称、版本号、开发者信息等。
• utils/: 存放工具函数的目录。
  • util.js: 工具函数文件。

2. 项目的启动文件介绍

app.js

app.js 是小程序的入口文件，负责全局逻辑。以下是 app.js 的基本结构：

App({
  onLaunch: function () {
    // 小程序启动时执行的逻辑
  },
  globalData: {
    // 全局数据
  }
})

• onLaunch: 小程序启动时执行的函数，通常用于初始化全局数据或进行一些全局配置。
• globalData: 全局数据对象，可以在小程序的任何页面中访问。

app.json

app.json 是小程序的全局配置文件，包含小程序的所有页面路径、窗口表现、网络超时时间等配置。以下是 app.json 的基本结构：

{
  "pages": [
    "pages/page1/page1",
    "pages/page2/page2"
  ],
  "window": {
    "navigationBarTitleText": "小程序标题",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}

• pages: 小程序的页面路径列表。
• window: 小程序的窗口表现配置，包括导航栏标题、背景颜色、文字样式等。
• networkTimeout: 网络请求的超时时间配置。

3. 项目的配置文件介绍

project.config.json

project.config.json 是项目的配置文件，包含小程序的名称、版本号、开发者信息等。以下是 project.config.json 的基本结构：

{
  "miniprogramRoot": "miniprogram/",
  "qcloudRoot": "qcloud/",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "appid": "your-app-id",
  "projectname": "your-project-name",
  "description": "your-project-description",
  "condition": {}
}

• miniprogramRoot: 小程序的根目录。
• qcloudRoot: 腾讯云的根目录（如果使用了腾讯云服务）。
• setting: 编译设置，包括是否检查URL、是否启用ES6、是否启用PostCSS、是否压缩代码等。
• appid: 小程序的AppID。
• projectname: 项目的名称。
• description: 项目的描述。
• condition: 条件编译配置。

通过以上配置文件，可以对小程序进行全局配置和项目级别的管理。

weapp-github-trending微信小程序：Github今日榜单项目地址:https://gitcode.com/gh_mirrors/we/weapp-github-trending