微信小程序组件库 miniprogram-component-plus
使用教程
miniprogram-component-plus项目地址:https://gitcode.com/gh_mirrors/mi/miniprogram-component-plus
1. 项目的目录结构及介绍
miniprogram-component-plus/
├── components/
│ ├── componentA/
│ │ ├── componentA.js
│ │ ├── componentA.json
│ │ ├── componentA.wxml
│ │ └── componentA.wxss
│ ├── componentB/
│ │ ├── componentB.js
│ │ ├── componentB.json
│ │ ├── componentB.wxml
│ │ └── componentB.wxss
│ └── ...
├── pages/
│ ├── pageA/
│ │ ├── pageA.js
│ │ ├── pageA.json
│ │ ├── pageA.wxml
│ │ └── pageA.wxss
│ ├── pageB/
│ │ ├── pageB.js
│ │ ├── pageB.json
│ │ ├── pageB.wxml
│ │ └── pageB.wxss
│ └── ...
├── app.js
├── app.json
├── app.wxss
└── project.config.json
目录结构说明
components/
:存放自定义组件的目录,每个组件包含四个文件:.js
、.json
、.wxml
和.wxss
。pages/
:存放页面文件的目录,每个页面包含四个文件:.js
、.json
、.wxml
和.wxss
。app.js
:小程序的入口文件,负责全局逻辑。app.json
:小程序的全局配置文件,包括页面路径、窗口表现、网络超时等配置。app.wxss
:小程序的全局样式文件。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"
}
}
3. 项目的配置文件介绍
project.config.json
project.config.json
是项目配置文件,包含开发者工具的配置信息。以下是一个简单的 project.config.json
示例:
{
"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true
},
"appid": "your-app-id",
"projectname": "your-project-name"
}
配置文件说明
miniprogramRoot
:指定小程序源码的路径。cloudfunctionRoot
:指定云函数的路径(如果有使用云开发)。setting
:包含编译设置,如urlCheck
、es6
、postcss
和minified
等。appid
:小程序的 AppID。projectname
:项目的名称。
miniprogram-component-plus项目地址:https://gitcode.com/gh_mirrors/mi/miniprogram-component-plus