@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
|
@@ -6,6 +6,42 @@ Page(页面)和 Widget(卡片)组件的完整开发指南。
|
|
|
6
6
|
|
|
7
7
|
## 🎯 Page 开发指南
|
|
8
8
|
|
|
9
|
+
### App 配置、可选入口与多级目录
|
|
10
|
+
|
|
11
|
+
`src/app.config.ts` 是应用配置文件,需要配置 `appId` 和 `name`。`pages` / `widgets` 是可选的显式入口配置。
|
|
12
|
+
一级页面目录会自动发现,例如 `src/pages/home/index.tsx` 会产出 `pageId: 'home'`;不配置到 `pages` 时仍可构建,
|
|
13
|
+
但 `title`、`description` 等页面 metadata 为空。
|
|
14
|
+
|
|
15
|
+
需要补 metadata、固定首页顺序或声明多级目录时,再配置 `pages` 数组。`pages` 是有序数组,第一项会作为应用首页
|
|
16
|
+
(最终 manifest 的 `appletEntry`);如果希望 `home` 是默认打开页面,把 `pages/home/index` 放在第一项。
|
|
17
|
+
数组项可以是字符串,也可以是 `{ entry, ...metadata }` 对象:只声明入口时用字符串;需要补 metadata 时用对象。
|
|
18
|
+
|
|
19
|
+
如果不配置 `pages` / `widgets`,一级 Page / Widget 仍会按目录产出;Page / Widget 的默认 ID 取入口最后一级目录名,
|
|
20
|
+
页面/卡片 metadata 字段为空,Widget 的 `boxType` 默认为 `inbox`。没有显式 `pages` 顺序时,首页入口会走构建兜底/历史默认
|
|
21
|
+
`index`;首页不是 `index` 时建议配置 `pages` 第一项。
|
|
22
|
+
|
|
23
|
+
多级目录不会被一级扫描自动发现,例如 `src/pages/account/demo/index.tsx` 需要显式写
|
|
24
|
+
`entry: 'pages/account/demo/index'`。如果不配置 `id`,默认 `pageId` 是最后一级目录名 `demo`。
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
28
|
+
|
|
29
|
+
export default defineAppConfig({
|
|
30
|
+
appId: 'com.example.my-doubao-app',
|
|
31
|
+
name: '我的豆包应用',
|
|
32
|
+
pages: [
|
|
33
|
+
'pages/home/index',
|
|
34
|
+
'pages/account/demo/index',
|
|
35
|
+
{
|
|
36
|
+
entry: 'pages/profile/index',
|
|
37
|
+
id: 'profile',
|
|
38
|
+
title: '资料页',
|
|
39
|
+
description: '补充 metadata 的页面示例'
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
9
45
|
### 基本结构
|
|
10
46
|
|
|
11
47
|
```tsx
|
|
@@ -13,14 +49,7 @@ import { definePage, getViewData, useState, useEffect } from '@doubao-apps/frame
|
|
|
13
49
|
import './index.scss';
|
|
14
50
|
|
|
15
51
|
export default definePage({
|
|
16
|
-
// 1.
|
|
17
|
-
aiMeta: {
|
|
18
|
-
id: 'my-page', // 页面唯一标识
|
|
19
|
-
title: '我的页面', // 页面标题
|
|
20
|
-
description: '页面功能描述' // 页面描述
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
// 2. 生命周期钩子
|
|
52
|
+
// 1. 生命周期钩子
|
|
24
53
|
onShow() {
|
|
25
54
|
// 页面显示时调用(包括从其他页面返回)
|
|
26
55
|
console.log('页面显示');
|
|
@@ -36,12 +65,12 @@ export default definePage({
|
|
|
36
65
|
console.log('页面销毁');
|
|
37
66
|
},
|
|
38
67
|
|
|
39
|
-
//
|
|
68
|
+
// 2. 渲染函数
|
|
40
69
|
render() {
|
|
41
70
|
// 使用 getViewData() 和 getViewContext() 获取数据和上下文
|
|
42
|
-
const
|
|
71
|
+
const viewData = getViewData();
|
|
43
72
|
|
|
44
|
-
return <MyPageComponent {...
|
|
73
|
+
return <MyPageComponent {...viewData} />;
|
|
45
74
|
}
|
|
46
75
|
});
|
|
47
76
|
```
|
|
@@ -52,10 +81,6 @@ export default definePage({
|
|
|
52
81
|
|
|
53
82
|
```tsx
|
|
54
83
|
export default definePage({
|
|
55
|
-
aiMeta: {
|
|
56
|
-
id: 'full-page',
|
|
57
|
-
title: '全屏页面'
|
|
58
|
-
},
|
|
59
84
|
render() {
|
|
60
85
|
return (
|
|
61
86
|
<view className="full-page">
|
|
@@ -72,10 +97,6 @@ export default definePage({
|
|
|
72
97
|
|
|
73
98
|
```tsx
|
|
74
99
|
export default definePage({
|
|
75
|
-
aiMeta: {
|
|
76
|
-
id: 'grid-page',
|
|
77
|
-
title: '九宫格'
|
|
78
|
-
},
|
|
79
100
|
render() {
|
|
80
101
|
const items = [
|
|
81
102
|
{ id: '1', title: '应用1', icon: '🎯' },
|
|
@@ -100,19 +121,15 @@ export default definePage({
|
|
|
100
121
|
### 页面参数接收
|
|
101
122
|
|
|
102
123
|
```tsx
|
|
103
|
-
interface
|
|
124
|
+
interface PageViewData {
|
|
104
125
|
userId: string;
|
|
105
126
|
tab?: string;
|
|
106
127
|
}
|
|
107
128
|
|
|
108
129
|
export default definePage({
|
|
109
|
-
aiMeta: {
|
|
110
|
-
id: 'user-detail',
|
|
111
|
-
title: '用户详情'
|
|
112
|
-
},
|
|
113
130
|
render() {
|
|
114
|
-
const
|
|
115
|
-
const { userId, tab = 'profile' } =
|
|
131
|
+
const viewData = getViewData<PageViewData>();
|
|
132
|
+
const { userId, tab = 'profile' } = viewData;
|
|
116
133
|
|
|
117
134
|
return (
|
|
118
135
|
<view>
|
|
@@ -145,9 +162,10 @@ reLaunch({
|
|
|
145
162
|
});
|
|
146
163
|
```
|
|
147
164
|
|
|
148
|
-
`url` 在常规页面跳转里填写页面的 `pageId
|
|
165
|
+
`url` 在常规页面跳转里填写页面的 `pageId`。显式配置时取 `src/app.config.ts` 中对应 page 的 `id`;不配置时取入口目录名,例如
|
|
166
|
+
`src/pages/detail/index.tsx` 默认为 `detail`。
|
|
149
167
|
|
|
150
|
-
页面内可继续通过 `getViewData<
|
|
168
|
+
页面内可继续通过 `getViewData<PageViewData>()` 读取 URL 中传入的参数。
|
|
151
169
|
|
|
152
170
|
### 常用模式
|
|
153
171
|
|
|
@@ -243,14 +261,26 @@ function FormPage() {
|
|
|
243
261
|
|
|
244
262
|
## 🎴 Widget 开发指南
|
|
245
263
|
|
|
246
|
-
###
|
|
264
|
+
### 可选 Widgets 配置
|
|
265
|
+
|
|
266
|
+
一级 Widget 目录会自动发现,例如 `src/widgets/my-widget/index.tsx` 会产出 `widgetId: 'my-widget'`。不配置
|
|
267
|
+
`widgets` 时仍可构建,但 `name`、`description` 等 metadata 为空,`boxType` 默认是 `inbox`。
|
|
268
|
+
|
|
269
|
+
需要补 metadata 或声明多级目录时,再配置 `widgets` 数组。多级目录如 `src/widgets/order/detail/index.tsx`
|
|
270
|
+
需要显式写 `entry: 'widgets/order/detail/index'`;如果不配置 `id`,默认 `widgetId` 是最后一级目录名 `detail`。
|
|
271
|
+
数组项可以是字符串,也可以是 `{ entry, ...metadata }` 对象:只声明入口时用字符串;需要补 metadata 时用对象。
|
|
247
272
|
|
|
248
273
|
```ts
|
|
249
274
|
import { defineAppConfig } from '@doubao-apps/kit';
|
|
250
275
|
|
|
251
276
|
export default defineAppConfig({
|
|
252
|
-
|
|
253
|
-
|
|
277
|
+
appId: 'com.example.my-doubao-app',
|
|
278
|
+
name: '我的豆包应用',
|
|
279
|
+
widgets: [
|
|
280
|
+
'widgets/simple-card/index',
|
|
281
|
+
'widgets/order/detail/index',
|
|
282
|
+
{
|
|
283
|
+
entry: 'widgets/my-widget/index',
|
|
254
284
|
id: 'my-widget', // 卡片唯一标识
|
|
255
285
|
name: '我的卡片', // 卡片名称
|
|
256
286
|
description: '卡片功能描述', // 卡片描述
|
|
@@ -259,7 +289,7 @@ export default defineAppConfig({
|
|
|
259
289
|
keywords: ['demo', 'widget'],
|
|
260
290
|
titleType: 'normal'
|
|
261
291
|
}
|
|
262
|
-
|
|
292
|
+
]
|
|
263
293
|
});
|
|
264
294
|
```
|
|
265
295
|
|
|
@@ -301,8 +331,8 @@ export default defineWidget({
|
|
|
301
331
|
},
|
|
302
332
|
|
|
303
333
|
render() {
|
|
304
|
-
const
|
|
305
|
-
return <MyWidgetComponent {...
|
|
334
|
+
const viewData = getViewData<MyWidgetData>();
|
|
335
|
+
return <MyWidgetComponent {...viewData} />;
|
|
306
336
|
}
|
|
307
337
|
});
|
|
308
338
|
```
|
|
@@ -323,25 +353,28 @@ export default defineWidget({
|
|
|
323
353
|
import { defineAppConfig } from '@doubao-apps/kit';
|
|
324
354
|
|
|
325
355
|
export default defineAppConfig({
|
|
326
|
-
|
|
327
|
-
|
|
356
|
+
appId: 'com.example.my-doubao-app',
|
|
357
|
+
name: '我的豆包应用',
|
|
358
|
+
widgets: [
|
|
359
|
+
{
|
|
360
|
+
entry: 'widgets/info-card/index',
|
|
328
361
|
id: 'info-card',
|
|
329
362
|
name: '信息卡片',
|
|
330
363
|
boxType: 'inbox'
|
|
331
364
|
}
|
|
332
|
-
|
|
365
|
+
]
|
|
333
366
|
});
|
|
334
367
|
```
|
|
335
368
|
|
|
336
369
|
```tsx
|
|
337
370
|
export default defineWidget({
|
|
338
371
|
render() {
|
|
339
|
-
const
|
|
372
|
+
const viewData = getViewData<{ title: string; content: string }>();
|
|
340
373
|
|
|
341
374
|
return (
|
|
342
375
|
<view className="info-card">
|
|
343
|
-
<text className="title">{
|
|
344
|
-
<text className="content">{
|
|
376
|
+
<text className="title">{viewData.title}</text>
|
|
377
|
+
<text className="content">{viewData.content}</text>
|
|
345
378
|
</view>
|
|
346
379
|
);
|
|
347
380
|
}
|
|
@@ -357,33 +390,36 @@ export default defineWidget({
|
|
|
357
390
|
import { defineAppConfig } from '@doubao-apps/kit';
|
|
358
391
|
|
|
359
392
|
export default defineAppConfig({
|
|
360
|
-
|
|
361
|
-
|
|
393
|
+
appId: 'com.example.my-doubao-app',
|
|
394
|
+
name: '我的豆包应用',
|
|
395
|
+
widgets: [
|
|
396
|
+
{
|
|
397
|
+
entry: 'widgets/user-action-card/index',
|
|
362
398
|
id: 'user-action-card',
|
|
363
399
|
name: '全宽卡片示例',
|
|
364
400
|
boxType: 'full_box'
|
|
365
401
|
}
|
|
366
|
-
|
|
402
|
+
]
|
|
367
403
|
});
|
|
368
404
|
```
|
|
369
405
|
|
|
370
406
|
```tsx
|
|
371
407
|
export default defineWidget({
|
|
372
408
|
render() {
|
|
373
|
-
const
|
|
409
|
+
const viewData = getViewData<{ action: string; result: string }>();
|
|
374
410
|
return (
|
|
375
411
|
<view className="user-action-card">
|
|
376
|
-
<text>操作: {
|
|
377
|
-
<text>结果: {
|
|
412
|
+
<text>操作: {viewData.action}</text>
|
|
413
|
+
<text>结果: {viewData.result}</text>
|
|
378
414
|
</view>
|
|
379
415
|
);
|
|
380
416
|
}
|
|
381
417
|
});
|
|
382
418
|
```
|
|
383
419
|
|
|
384
|
-
###
|
|
420
|
+
### ViewData 类型
|
|
385
421
|
|
|
386
|
-
Widget
|
|
422
|
+
Widget viewData 通过 `getViewData<T>()` 的泛型参数和 TypeScript 接口表达。
|
|
387
423
|
|
|
388
424
|
```tsx
|
|
389
425
|
interface ProductCardData {
|
|
@@ -400,20 +436,20 @@ interface ProductCardData {
|
|
|
400
436
|
|
|
401
437
|
export default defineWidget({
|
|
402
438
|
render() {
|
|
403
|
-
const
|
|
439
|
+
const viewData = getViewData<ProductCardData>();
|
|
404
440
|
return (
|
|
405
441
|
<view className="product-card">
|
|
406
|
-
<text className="name">{
|
|
407
|
-
<text className="price">¥{
|
|
408
|
-
{
|
|
442
|
+
<text className="name">{viewData.name}</text>
|
|
443
|
+
<text className="price">¥{viewData.price}</text>
|
|
444
|
+
{viewData.images && (
|
|
409
445
|
<view className="images">
|
|
410
|
-
{
|
|
446
|
+
{viewData.images.map((img, idx) => (
|
|
411
447
|
<image key={idx} src={img} />
|
|
412
448
|
))}
|
|
413
449
|
</view>
|
|
414
450
|
)}
|
|
415
|
-
<text className="category">{
|
|
416
|
-
{!
|
|
451
|
+
<text className="category">{viewData.category}</text>
|
|
452
|
+
{!viewData.inStock && <text className="out-of-stock">缺货</text>}
|
|
417
453
|
</view>
|
|
418
454
|
);
|
|
419
455
|
}
|
|
@@ -671,18 +707,16 @@ interface TodoData {
|
|
|
671
707
|
}
|
|
672
708
|
|
|
673
709
|
export default defineWidget({
|
|
674
|
-
aiMeta: { ... },
|
|
675
|
-
|
|
676
710
|
onMounted() {
|
|
677
711
|
// 在生命周期钩子中访问数据
|
|
678
|
-
const
|
|
679
|
-
console.log('任务列表:',
|
|
712
|
+
const viewData = getViewData<TodoData>();
|
|
713
|
+
console.log('任务列表:', viewData.tasks);
|
|
680
714
|
},
|
|
681
715
|
|
|
682
716
|
render() {
|
|
683
717
|
// render 函数中使用 getViewData() 获取数据
|
|
684
|
-
const
|
|
685
|
-
return <view>{
|
|
718
|
+
const viewData = getViewData<TodoData>();
|
|
719
|
+
return <view>{viewData.tasks.length} 个任务</view>;
|
|
686
720
|
}
|
|
687
721
|
});
|
|
688
722
|
```
|
|
@@ -696,8 +730,8 @@ interface WeatherData {
|
|
|
696
730
|
|
|
697
731
|
function WeatherWidget() {
|
|
698
732
|
const loadWeatherIcon = () => {
|
|
699
|
-
const
|
|
700
|
-
return
|
|
733
|
+
const viewData = getViewData<WeatherData>();
|
|
734
|
+
return viewData.temperature > 25 ? '☀️' : '❄️';
|
|
701
735
|
};
|
|
702
736
|
|
|
703
737
|
return (
|
|
@@ -715,27 +749,27 @@ function WeatherWidget() {
|
|
|
715
749
|
|
|
716
750
|
### 使用 `getViewData()` 和 `getViewContext()`
|
|
717
751
|
|
|
718
|
-
render
|
|
752
|
+
render 函数不再通过参数接收 viewData 和 context,请使用以下方法获取数据和上下文:
|
|
719
753
|
|
|
720
754
|
**推荐做法**:
|
|
721
755
|
```tsx
|
|
722
756
|
// ✅ 推荐:render 函数中使用 getViewData()
|
|
723
757
|
render() {
|
|
724
|
-
const
|
|
725
|
-
return <text>{
|
|
758
|
+
const viewData = getViewData<WeatherData>();
|
|
759
|
+
return <text>{viewData.city}: {viewData.temperature}°C</text>;
|
|
726
760
|
}
|
|
727
761
|
|
|
728
762
|
// ✅ 推荐:生命周期钩子中使用 getViewData()
|
|
729
763
|
onMounted() {
|
|
730
|
-
const
|
|
764
|
+
const viewData = getViewData<WeatherData>();
|
|
731
765
|
// 处理数据...
|
|
732
766
|
}
|
|
733
767
|
|
|
734
768
|
// ✅ 推荐:同时获取数据和上下文
|
|
735
769
|
render() {
|
|
736
|
-
const
|
|
770
|
+
const viewData = getViewData<WeatherData>();
|
|
737
771
|
const context = getViewContext();
|
|
738
|
-
return <text>{
|
|
772
|
+
return <text>{viewData.city} - {context.lang}</text>;
|
|
739
773
|
}
|
|
740
774
|
```
|
|
741
775
|
|
|
@@ -120,8 +120,6 @@ const handleClick = useCallback(() => {
|
|
|
120
120
|
```tsx
|
|
121
121
|
// ❌ 错误写法 - 没有在正确位置定义
|
|
122
122
|
export default definePage({
|
|
123
|
-
aiMeta: { /* ... */ },
|
|
124
|
-
|
|
125
123
|
render() {
|
|
126
124
|
// ❌ 不能在这里定义
|
|
127
125
|
const onShow = () => {
|
|
@@ -134,8 +132,6 @@ export default definePage({
|
|
|
134
132
|
|
|
135
133
|
// ✅ 正确写法
|
|
136
134
|
export default definePage({
|
|
137
|
-
aiMeta: { /* ... */ },
|
|
138
|
-
|
|
139
135
|
onShow() {
|
|
140
136
|
console.log('Page shown');
|
|
141
137
|
},
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
| API | 用途 | 示例 |
|
|
9
9
|
|-----|------|------|
|
|
10
|
-
| `definePage()` | 定义 Page 组件 | `definePage({
|
|
11
|
-
| `defineWidget()` | 定义 Widget 组件 | `defineWidget({
|
|
10
|
+
| `definePage()` | 定义 Page 组件 | `definePage({ render() {...} })` |
|
|
11
|
+
| `defineWidget()` | 定义 Widget 组件 | `defineWidget({ render() {...} })` |
|
|
12
12
|
| `defineApp()` | 定义 App 入口 | `defineApp({ onLaunch() {...} })` |
|
|
13
13
|
|
|
14
14
|
---
|
|
@@ -77,8 +77,8 @@ interface MyData {
|
|
|
77
77
|
title: string;
|
|
78
78
|
count: number;
|
|
79
79
|
}
|
|
80
|
-
const
|
|
81
|
-
console.log(
|
|
80
|
+
const viewData = getViewData<MyData>();
|
|
81
|
+
console.log(viewData.title, viewData.count);
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
**AIViewContext 类型**:
|
|
@@ -206,7 +206,7 @@ const phone = await getPhoneNumber();
|
|
|
206
206
|
|
|
207
207
|
> `close()` 已废弃,公开路由场景请优先使用 `navigateBack()`。
|
|
208
208
|
>
|
|
209
|
-
> 常规页面跳转场景下,`url` 直接使用目标页面的 `pageId
|
|
209
|
+
> 常规页面跳转场景下,`url` 直接使用目标页面的 `pageId`。显式配置时取 `src/app.config.ts` 中对应 page 的 `id`;不配置时取入口目录名,例如 `src/pages/detail/index.tsx` 默认为 `detail`。需要传参时可直接拼接 query string。
|
|
210
210
|
|
|
211
211
|
### showToast
|
|
212
212
|
|
|
@@ -461,36 +461,41 @@ const phone = await getPhoneNumber();
|
|
|
461
461
|
|
|
462
462
|
# 常用类型
|
|
463
463
|
|
|
464
|
-
|
|
465
|
-
// Page Input
|
|
466
|
-
interface PageInput {
|
|
467
|
-
[key: string]: any; // URL 参数
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
// src/app.config.ts 中的 metadata 配置
|
|
471
|
-
interface PageAIMeta {
|
|
472
|
-
id: string; // 页面唯一标识
|
|
473
|
-
title?: string; // 页面标题
|
|
474
|
-
description?: string; // 页面描述
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
interface WidgetAIMeta {
|
|
478
|
-
id: string; // 卡片唯一标识
|
|
479
|
-
name?: string; // 卡片名称
|
|
480
|
-
description?: string; // 卡片描述
|
|
481
|
-
boxType?: 'inbox' | 'full_box'; // 卡片类型
|
|
482
|
-
border?: boolean; // 是否显示边框
|
|
483
|
-
keywords?: string[]; // 搜索关键词
|
|
484
|
-
titleType?: 'none' | 'normal' | 'float';
|
|
485
|
-
}
|
|
464
|
+
`src/app.config.ts` 需要配置 `appId` 和 `name`。Page / Widget metadata 使用可选的 `pages`、`widgets` 数组声明:
|
|
486
465
|
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
466
|
+
```typescript
|
|
467
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
468
|
+
|
|
469
|
+
export default defineAppConfig({
|
|
470
|
+
appId: 'com.example.my-doubao-app',
|
|
471
|
+
name: '我的豆包应用',
|
|
472
|
+
pages: [
|
|
473
|
+
'pages/home/index',
|
|
474
|
+
{
|
|
475
|
+
entry: 'pages/account/demo/index',
|
|
476
|
+
id: 'account-demo',
|
|
477
|
+
title: '账号示例页',
|
|
478
|
+
description: '多级目录页面示例'
|
|
479
|
+
}
|
|
480
|
+
],
|
|
481
|
+
widgets: [
|
|
482
|
+
'widgets/user-card/index',
|
|
483
|
+
{
|
|
484
|
+
entry: 'widgets/order/detail/index',
|
|
485
|
+
id: 'order-detail',
|
|
486
|
+
name: '订单详情卡片',
|
|
487
|
+
description: '多级目录卡片示例',
|
|
488
|
+
boxType: 'inbox',
|
|
489
|
+
border: true,
|
|
490
|
+
keywords: ['order'],
|
|
491
|
+
titleType: 'normal'
|
|
492
|
+
}
|
|
493
|
+
]
|
|
494
|
+
});
|
|
492
495
|
```
|
|
493
496
|
|
|
497
|
+
字符串数组项只声明入口,不补 metadata;对象数组项用于同时声明入口和 metadata。
|
|
498
|
+
|
|
494
499
|
---
|
|
495
500
|
|
|
496
501
|
# 快速示例
|
|
@@ -498,17 +503,25 @@ interface WidgetViewData {
|
|
|
498
503
|
|
|
499
504
|
## 最小 App
|
|
500
505
|
|
|
506
|
+
### src/app.config.ts
|
|
507
|
+
|
|
508
|
+
```ts
|
|
509
|
+
import { defineAppConfig } from '@doubao-apps/kit';
|
|
510
|
+
|
|
511
|
+
export default defineAppConfig({
|
|
512
|
+
appId: 'com.doubao.react-lynx-template',
|
|
513
|
+
name: 'Doubao Apps SDK Template',
|
|
514
|
+
description: 'React Lynx 开发模板',
|
|
515
|
+
keywords: ['react', 'lynx', 'template', 'doubao']
|
|
516
|
+
});
|
|
517
|
+
```
|
|
518
|
+
|
|
519
|
+
### src/app.ts
|
|
520
|
+
|
|
501
521
|
```tsx
|
|
502
522
|
import { defineApp } from "@doubao-apps/framework";
|
|
503
523
|
|
|
504
|
-
// Define AI Metadata
|
|
505
524
|
export default defineApp({
|
|
506
|
-
aiMeta: {
|
|
507
|
-
package: "com.doubao.react-lynx-template",
|
|
508
|
-
name: "Doubao Apps SDK Template",
|
|
509
|
-
description: "React Lynx 开发模板",
|
|
510
|
-
keywords: ["react", "lynx", "template", "doubao"],
|
|
511
|
-
},
|
|
512
525
|
onLaunch() {
|
|
513
526
|
console.log("App launched");
|
|
514
527
|
},
|
|
@@ -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
|
|