File tree Expand file tree Collapse file tree 1 file changed +29
-3
lines changed
site/docs/tutorial/framework Expand file tree Collapse file tree 1 file changed +29
-3
lines changed Original file line number Diff line number Diff line change @@ -39,6 +39,14 @@ package.json
3939
4040## 支付宝小程序
4141
42+ f-my / f-my-web(双 Canvas 模式说明)在小程序生态中,F2 提供了两套小程序组件:f-my(默认 NativeCanvas 实现)与 f-my-web(基于 WebCanvas 实现)。不是通过 canvasType 属性切换,而是通过引入不同组件包来选择 Canvas 类型。
43+
44+ 要点:
45+
46+ - f-my:使用 NativeCanvas(原生 Canvas 实现),对齐 Web Canvas API,适用于对原生特性有依赖或兼容性要求较高的场景。
47+ - f-my-web:使用 WebCanvas(在小程序内基于 web 技术栈实现的 Canvas),在包含大量同层组件或频繁跨层通信的复杂页面中,通常能显著降低总耗时,获得更优的交互性能。
48+ - 兼容性:F2 已屏蔽两者的 API 差异,图表代码无需修改即可在 f-my 与 f-my-web 之间复用。
49+
4250mini.project.json
4351
4452``` json
@@ -49,9 +57,9 @@ mini.project.json
4957}
5058```
5159
52- ### 页面使用
60+ 使用示例(切换组件包):
5361
54- page.json
62+ 使用 NativeCanvas(f-my): page.json
5563
5664``` json
5765{
@@ -61,7 +69,25 @@ page.json
6169}
6270```
6371
64- page.axml
72+ 使用 WebCanvas(f-my-web): page.json
73+
74+ ``` json
75+ {
76+ "usingComponents" : {
77+ "f2" : " @antv/f-my-web"
78+ }
79+ }
80+ ```
81+
82+ 使用 NativeCanvas(f-my):page.axml
83+
84+ ``` jsx
85+ < view class = " container" >
86+ < f2 onRender= " onRenderChart" onCanvasReady= " onCanvasReady" >< / f2>
87+ < / view>
88+ ```
89+
90+ 使用 WebCanvas(f-my-web): page.json
6591
6692``` jsx
6793< view class = " container" >
You can’t perform that action at this time.
0 commit comments