Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: framework 文档修改 #2568

Open
wants to merge 37 commits into
base: main
Choose a base branch
from

Conversation

Vante520
Copy link

@Vante520 Vante520 commented Jan 25, 2024

利用 AI 实现的文档表达优化,主要包括:

修正错别字、标点
句式、表达语气、段落组织优化,让阅读更通顺
个别代码和注释错误
PR 内容未经人工处理,修改准确性一般在 80% 左右,请在合并前充分审阅。

@Vante520 Vante520 changed the title [WIP] feat: franmework 文档修改 [WIP] feat: framework 文档修改 Jan 25, 2024
@Vante520 Vante520 changed the title [WIP] feat: framework 文档修改 feat: framework 文档修改 Jan 31, 2024
@@ -1,22 +1,22 @@
ACSS 是一套样式语言,用于描述 AXML 的组件样式,决定 AXML 的组件的显示效果
ACSS 是一套样式语言,用于描述 AXML 的组件样式,决定 AXML 的组件显示效果
Copy link

@imsenyu imsenyu Feb 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AXML 组件的显示效果


ACSS 已经帮开发者做了不同手机端的样式兼容性处理。

# rpx

rpx(responsive pixel)可以根据屏幕宽度进行自适应,规定屏幕宽为 750rpx。以 Apple iPhone6 为例,屏幕宽度为 375px,共有 750 个物理像素,则 750 rpx = 375 px = 750 物理像素,1rpx = 0.5 px = 1 物理像素。
rpx(responsive pixel)根据屏幕宽度自适应,规定屏幕宽为 750rpx。以 Apple iPhone6 为例,屏幕宽度为 375px,共有 750 个物理像素,则 750 rpx = 375 px = 750 物理像素,1 rpx = 0.5 px = 1 物理像素。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rpx(responsive pixel)是根据屏幕宽度自适应的像素单位,

@@ -35,14 +35,13 @@ rpx(responsive pixel)可以根据屏幕宽度进行自适应,规定屏幕
}
```

导入路径支持从 node_modules 目录载入第三方模块,例如 page.acss。
导入路径支持从 node_modules 目录载入第三方模块,例如 `page.acss`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

例如 third-party/page.acss

@@ -1,7 +1,9 @@
如果想要知道 setData 引发界面更新的开销,可以使用更新性能统计信息接口。它将返回每次更新中主要更新步骤发生的时间戳,可以用来大体上估计自定义组件(或页面)更新性能。
文档内容如下:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文档内容如下:

@@ -1,79 +1,78 @@
### Q:小程序报错 worker render components is not sync,如何解决?

A:请升级 [小程序基础库 2.0](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2),如果无法升级到基础库 2.0 且当前是非插件小程序,可以尝试关闭 component2(在小程序开发者工具(IDE)中的 **详情** > **项目配置** 中,取消勾选 **component2**)
A:请升级小程序基础库到 2.0 版本。如果无法升级且当前小程序不是插件,可以尝试关闭 component2。操作方式是在小程序开发者工具(IDE)中的“详情” > 项目配置中,取消勾选component2
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

链接


![启用 component2 编译](https://gw.alipayobjects.com/zos/skylark-tools/public/files/a2af53c562788e90b2cd35adfee8aedb.png)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

参数没了

```html
<custom-form>
<custom-input></custom-input>
</custom-form>
```

## 功能要求
基础库 [2.8.5](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2) 开始支持,若版本较低,建议采取 [兼容处理](https://opendocs.alipay.com/mini/framework/compatibility)。可通过 `my.canIUse('component.relations')` 进行判断。<br />同时需要在自定义组件构造器中显式开启。
基础库版本 2.8.5 开始支持该功能。如果你使用的版本较低,建议采取兼容处理。你可以通过执行 `my.canIUse('component.relations')` 来判断是否支持。同时需要在自定义组件构造器中显式开启,如下所示:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

链接

}
});

**注意**:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

注意 放到代码块外面

| ---------- | ------- | ---- | --------------------------------------------------------------------------------------------------------- |
| component | Boolean | 是 | 声明是自定义组件。 |
| usingComponents | Object | 否 | 声明依赖的自定义组件所在路径:项目绝对路径以 `/` 开头,相对路径以 `./` 或者 `../` 开头。 |
| styleIsolation | String | 否 | 基础库版本 [2.7.2](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2) 支持。设置样式隔离表现。选项支持的取值有: `apply-shared` 表示仅 app.acss 样式以及被设置为 `shared` 的页面或自定义组件的样式会影响到自定义组件,自定义组件的 acss 样式不会影响到外部;`shared` 表示 app.acss 样式以及被设置为 `shared` 的页面或自定义组件的样式会影响到外部,自定义组件的 acss 样式也会影响到外部。默认值为 `shared`。 |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<br/> 回车没了


# 插槽 slot

通过在组件 JS 中支持 props,自定义组件可以和外部调用者交互,接受外部调用者传来的数据,同时可以调用外部调用者传来的函数,通知外部调用者组件内部的变化。但是这样还不够,自定义组件还不够灵活。除了数据的处理与通知,小程序提供的 slot 使得自定义组件的 AXML 结构可以使用外部调用者传来的 AXML 组装。外部调用者可以传递 AXML 给自定义组件,自定义组件使用其组装出最终的组件 AXML 结构。

自定义组件可以通过支持 props 来与外部调用者互动。这样,组件不仅能接受外部传递的数据,还能调用传入的函数,通知外部发生的变化。然而,这还不够灵活。小程序提供的 `slot` 功能使自定义组件的 AXML 结构能够动态整合外部传递的 AXML。这样,调用者可以将 AXML 内容传递给组件,由组件整合出完整的 AXML 结构,提高了组件的灵活性。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

自定义组件可以通过声明 props 来与外部调用者互动


# 插槽 slot

通过在组件 JS 中支持 props,自定义组件可以和外部调用者交互,接受外部调用者传来的数据,同时可以调用外部调用者传来的函数,通知外部调用者组件内部的变化。但是这样还不够,自定义组件还不够灵活。除了数据的处理与通知,小程序提供的 slot 使得自定义组件的 AXML 结构可以使用外部调用者传来的 AXML 组装。外部调用者可以传递 AXML 给自定义组件,自定义组件使用其组装出最终的组件 AXML 结构。

自定义组件可以通过支持 props 来与外部调用者互动。这样,组件不仅能接受外部传递的数据,还能调用传入的函数,通知外部发生的变化。然而,这还不够灵活。小程序提供的 `slot` 功能使自定义组件的 AXML 结构能够动态整合外部传递的 AXML。这样,调用者可以将 AXML 内容传递给组件,由组件整合出完整的 AXML 结构,提高了组件的灵活性。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

除了数据的处理与通知 保留

@@ -1,14 +1,16 @@
接下来是修改后的全文内容:
Copy link

@imsenyu imsenyu Feb 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

接下来是修改后的全文内容:


# 数据绑定

## AXML 示例代码

```html
<!-- axml -->
<view> {{ message }} </view>
<view>{{message}}</view>
```
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{{ message }} 保留花括号里面空格


下面是示例代码:

```html
<view class="container">
<view a:for="{{list}}" a:key="*this">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
{{item}}:点击置于顶部
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert


