@doubao-apps/create 0.0.28 → 0.0.29
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/template-empty/README.md +8 -6
- package/dist/template-empty/package.json +2 -2
- package/dist/template-empty/references/examples/common-patterns.md +4 -15
- package/dist/template-empty/references/examples/component-basics.md +34 -17
- package/dist/template-empty/references/guides/component-development.md +103 -69
- package/dist/template-empty/references/guides/performance-optimization.md +0 -2
- package/dist/template-empty/references/guides/troubleshooting.md +0 -4
- package/dist/template-empty/references/reference/framework-api-quick-ref.md +52 -39
- package/dist/template-empty/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/template-empty/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/template-empty/references/reference/open-api/README.md +1 -1
- package/dist/template-empty/references/reference/open-api.md +91 -2
- package/dist/template-empty/references/rules/dos-and-donts.md +113 -36
- package/dist/template-starter/package.json +2 -2
- package/dist/template-starter/references/examples/common-patterns.md +4 -15
- package/dist/template-starter/references/examples/component-basics.md +34 -17
- package/dist/template-starter/references/guides/component-development.md +103 -69
- package/dist/template-starter/references/guides/performance-optimization.md +0 -2
- package/dist/template-starter/references/guides/troubleshooting.md +0 -4
- package/dist/template-starter/references/reference/framework-api-quick-ref.md +52 -39
- package/dist/template-starter/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/template-starter/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/template-starter/references/reference/open-api/README.md +1 -1
- package/dist/template-starter/references/reference/open-api.md +91 -2
- package/dist/template-starter/references/rules/dos-and-donts.md +113 -36
- package/dist/template-starter/src/app.config.ts +3 -29
- package/package.json +1 -1
|
@@ -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) |
|
|
@@ -450,7 +450,7 @@ closePage();
|
|
|
450
450
|
```ts
|
|
451
451
|
expiredWidget({
|
|
452
452
|
widgetInstanceId: 'instance_123',
|
|
453
|
-
|
|
453
|
+
url: '${pageId}?key=value'
|
|
454
454
|
});
|
|
455
455
|
```
|
|
456
456
|
|
|
@@ -1537,6 +1537,40 @@ off();
|
|
|
1537
1537
|
|
|
1538
1538
|
***
|
|
1539
1539
|
|
|
1540
|
+
### onDeviceMotionChange()
|
|
1541
|
+
|
|
1542
|
+
> **onDeviceMotionChange**(`handler`): () => `void`
|
|
1543
|
+
|
|
1544
|
+
监听设备方向变化事件。
|
|
1545
|
+
|
|
1546
|
+
#### Parameters
|
|
1547
|
+
|
|
1548
|
+
• **handler**
|
|
1549
|
+
|
|
1550
|
+
#### Returns
|
|
1551
|
+
|
|
1552
|
+
`Function`
|
|
1553
|
+
|
|
1554
|
+
返回取消当前监听函数的函数。
|
|
1555
|
+
|
|
1556
|
+
##### Returns
|
|
1557
|
+
|
|
1558
|
+
`void`
|
|
1559
|
+
|
|
1560
|
+
#### Example
|
|
1561
|
+
|
|
1562
|
+
```ts
|
|
1563
|
+
import { onDeviceMotionChange } from '@doubao-apps/framework/api';
|
|
1564
|
+
|
|
1565
|
+
const off = onDeviceMotionChange(({ alpha, beta, gamma }) => {
|
|
1566
|
+
console.log(alpha, beta, gamma);
|
|
1567
|
+
});
|
|
1568
|
+
|
|
1569
|
+
off();
|
|
1570
|
+
```
|
|
1571
|
+
|
|
1572
|
+
***
|
|
1573
|
+
|
|
1540
1574
|
### onGyroscopeChange()
|
|
1541
1575
|
|
|
1542
1576
|
> **onGyroscopeChange**(`handler`): () => `void`
|
|
@@ -3841,6 +3875,35 @@ Wi-Fi SSID。
|
|
|
3841
3875
|
|
|
3842
3876
|
***
|
|
3843
3877
|
|
|
3878
|
+
### DeviceMotionChangeEvent
|
|
3879
|
+
|
|
3880
|
+
设备方向变化事件。
|
|
3881
|
+
|
|
3882
|
+
#### Properties
|
|
3883
|
+
|
|
3884
|
+
##### alpha
|
|
3885
|
+
|
|
3886
|
+
> **alpha**: `number`
|
|
3887
|
+
|
|
3888
|
+
当手机坐标 X/Y 和地球坐标 X/Y 重合时,绕 Z 轴转动的夹角。
|
|
3889
|
+
范围为 [0, 2π),逆时针转动为正。
|
|
3890
|
+
|
|
3891
|
+
##### beta
|
|
3892
|
+
|
|
3893
|
+
> **beta**: `number`
|
|
3894
|
+
|
|
3895
|
+
当手机坐标 Y/Z 和地球坐标 Y/Z 重合时,绕 X 轴转动的夹角。
|
|
3896
|
+
范围为 [-π, π)。
|
|
3897
|
+
|
|
3898
|
+
##### gamma
|
|
3899
|
+
|
|
3900
|
+
> **gamma**: `number`
|
|
3901
|
+
|
|
3902
|
+
当手机坐标 X/Z 和地球坐标 X/Z 重合时,绕 Y 轴转动的夹角。
|
|
3903
|
+
范围为 [-π/2, π/2)。
|
|
3904
|
+
|
|
3905
|
+
***
|
|
3906
|
+
|
|
3844
3907
|
### DispatchActionDirectiveParams
|
|
3845
3908
|
|
|
3846
3909
|
下发动作指令的请求参数。
|
|
@@ -3945,18 +4008,28 @@ mcp入参,如果expectedAction里预期要调用工具,需要在这里写明
|
|
|
3945
4008
|
|
|
3946
4009
|
点击失效卡要跳转的页面 detailText
|
|
3947
4010
|
|
|
3948
|
-
##### schema
|
|
4011
|
+
##### ~~schema?~~
|
|
3949
4012
|
|
|
3950
4013
|
> `optional` **schema**: `string`
|
|
3951
4014
|
|
|
3952
4015
|
点击失效卡要跳转的页面 schema,格式与 navigateTo 的 url 相同
|
|
3953
4016
|
|
|
4017
|
+
###### Deprecated
|
|
4018
|
+
|
|
4019
|
+
使用 url 字段替代 schema 字段,后续版本将移除 schema 字段,请尽快迁移到 url 字段
|
|
4020
|
+
|
|
3954
4021
|
##### title?
|
|
3955
4022
|
|
|
3956
4023
|
> `optional` **title**: `string`
|
|
3957
4024
|
|
|
3958
4025
|
点击失效卡要跳转的页面 title
|
|
3959
4026
|
|
|
4027
|
+
##### url?
|
|
4028
|
+
|
|
4029
|
+
> `optional` **url**: `string`
|
|
4030
|
+
|
|
4031
|
+
点击失效卡要跳转的页面 url 或 sslocal schema
|
|
4032
|
+
|
|
3960
4033
|
##### widgetInstanceId
|
|
3961
4034
|
|
|
3962
4035
|
> **widgetInstanceId**: `string`
|
|
@@ -6305,6 +6378,22 @@ iBeacon 距离等级。
|
|
|
6305
6378
|
|
|
6306
6379
|
***
|
|
6307
6380
|
|
|
6381
|
+
### DeviceMotionChangeListener()
|
|
6382
|
+
|
|
6383
|
+
> **DeviceMotionChangeListener**: (`event`) => `void`
|
|
6384
|
+
|
|
6385
|
+
设备方向变化事件监听函数。
|
|
6386
|
+
|
|
6387
|
+
#### Parameters
|
|
6388
|
+
|
|
6389
|
+
• **event**: [`DeviceMotionChangeEvent`](doubao-apps-sdk-open-api.md#devicemotionchangeevent)
|
|
6390
|
+
|
|
6391
|
+
#### Returns
|
|
6392
|
+
|
|
6393
|
+
`void`
|
|
6394
|
+
|
|
6395
|
+
***
|
|
6396
|
+
|
|
6308
6397
|
### DeviceOrientation
|
|
6309
6398
|
|
|
6310
6399
|
> **DeviceOrientation**: `"portrait"` \| `"landscape"`
|
|
@@ -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
|
```
|
|
@@ -3,33 +3,7 @@ import { defineAppConfig } from '@doubao-apps/kit';
|
|
|
3
3
|
export default defineAppConfig({
|
|
4
4
|
appId: '<%= appId %>',
|
|
5
5
|
name: '<%= name %>',
|
|
6
|
-
pages:
|
|
7
|
-
'pages/home'
|
|
8
|
-
|
|
9
|
-
title: 'Doubao Apps SDK',
|
|
10
|
-
description: 'Doubao Apps SDK 欢迎页面'
|
|
11
|
-
},
|
|
12
|
-
'pages/react-lynx': {
|
|
13
|
-
id: 'react-lynx',
|
|
14
|
-
title: 'React Lynx',
|
|
15
|
-
description: '基于 React 的 UI 开发框架介绍'
|
|
16
|
-
},
|
|
17
|
-
'pages/lynx': {
|
|
18
|
-
id: 'lynx',
|
|
19
|
-
title: 'Lynx',
|
|
20
|
-
description: '高性能跨平台 UI 引擎介绍'
|
|
21
|
-
},
|
|
22
|
-
'pages/applet': {
|
|
23
|
-
id: 'applet',
|
|
24
|
-
title: 'Applet',
|
|
25
|
-
description: '小程序开发模板介绍'
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
widgets: {
|
|
29
|
-
'widgets/weather-card': {
|
|
30
|
-
id: 'weather-card',
|
|
31
|
-
name: 'Weather Card',
|
|
32
|
-
description: '显示当前天气信息的卡片组件'
|
|
33
|
-
}
|
|
34
|
-
}
|
|
6
|
+
pages: [
|
|
7
|
+
'pages/home/index' // 首页入口
|
|
8
|
+
]
|
|
35
9
|
});
|