@doubao-apps/ai 0.0.28 → 0.0.29-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/contexts/doubao-apps-dev/references/examples/common-patterns.md +4 -15
- package/dist/contexts/doubao-apps-dev/references/examples/component-basics.md +34 -17
- package/dist/contexts/doubao-apps-dev/references/guides/component-development.md +103 -69
- package/dist/contexts/doubao-apps-dev/references/guides/performance-optimization.md +0 -2
- package/dist/contexts/doubao-apps-dev/references/guides/troubleshooting.md +0 -4
- package/dist/contexts/doubao-apps-dev/references/reference/framework-api-quick-ref.md +52 -39
- package/dist/contexts/doubao-apps-dev/references/reference/open-api/01-/345/237/272/347/241/200-/350/264/246/345/217/267-/347/263/273/347/273/237.md +12 -2
- package/dist/contexts/doubao-apps-dev/references/reference/open-api/10-/350/256/276/345/244/207-/350/256/276/345/244/207/346/226/271/345/220/221.md +34 -0
- package/dist/contexts/doubao-apps-dev/references/reference/open-api/README.md +1 -1
- package/dist/contexts/doubao-apps-dev/references/reference/open-api.md +2 -1
- package/dist/contexts/doubao-apps-dev/references/rules/dos-and-donts.md +113 -36
- package/dist/manifest.json +2 -2
- package/dist/skills/doubao-apps-dev/SKILL.md +57 -13
- package/dist/skills/doubao-apps-dev/references/examples/common-patterns.md +4 -15
- package/dist/skills/doubao-apps-dev/references/examples/component-basics.md +34 -17
- package/dist/skills/doubao-apps-dev/references/guides/component-development.md +103 -69
- package/dist/skills/doubao-apps-dev/references/guides/performance-optimization.md +0 -2
- package/dist/skills/doubao-apps-dev/references/guides/troubleshooting.md +0 -4
- package/dist/skills/doubao-apps-dev/references/reference/framework-api-quick-ref.md +52 -39
- package/dist/skills/doubao-apps-dev/references/reference/open-api/01-/345/237/272/347/241/200-/350/264/246/345/217/267-/347/263/273/347/273/237.md +12 -2
- package/dist/skills/doubao-apps-dev/references/reference/open-api/10-/350/256/276/345/244/207-/350/256/276/345/244/207/346/226/271/345/220/221.md +34 -0
- package/dist/skills/doubao-apps-dev/references/reference/open-api/README.md +1 -1
- package/dist/skills/doubao-apps-dev/references/reference/open-api.md +2 -1
- package/dist/skills/doubao-apps-dev/references/rules/dos-and-donts.md +113 -36
- package/dist/skills/douyin-to-doubao/references/mapping/lifecycle-mapping.md +2 -2
- package/dist/skills/quality-gate/screenshots/doubao-faq.md +1 -1
- package/dist/skills/uniapp-to-doubao/references/mapping/lifecycle-mapping.md +15 -9
- package/package.json +1 -1
|
@@ -482,7 +482,7 @@ showToast({
|
|
|
482
482
|
```ts
|
|
483
483
|
expiredWidget({
|
|
484
484
|
widgetInstanceId: 'instance_123',
|
|
485
|
-
|
|
485
|
+
url: '${pageId}?key=value'
|
|
486
486
|
});
|
|
487
487
|
```
|
|
488
488
|
|
|
@@ -1851,18 +1851,28 @@ mcp入参,如果expectedAction里预期要调用工具,需要在这里写明
|
|
|
1851
1851
|
|
|
1852
1852
|
点击失效卡要跳转的页面 detailText
|
|
1853
1853
|
|
|
1854
|
-
##### schema
|
|
1854
|
+
##### ~~schema?~~
|
|
1855
1855
|
|
|
1856
1856
|
> `optional` **schema**: `string`
|
|
1857
1857
|
|
|
1858
1858
|
点击失效卡要跳转的页面 schema,格式与 navigateTo 的 url 相同
|
|
1859
1859
|
|
|
1860
|
+
###### Deprecated
|
|
1861
|
+
|
|
1862
|
+
使用 url 字段替代 schema 字段,后续版本将移除 schema 字段,请尽快迁移到 url 字段
|
|
1863
|
+
|
|
1860
1864
|
##### title?
|
|
1861
1865
|
|
|
1862
1866
|
> `optional` **title**: `string`
|
|
1863
1867
|
|
|
1864
1868
|
点击失效卡要跳转的页面 title
|
|
1865
1869
|
|
|
1870
|
+
##### url?
|
|
1871
|
+
|
|
1872
|
+
> `optional` **url**: `string`
|
|
1873
|
+
|
|
1874
|
+
点击失效卡要跳转的页面 url 或 sslocal schema
|
|
1875
|
+
|
|
1866
1876
|
##### widgetInstanceId
|
|
1867
1877
|
|
|
1868
1878
|
> **widgetInstanceId**: `string`
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
| --- | --- |
|
|
11
11
|
| [startDeviceMotionListening](#startdevicemotionlistening) | 开始监听设备方向变化。<br><br>需配对调用 stopDeviceMotionListening。 |
|
|
12
12
|
| [stopDeviceMotionListening](#stopdevicemotionlistening) | 停止监听设备方向变化。 |
|
|
13
|
+
| [onDeviceMotionChange](#ondevicemotionchange) | 监听设备方向变化事件。<br><br>返回取消监听函数。 |
|
|
13
14
|
|
|
14
15
|
## API 详情
|
|
15
16
|
|
|
@@ -47,6 +48,39 @@
|
|
|
47
48
|
|
|
48
49
|
`Promise`\<`object`\>
|
|
49
50
|
|
|
51
|
+
<a id="ondevicemotionchange"></a>
|
|
52
|
+
### onDeviceMotionChange()
|
|
53
|
+
|
|
54
|
+
> **onDeviceMotionChange**(`handler`): () => `void`
|
|
55
|
+
|
|
56
|
+
监听设备方向变化事件。
|
|
57
|
+
|
|
58
|
+
#### Parameters
|
|
59
|
+
|
|
60
|
+
• **handler**
|
|
61
|
+
|
|
62
|
+
#### Returns
|
|
63
|
+
|
|
64
|
+
`Function`
|
|
65
|
+
|
|
66
|
+
返回取消当前监听函数的函数。
|
|
67
|
+
|
|
68
|
+
##### Returns
|
|
69
|
+
|
|
70
|
+
`void`
|
|
71
|
+
|
|
72
|
+
#### Example
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
import { onDeviceMotionChange } from '@doubao-apps/framework/api';
|
|
76
|
+
|
|
77
|
+
const off = onDeviceMotionChange(({ alpha, beta, gamma }) => {
|
|
78
|
+
console.log(alpha, beta, gamma);
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
off();
|
|
82
|
+
```
|
|
83
|
+
|
|
50
84
|
## 相关类型
|
|
51
85
|
|
|
52
86
|
<a id="startdevicemotionlisteningparams"></a>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
| 设备 / 加速度计 | 加速度计监听能力。 | 3 | [查看](./07-设备-加速度计.md) |
|
|
16
16
|
| 设备 / iBeacon | iBeacon 搜索和结果读取能力。 | 3 | [查看](./08-设备-ibeacon.md) |
|
|
17
17
|
| 设备 / 罗盘 | 罗盘监听能力。 | 3 | [查看](./09-设备-罗盘.md) |
|
|
18
|
-
| 设备 / 设备方向 | 设备方向监听能力。 |
|
|
18
|
+
| 设备 / 设备方向 | 设备方向监听能力。 | 3 | [查看](./10-设备-设备方向.md) |
|
|
19
19
|
| 设备 / 陀螺仪 | 陀螺仪监听能力。 | 3 | [查看](./11-设备-陀螺仪.md) |
|
|
20
20
|
| UI / 输入 | 键盘和输入框选区能力。 | 1 | [查看](./12-ui-输入.md) |
|
|
21
21
|
| 设备 / 网络 | 网络类型和本机局域网 IP。 | 3 | [查看](./13-设备-网络.md) |
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> 公开可用的端能力 API。默认从 `@doubao-apps/framework/api` 导入;本文件根据 `packages/open-api/src` 的导出结构自动生成,按模块列出 API 名称和说明。
|
|
4
4
|
|
|
5
|
-
覆盖
|
|
5
|
+
覆盖 125 个函数。详细参数、返回值、示例和相关类型请查看 [Open API 目录](open-api/README.md),精确字段也可按参数/结果类型名查看 IDE 类型提示或 `@doubao-apps/framework/api` 类型定义。
|
|
6
6
|
|
|
7
7
|
## 使用方式
|
|
8
8
|
|
|
@@ -176,6 +176,7 @@ iBeacon 搜索和结果读取能力。
|
|
|
176
176
|
| --- | --- |
|
|
177
177
|
| [startDeviceMotionListening](open-api/10-设备-设备方向.md#startdevicemotionlistening) | 开始监听设备方向变化。<br><br>需配对调用 stopDeviceMotionListening。 |
|
|
178
178
|
| [stopDeviceMotionListening](open-api/10-设备-设备方向.md#stopdevicemotionlistening) | 停止监听设备方向变化。 |
|
|
179
|
+
| [onDeviceMotionChange](open-api/10-设备-设备方向.md#ondevicemotionchange) | 监听设备方向变化事件。<br><br>返回取消监听函数。 |
|
|
179
180
|
|
|
180
181
|
## 设备 / 陀螺仪
|
|
181
182
|
|
|
@@ -22,29 +22,105 @@ npm install @doubao-apps/framework
|
|
|
22
22
|
|
|
23
23
|
### 组件开发
|
|
24
24
|
|
|
25
|
-
#### ✅
|
|
26
|
-
```
|
|
25
|
+
#### ✅ 在 app.config.ts 配置 App 元信息
|
|
26
|
+
```ts
|
|
27
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
28
|
+
|
|
29
|
+
export default defineAppConfig({
|
|
30
|
+
appId: 'com.example.my-doubao-app',
|
|
31
|
+
name: '我的豆包应用'
|
|
32
|
+
});
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
#### ✅ 需要稳定首页时在 app.config.ts 明确入口
|
|
36
|
+
```ts
|
|
37
|
+
// ✅ pages 数组第一项会作为首页(appletEntry)
|
|
38
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
39
|
+
|
|
40
|
+
export default defineAppConfig({
|
|
41
|
+
appId: 'com.example.my-doubao-app',
|
|
42
|
+
name: '我的豆包应用',
|
|
43
|
+
pages: [
|
|
44
|
+
{
|
|
45
|
+
entry: 'pages/home/index',
|
|
46
|
+
id: 'home',
|
|
47
|
+
title: '首页',
|
|
48
|
+
description: '应用默认打开的页面'
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
});
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
一级页面目录不写进 `pages` 也会自动发现;如果首页不是历史默认的 `index`,或需要固定首页顺序,建议显式配置 `pages`
|
|
55
|
+
数组第一项。
|
|
56
|
+
|
|
57
|
+
#### ✅ 需要补充展示信息时在 app.config.ts 定义 metadata
|
|
58
|
+
```ts
|
|
27
59
|
// ✅ 好的做法
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
60
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
61
|
+
|
|
62
|
+
export default defineAppConfig({
|
|
63
|
+
appId: 'com.example.my-doubao-app',
|
|
64
|
+
name: '我的豆包应用',
|
|
65
|
+
pages: [
|
|
66
|
+
{
|
|
67
|
+
entry: 'pages/user-profile/index',
|
|
68
|
+
id: 'user-profile',
|
|
69
|
+
title: '用户资料',
|
|
70
|
+
description: '展示和编辑用户个人资料'
|
|
71
|
+
}
|
|
72
|
+
]
|
|
35
73
|
});
|
|
36
74
|
```
|
|
37
75
|
|
|
38
|
-
```
|
|
39
|
-
// ❌
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
76
|
+
```ts
|
|
77
|
+
// ❌ 不好的做法:缺少 title、description 等信息
|
|
78
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
79
|
+
|
|
80
|
+
export default defineAppConfig({
|
|
81
|
+
appId: 'com.example.my-doubao-app',
|
|
82
|
+
name: '我的豆包应用',
|
|
83
|
+
pages: [
|
|
84
|
+
{
|
|
85
|
+
entry: 'pages/user-profile/index',
|
|
86
|
+
id: 'page1'
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
});
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
#### ✅ 多级目录必须显式声明 entry
|
|
93
|
+
```ts
|
|
94
|
+
// src/pages/account/demo/index.tsx
|
|
95
|
+
// src/widgets/order/detail/index.tsx
|
|
96
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
97
|
+
|
|
98
|
+
export default defineAppConfig({
|
|
99
|
+
appId: 'com.example.my-doubao-app',
|
|
100
|
+
name: '我的豆包应用',
|
|
101
|
+
pages: [
|
|
102
|
+
// 只声明入口、不补 metadata 时,可以直接写字符串
|
|
103
|
+
'pages/account/demo/index',
|
|
104
|
+
{
|
|
105
|
+
entry: 'pages/account/settings/index',
|
|
106
|
+
id: 'account-settings',
|
|
107
|
+
title: '账号设置页'
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
widgets: [
|
|
111
|
+
'widgets/order/detail/index',
|
|
112
|
+
{
|
|
113
|
+
entry: 'widgets/order/summary/index',
|
|
114
|
+
id: 'order-summary',
|
|
115
|
+
name: '订单摘要卡片'
|
|
116
|
+
}
|
|
117
|
+
]
|
|
45
118
|
});
|
|
46
119
|
```
|
|
47
120
|
|
|
121
|
+
如果不配置 `id`,默认取入口最后一级目录名:`pages/account/demo/index` 默认为 `demo`,`widgets/order/detail/index`
|
|
122
|
+
默认为 `detail`。
|
|
123
|
+
|
|
48
124
|
#### ✅ 分离样式文件
|
|
49
125
|
```tsx
|
|
50
126
|
// ✅ 好的做法
|
|
@@ -88,8 +164,8 @@ interface UserInfo {
|
|
|
88
164
|
|
|
89
165
|
export default defineWidget({
|
|
90
166
|
render() {
|
|
91
|
-
const
|
|
92
|
-
return <view>{
|
|
167
|
+
const viewData = getViewData<UserInfo>();
|
|
168
|
+
return <view>{viewData.name}</view>;
|
|
93
169
|
}
|
|
94
170
|
});
|
|
95
171
|
```
|
|
@@ -99,13 +175,16 @@ export default defineWidget({
|
|
|
99
175
|
import { defineAppConfig } from '@doubao-apps/kit';
|
|
100
176
|
|
|
101
177
|
export default defineAppConfig({
|
|
102
|
-
|
|
103
|
-
|
|
178
|
+
appId: 'com.example.my-doubao-app',
|
|
179
|
+
name: '我的豆包应用',
|
|
180
|
+
widgets: [
|
|
181
|
+
{
|
|
182
|
+
entry: 'widgets/user-card/index',
|
|
104
183
|
id: 'user-card',
|
|
105
184
|
name: '用户卡片',
|
|
106
185
|
description: '用户信息卡片'
|
|
107
186
|
}
|
|
108
|
-
|
|
187
|
+
]
|
|
109
188
|
});
|
|
110
189
|
```
|
|
111
190
|
|
|
@@ -113,8 +192,8 @@ export default defineAppConfig({
|
|
|
113
192
|
// ❌ 不好的做法
|
|
114
193
|
export default defineWidget({
|
|
115
194
|
render() {
|
|
116
|
-
const
|
|
117
|
-
return <view>{
|
|
195
|
+
const viewData = getViewData<any>(); // 使用 any 类型,失去类型检查
|
|
196
|
+
return <view>{viewData.name}</view>;
|
|
118
197
|
}
|
|
119
198
|
});
|
|
120
199
|
```
|
|
@@ -123,8 +202,6 @@ export default defineWidget({
|
|
|
123
202
|
```tsx
|
|
124
203
|
// ✅ 好的做法
|
|
125
204
|
export default definePage({
|
|
126
|
-
aiMeta: { /* ... */ },
|
|
127
|
-
|
|
128
205
|
onShow() {
|
|
129
206
|
console.log('Page shown');
|
|
130
207
|
},
|
|
@@ -149,15 +226,15 @@ export default definePage({
|
|
|
149
226
|
// ✅ 好的做法
|
|
150
227
|
export default defineWidget({
|
|
151
228
|
render() {
|
|
152
|
-
const
|
|
229
|
+
const viewData = getViewData<{ items: string[] }>();
|
|
153
230
|
// 处理空数据
|
|
154
|
-
if (!
|
|
231
|
+
if (!viewData.items || viewData.items.length === 0) {
|
|
155
232
|
return <view>暂无数据</view>;
|
|
156
233
|
}
|
|
157
234
|
|
|
158
235
|
return (
|
|
159
236
|
<view>
|
|
160
|
-
{
|
|
237
|
+
{viewData.items.map((item, index) => (
|
|
161
238
|
<view key={index}>{item}</view>
|
|
162
239
|
))}
|
|
163
240
|
</view>
|
|
@@ -170,11 +247,11 @@ export default defineWidget({
|
|
|
170
247
|
// ❌ 不好的做法
|
|
171
248
|
export default defineWidget({
|
|
172
249
|
render() {
|
|
173
|
-
const
|
|
174
|
-
// 没有检查
|
|
250
|
+
const viewData = getViewData<any>();
|
|
251
|
+
// 没有检查 viewData.items 是否存在
|
|
175
252
|
return (
|
|
176
253
|
<view>
|
|
177
|
-
{
|
|
254
|
+
{viewData.items.map(item => <view>{item}</view>)}
|
|
178
255
|
</view>
|
|
179
256
|
);
|
|
180
257
|
}
|
|
@@ -321,24 +398,24 @@ export default definePage({
|
|
|
321
398
|
// ❌ 错误
|
|
322
399
|
export default defineWidget({
|
|
323
400
|
render() {
|
|
324
|
-
const
|
|
401
|
+
const viewData = getViewData<any>();
|
|
325
402
|
// @ts-ignore
|
|
326
|
-
return <view>{
|
|
403
|
+
return <view>{viewData.unknownProperty}</view>;
|
|
327
404
|
}
|
|
328
405
|
});
|
|
329
406
|
```
|
|
330
407
|
|
|
331
408
|
```tsx
|
|
332
409
|
// ✅ 正确
|
|
333
|
-
interface
|
|
410
|
+
interface UserInfo {
|
|
334
411
|
name: string;
|
|
335
412
|
age: number;
|
|
336
413
|
}
|
|
337
414
|
|
|
338
415
|
export default defineWidget({
|
|
339
416
|
render() {
|
|
340
|
-
const
|
|
341
|
-
return <view>{
|
|
417
|
+
const viewData = getViewData<UserInfo>();
|
|
418
|
+
return <view>{viewData.name}</view>;
|
|
342
419
|
}
|
|
343
420
|
});
|
|
344
421
|
```
|
package/dist/manifest.json
CHANGED
|
@@ -71,7 +71,7 @@ my-doubao-app/
|
|
|
71
71
|
|
|
72
72
|
- **优先使用 pnpm** 作为包管理器
|
|
73
73
|
- **分离样式文件**:每个组件使用独立的 `.scss` 文件
|
|
74
|
-
-
|
|
74
|
+
- **配置 App 元信息**:`src/app.config.ts` 需要配置 `appId` 和 `name`;`pages` / `widgets` 是可选的显式入口配置
|
|
75
75
|
- **使用生命周期钩子**:合理使用 `onShow`、`onMounted` 等
|
|
76
76
|
- **TypeScript 类型**:使用 `getViewData<T>()`、为 props 和 state 提供类型定义
|
|
77
77
|
- **错误处理**:处理边界情况和错误状态
|
|
@@ -97,21 +97,48 @@ my-doubao-app/
|
|
|
97
97
|
|
|
98
98
|
Page 是全屏 UI 组件,支持九宫格、浮窗等变体。
|
|
99
99
|
|
|
100
|
-
|
|
100
|
+
**可选 pages 配置**:
|
|
101
101
|
```ts
|
|
102
102
|
import { defineAppConfig } from '@doubao-apps/kit';
|
|
103
103
|
|
|
104
104
|
export default defineAppConfig({
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
appId: 'com.example.my-doubao-app',
|
|
106
|
+
name: '我的豆包应用',
|
|
107
|
+
pages: [
|
|
108
|
+
{
|
|
109
|
+
entry: 'pages/home/index',
|
|
107
110
|
id: 'my-page',
|
|
108
111
|
title: '我的页面',
|
|
109
112
|
description: '页面功能描述'
|
|
110
113
|
}
|
|
111
|
-
|
|
114
|
+
]
|
|
115
|
+
});
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
`src/app.config.ts` 是应用配置文件,需要配置 `appId` 和 `name`。`pages` 数组是可选配置;`src/pages/home/index.tsx`
|
|
119
|
+
这类一级目录即使不写进 `pages` 也会被自动发现,默认 `pageId` 是目录名 `home`,但 `title`、`description`
|
|
120
|
+
等页面 metadata 为空。
|
|
121
|
+
|
|
122
|
+
**什么时候需要配置**:需要设置标题/描述等 metadata、稳定首页入口、或声明多级目录时,使用 `pages` 数组。`pages`
|
|
123
|
+
第一项会作为应用首页(最终 manifest 的 `appletEntry`)。如果希望 `home` 作为默认打开页面,把
|
|
124
|
+
`pages/home/index` 放在第一项;多页面应用继续按顺序声明其他页面。
|
|
125
|
+
|
|
126
|
+
如果只是声明入口、不补 metadata,可以直接写字符串:
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
export default defineAppConfig({
|
|
130
|
+
appId: 'com.example.my-doubao-app',
|
|
131
|
+
name: '我的豆包应用',
|
|
132
|
+
pages: ['pages/home/index', 'pages/account/demo/index']
|
|
112
133
|
});
|
|
113
134
|
```
|
|
114
135
|
|
|
136
|
+
**不配置 `pages` 时**:一级页面仍会产出;如果没有显式 `pages` 顺序,首页入口会走构建兜底/历史默认 `index`。
|
|
137
|
+
首页不是 `index` 时,建议显式配置 `pages` 第一项。
|
|
138
|
+
|
|
139
|
+
**多级目录**:`src/pages/account/demo/index.tsx` 不会被一级目录扫描自动发现,需要写
|
|
140
|
+
`entry: 'pages/account/demo/index'`。如果不写 `id`,默认 `pageId` 是最后一级目录名 `demo`。
|
|
141
|
+
|
|
115
142
|
**页面实现**:
|
|
116
143
|
```tsx
|
|
117
144
|
import { definePage, getViewData } from '@doubao-apps/framework';
|
|
@@ -126,8 +153,8 @@ export default definePage({
|
|
|
126
153
|
// 页面显示时触发
|
|
127
154
|
},
|
|
128
155
|
render() {
|
|
129
|
-
const
|
|
130
|
-
return <view>{
|
|
156
|
+
const viewData = getViewData<HomePageData>();
|
|
157
|
+
return <view>{viewData.title}</view>;
|
|
131
158
|
}
|
|
132
159
|
});
|
|
133
160
|
```
|
|
@@ -138,20 +165,37 @@ export default definePage({
|
|
|
138
165
|
|
|
139
166
|
Widget 是聊天流中的卡片组件,在对话中展示。
|
|
140
167
|
|
|
141
|
-
|
|
168
|
+
**可选 widgets 配置**:
|
|
142
169
|
```ts
|
|
143
170
|
import { defineAppConfig } from '@doubao-apps/kit';
|
|
144
171
|
|
|
145
172
|
export default defineAppConfig({
|
|
146
|
-
|
|
147
|
-
|
|
173
|
+
appId: 'com.example.my-doubao-app',
|
|
174
|
+
name: '我的豆包应用',
|
|
175
|
+
widgets: [
|
|
176
|
+
{
|
|
177
|
+
entry: 'widgets/my-widget/index',
|
|
148
178
|
id: 'my-widget',
|
|
149
179
|
name: '我的卡片',
|
|
150
180
|
description: '卡片功能描述',
|
|
151
181
|
boxType: 'inbox',
|
|
152
182
|
border: true
|
|
153
183
|
}
|
|
154
|
-
|
|
184
|
+
]
|
|
185
|
+
});
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
`src/widgets/my-widget/index.tsx` 这类一级目录即使不配置也会被自动发现,默认 `widgetId` 是目录名
|
|
189
|
+
`my-widget`,`name`、`description` 等 metadata 为空。多级目录如 `src/widgets/order/detail/index.tsx`
|
|
190
|
+
需要在 `widgets` 数组中显式写 `entry: 'widgets/order/detail/index'`。
|
|
191
|
+
|
|
192
|
+
如果只是声明入口、不补 metadata,可以直接写字符串:
|
|
193
|
+
|
|
194
|
+
```ts
|
|
195
|
+
export default defineAppConfig({
|
|
196
|
+
appId: 'com.example.my-doubao-app',
|
|
197
|
+
name: '我的豆包应用',
|
|
198
|
+
widgets: ['widgets/my-widget/index', 'widgets/order/detail/index']
|
|
155
199
|
});
|
|
156
200
|
```
|
|
157
201
|
|
|
@@ -169,8 +213,8 @@ export default defineWidget({
|
|
|
169
213
|
// 卡片挂载后触发
|
|
170
214
|
},
|
|
171
215
|
render() {
|
|
172
|
-
const
|
|
173
|
-
return <view>{
|
|
216
|
+
const viewData = getViewData<MyWidgetData>();
|
|
217
|
+
return <view>{viewData.title}</view>;
|
|
174
218
|
}
|
|
175
219
|
});
|
|
176
220
|
```
|
|
@@ -412,7 +412,8 @@ function relaunchHome() {
|
|
|
412
412
|
}
|
|
413
413
|
```
|
|
414
414
|
|
|
415
|
-
这里的 `url` 直接使用目标页面的 `pageId
|
|
415
|
+
这里的 `url` 直接使用目标页面的 `pageId`。显式配置时取 `src/app.config.ts` 中对应 page 的 `id`;不配置时取入口目录名,例如
|
|
416
|
+
`src/pages/detail/index.tsx` 默认为 `detail`。如需传参,可继续拼接 query string。
|
|
416
417
|
|
|
417
418
|
### 2. 页面间传参
|
|
418
419
|
|
|
@@ -441,20 +442,16 @@ function navigateWithParams() {
|
|
|
441
442
|
// 接收方 (detail-page)
|
|
442
443
|
import { getViewData } from '@doubao-apps/framework';
|
|
443
444
|
|
|
444
|
-
interface
|
|
445
|
+
interface DetailPageData {
|
|
445
446
|
id: string;
|
|
446
447
|
name: string;
|
|
447
448
|
price: number;
|
|
448
449
|
}
|
|
449
450
|
|
|
450
451
|
export default definePage({
|
|
451
|
-
aiMeta: {
|
|
452
|
-
id: 'detail-page',
|
|
453
|
-
title: '详情页'
|
|
454
|
-
},
|
|
455
452
|
render() {
|
|
456
453
|
// getViewData() 直接返回传入页面的最终对象
|
|
457
|
-
const { id, name, price } = getViewData<
|
|
454
|
+
const { id, name, price } = getViewData<DetailPageData>();
|
|
458
455
|
|
|
459
456
|
return (
|
|
460
457
|
<view>
|
|
@@ -497,10 +494,6 @@ function goBackTwoPages() {
|
|
|
497
494
|
|
|
498
495
|
```tsx
|
|
499
496
|
export default definePage({
|
|
500
|
-
aiMeta: {
|
|
501
|
-
id: 'my-page',
|
|
502
|
-
title: '我的页面'
|
|
503
|
-
},
|
|
504
497
|
onShow() {
|
|
505
498
|
// 页面显示时调用(包括从其他页面返回)
|
|
506
499
|
console.log('页面显示');
|
|
@@ -536,10 +529,6 @@ function openGridPage() {
|
|
|
536
529
|
|
|
537
530
|
// 九宫格页面定义
|
|
538
531
|
export default definePage({
|
|
539
|
-
aiMeta: {
|
|
540
|
-
id: 'app-grid',
|
|
541
|
-
title: '应用中心'
|
|
542
|
-
},
|
|
543
532
|
render() {
|
|
544
533
|
const apps = [
|
|
545
534
|
{ id: 'app1', name: '应用1', icon: '🎯' },
|
|
@@ -28,6 +28,28 @@ src/pages/user-profile/
|
|
|
28
28
|
└── index.scss # 组件样式
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
+
### app.config.ts
|
|
32
|
+
|
|
33
|
+
`app.config.ts` 需要配置 `appId` 和 `name`。这里额外配置 `pages` 是为了补充标题和描述,并确保
|
|
34
|
+
`user-profile` 作为页面 ID 使用。
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
38
|
+
|
|
39
|
+
export default defineAppConfig({
|
|
40
|
+
appId: 'com.example.my-doubao-app',
|
|
41
|
+
name: '我的豆包应用',
|
|
42
|
+
pages: [
|
|
43
|
+
{
|
|
44
|
+
entry: 'pages/user-profile/index',
|
|
45
|
+
id: 'user-profile',
|
|
46
|
+
title: '用户资料',
|
|
47
|
+
description: '显示用户个人信息和统计数据'
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
});
|
|
51
|
+
```
|
|
52
|
+
|
|
31
53
|
### index.tsx
|
|
32
54
|
|
|
33
55
|
```tsx
|
|
@@ -139,11 +161,6 @@ function UserProfilePage() {
|
|
|
139
161
|
}
|
|
140
162
|
|
|
141
163
|
export default definePage({
|
|
142
|
-
aiMeta: {
|
|
143
|
-
id: 'user-profile',
|
|
144
|
-
title: '用户资料',
|
|
145
|
-
description: '显示用户个人信息和统计数据'
|
|
146
|
-
},
|
|
147
164
|
onShow() {
|
|
148
165
|
console.log('页面显示');
|
|
149
166
|
},
|
|
@@ -261,11 +278,11 @@ interface WeatherData {
|
|
|
261
278
|
icon: string;
|
|
262
279
|
}
|
|
263
280
|
|
|
264
|
-
interface
|
|
281
|
+
interface WeatherWidgetData {
|
|
265
282
|
city: string;
|
|
266
283
|
}
|
|
267
284
|
|
|
268
|
-
function WeatherCard({ city }:
|
|
285
|
+
function WeatherCard({ city }: WeatherWidgetData) {
|
|
269
286
|
const [weather, setWeather] = useState<WeatherData | null>(null);
|
|
270
287
|
const [loading, setLoading] = useState(true);
|
|
271
288
|
const [error, setError] = useState<string | null>(null);
|
|
@@ -365,8 +382,8 @@ export default defineWidget({
|
|
|
365
382
|
console.log('卡片销毁');
|
|
366
383
|
},
|
|
367
384
|
render() {
|
|
368
|
-
const
|
|
369
|
-
return <WeatherCard city={
|
|
385
|
+
const viewData = getViewData<WeatherWidgetData>();
|
|
386
|
+
return <WeatherCard city={viewData.city} />;
|
|
370
387
|
}
|
|
371
388
|
});
|
|
372
389
|
```
|
|
@@ -466,10 +483,10 @@ export default defineWidget({
|
|
|
466
483
|
- `onHide()` - 页面隐藏时调用
|
|
467
484
|
- `onDestroy()` - 页面销毁时调用
|
|
468
485
|
|
|
469
|
-
2.
|
|
470
|
-
- `id`
|
|
471
|
-
- `title
|
|
472
|
-
- `
|
|
486
|
+
2. **页面配置(可选 pages)**
|
|
487
|
+
- 一级目录不写进 `pages` 也会自动发现,默认 `id` 是目录名
|
|
488
|
+
- 需要 `title`、`description`、固定首页或多级目录时再配置
|
|
489
|
+
- 多级目录需要显式写 `entry`
|
|
473
490
|
|
|
474
491
|
3. **状态管理**
|
|
475
492
|
- 使用 React Hooks(useState, useEffect)
|
|
@@ -486,10 +503,10 @@ export default defineWidget({
|
|
|
486
503
|
- `onForeground()` / `onBackground()` - 应用前后台切换
|
|
487
504
|
- `onMounted()` / `onDestroy()` - 挂载/销毁
|
|
488
505
|
|
|
489
|
-
2.
|
|
490
|
-
- 使用
|
|
491
|
-
-
|
|
492
|
-
-
|
|
506
|
+
2. **ViewData 定义**
|
|
507
|
+
- 使用 TypeScript 类型定义 `getViewData<T>()` 的 viewData 结构
|
|
508
|
+
- 对可选字段和空数据做兜底处理
|
|
509
|
+
- 避免直接使用 `any`
|
|
493
510
|
|
|
494
511
|
3. **卡片类型 (boxType)**
|
|
495
512
|
- `inbox` - 普通卡片
|