```html
<view class="container">
<view a:for="{{list}}" key="{{item}}">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
{{item}}: 点击置于顶部
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert


## 默认导出
通过 `export default` 导出的**默认导出**符号,必须通过 `<import-sjs name="module"/>` 来引入。`import-sjs` 功能标签的 `name` 属性必须是一个合法的标识符 `/^[A-Za-z_][A-Za-z0-9_]*$/`。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import-sjs 功能标签的 name 属性必须是一个合法(满足/^[A-Za-z_][A-Za-z0-9_]*$/正则规则)的标识符

<template is="A" />
<!-- 注意:不能使用 import A -->
<!-- 注意:以下用法错误,因为 C 不能使用 A 中定义的 template -->
<!-- <template is="A" /> -->
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不应该被注释掉

});
```

最终组合成数组 `[0, 1, 2, 3, 4]`。
以下是完整修改后的文本:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一个合法的标识符


```html
<template is="msgItem" data="{{...item}}" />
<template is="msgItem" data="{{...item}}"></template>
Copy link

@imsenyu imsenyu Feb 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改回 /> 自闭合

<block a:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>

<block wx:for="{{[1, 2, 3, 4, 5]}}" wx:key="*this">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wx:for -> a:for
移除 wx:key


| 方法 | 参数 | 描述 | 渲染引擎兼容性 |
| ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ---------------- |
| selectComponent | selector | 选择指定选择器的后代基础组件的 Descriptor 描述对象。selector 为选择器字符串。插槽能被提供者选中,不能被使用者选中。 | 仅 WebView |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert

| 方法 | 参数 | 描述 | 渲染引擎兼容性 |
| ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ---------------- |
| selectComponent | selector | 选择指定选择器的后代基础组件的 Descriptor 描述对象。selector 为选择器字符串。插槽能被提供者选中,不能被使用者选中。 | 仅 WebView |
| selectAllComponents | selector | 选择指定选择器的所有后代基础组件的 Descriptor 描述对象。selector 为选择器字符串。插槽能被提供者选中,不能被使用者选中。 | 仅 WebView |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert


基础库 [2.7.3](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2) 起支持,获取事件路径。返回值为数组,数组的元素为基础元素的 Descriptor 描述对象。使用插件时,宿主小程序内的事件路径会跳过属于插件的描述对象,插件内的事件路径也会跳过属于宿主小程序的描述对象。
基础库 2.7.3 起支持,获取事件路径。返回值为数组,数组的元素为基础元素的 Descriptor 描述对象。使用插件时,宿主小程序内的事件路径会跳过属于插件的描述对象,插件内的事件路径也会跳过属于宿主小程序的描述对象。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

链接


## 属性监听

基础库 [2.7.7](https://opendocs.alipay.com/mini/framework/lib-upgrade-v2) 起支持。若版本较低,建议采取 [兼容处理](https://opendocs.alipay.com/mini/framework/compatibility)
基础库 2.7.7 起支持。若版本较低,建议采取兼容处理
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

链接

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants