微信小程序进阶
一、自定义组件
1. 创建组件创建自定义组件非常简单。首先，新建一个文件夹，例如 `components`，然后在这个文件夹下面新建一个 JSON 文件，例如 `my-component.json`。
```json{
"component": true,
"usingComponents": []
}
```
2. 引用组件引用自定义组件非常简单。只需要在页面的 JSON 文件中添加一个 `components` 节点，并将自定义组件的路径填入其中。
例如：
```json{
"navigationBarTitleText": "Hello World",
"components": {
"my-component": "/components/my-component"
}
}
```
3. 组件和页面区别组件和页面都是小程序的基本构建块，但它们有着不同的作用。组件是可重用的 UI 元素，而页面则是展示数据和逻辑的容器。
4. 组件样式组件可以拥有自己的样式，这样就可以在不同页面中使用相同的组件而不影响样式。
例如：
```json{
"component": true,
"usingComponents": [],
"externalClasses": ["my-component-class"]
}
```
5. data、methods、properties组件可以拥有自己的数据、方法和属性，这些都可以在组件内部使用。
例如：
```json{
"component": true,
"usingComponents": [],
"data": {
"count":0 },
"methods": {
"increment": function() {
this.setData({ count: this.data.count +1 });
}
},
"properties": {
"title": String }
}
```
6. 小程序的 data 和 properties 区别在小程序中，`data` 是组件内部的数据，而 `properties` 是组件外部传递给组件的数据。
例如：
```json{
"component": true,
"usingComponents": [],
"data": {
"count":0 },
"properties": {
"title": String }
}
```
在这个例子中，`count` 是组件内部的数据，而 `title` 是组件外部传递给组件的数据。
7. 数据监听器小程序提供了一个数据监听器，可以监控组件内部的数据变化。
例如：
```json{
"component": true,
"usingComponents": [],
"data": {
"count":0 },
"watchers": {
"count": function(newValue, oldValue) {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}
}
}
```
8. 纯数据字段小程序提供了一个纯数据字段，可以存储组件内部的纯数据。
例如：
```json{
"component": true,
"usingComponents": [],
"data": {
"count":0 },
"pureData": {
"count":0 }
}
```
9. 组件的生命周期小程序提供了一个组件的生命周期，可以监控组件的创建、更新和销毁。
例如：
```json{
"component": true,
"usingComponents": [],
"data": {
"count":0 },
"lifecycle": {
"created": function() {
console.log(`Component created`);
},
"updated": function() {
console.log(`Component updated`);
},
"destroyed": function() {
console.log(`Component destroyed`);
}
}
}
```
10. 组件所在页面的生命周期小程序提供了一个组件所在页面的生命周期，可以监控组件所在页面的创建、更新和销毁。
例如：
```json{
"navigationBarTitleText": "Hello World",
"components": {
"my-component": "/components/my-component"
},
"lifecycle": {
"created": function() {
console.log(`Page created`);
},
"updated": function() {
console.log(`Page updated`);
},
"destroyed": function() {
console.log(`Page destroyed`);
}
}
}
```
二、Promise化
小程序提供了一个 Promise 化的 API，可以让开发者更方便地处理异步操作。
例如：
```json{
"component": true,
"usingComponents": [],
"data": {
"count":0 },
"methods": {
"increment": function() {
return new Promise((resolve, reject) => {
setTimeout(() => {
this.setData({ count: this.data.count +1 });
resolve();
},1000);
});
}
}
}
```
在这个例子中，`increment` 方法返回一个 Promise 对象，异步操作完成后会调用 `resolve` 函数。
三、MobX
小程序提供了一个 MobX 库，可以让开发者更方便地管理组件的状态。
例如：
```json{
"component": true,
"usingComponents": [],
"data": {
"count":0 },
"stores": {
"counterStore": {
count: observable(0),
increment: action(() => {
this.count++;
})
}
}
}
```
在这个例子中，`counterStore` 是一个 MobX 库的实例，它提供了一个 `count` 属性和一个 `increment` 方法。
四、分包
小程序提供了一个分包功能，可以让开发者将大型项目分成多个小包。
例如：
```json{
"navigationBarTitleText": "Hello World",
"components": {
"my-component": "/components/my-component"
},
"packages": [
{
"name": "package1",
"path": "/packages/package1"
},
{
"name": "package2",
"path": "/packages/package2"
}
]
}
```
在这个例子中，`packages` 是一个数组，它包含了两个分包的信息。
五、自定义TabBar
小程序提供了一个自定义 TabBar 功能，可以让开发者自定义 TabBar 的样式和行为。
例如：
```json{
"navigationBarTitleText": "Hello World",
"components": {
"my-component": "/components/my-component"
},
"tabBar": {
"color": "333",
"selectedColor": "666",
"backgroundColor": "fff"
}
}
```
在这个例子中，`tabBar` 是一个对象，它包含了 TabBar 的样式信息。
以上就是关于微信小程序进阶的详细描述。
小程序apipromis化自定义组件分包自定义tabBarmobx
