# 开发 mm Pendant 挂件

## 规则（Rules）

- 挂件位于 `app/{模块名}/pendant/{挂件名}/` 下
- 每个挂件包含 3 个文件：`pendant.json` + `pendant.js` + `pendant.html`
- 挂件用于页面片段渲染，可在模板中通过挂件插入点（`<!-- #名称 -->`）引用
- 常见挂件类型：文章列表、轮播图、二维码、评论、排行榜等

## 方法（Methods）

### 步骤1：创建目录结构

```
app/{模块名}/pendant/{挂件名}/
├── pendant.json
├── pendant.js
└── pendant.html
```

### 步骤2：编写 pendant.json

```json
{
    "name": "my_pendant",
    "title": "我的挂件",
    "description": "挂件描述",
    "main": "./pendant.js",
    "state": 1
}
```

### 步骤3：编写 pendant.js

```javascript
module.exports = {
    async main(params) {
        var data = await db.new('表名', '主键').get({ state: 1 });
        return { list: data };
    }
};
```

### 步骤4：编写 pendant.html

```html
<div class="mm_list">
    <!--{ loop list o i }-->
    <div class="mm_item">${o.title}</div>
    <!--{ /if }-->
</div>
```

### 步骤5：注册挂件

在所属 App 的 _init 中注册：

```javascript
$.pendant = $.admin.pendant('app名', '挂件标题');
await $.pendant.call('update', 'app/');
```

## 技巧（Tips）

- pendant.js 中 `main` 函数返回的数据会注入到 pendant.html 模板中
- 模板语法使用与普通视图相同的模板引擎
- 挂件在页面中通过 `<!-- #挂件名 -->` 插入点渲染
- 参考实现：`app/home/pendant/` 下的挂件示例