[WIP] feat: 修改 app json 应用配置

mini/framework/ACSS 语法参考.md

@@ -1,22 +1,24 @@
-ACSS 是一套样式语言，用于描述 AXML 的组件样式，决定 AXML 的组件的显示效果。
+ACSS 是一种样式语言，用于定义 AXML 组件的样式，从而决定组件的显示效果。
 
-为适应广大前端开发者，ACSS 和 CSS 规则完全一致，100% 可以用。同时为更适合开发小程序，对 CSS 进行了扩充，ACSS 支持 px，rpx，vh，vw 等单位。
+ACSS 与传统的 CSS 规则完全兼容，前端开发者可以无缝使用。为了更好地适应小程序开发，ACSS 还扩展了 CSS，支持 `px`、`rpx`、`vh`、`vw` 等单位。
 
-ACSS 已经帮开发者做了不同手机端的样式兼容性处理。
+ACSS 也处理了不同手机端的样式兼容性问题，简化了开发者的工作。
 
 # rpx
 
-rpx（responsive pixel）可以根据屏幕宽度进行自适应，规定屏幕宽为 750rpx。以 Apple iPhone6 为例，屏幕宽度为 375px，共有 750 个物理像素，则 750 rpx = 375 px = 750 物理像素，1rpx = 0.5 px = 1 物理像素。
+`rpx`（responsive pixel）是一种尺寸单位，它能根据屏幕宽度自动进行适配。在小程序中，规定屏幕宽为 750 rpx。以 iPhone6 为例，其屏幕宽度为 375 px，拥有 750 个物理像素，因此 1 rpx 等于 0.5 px，相当于 1 物理像素。
 
-| **设备** | **rpx 换算 px（屏幕宽度 / 750）** | **px 换算 rpx（750 / 屏幕宽度）** |
-| --- | --- | --- |
-| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
-| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
-| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
+下表展示了不同设备下的 rpx 与 px 的换算关系：
+
+| 设备         | rpx 换算 px（屏幕宽度 / 750） | px 换算 rpx（750 / 屏幕宽度） |
+| ------------ | --------------------------- | --------------------------- |
+| iPhone5      | 1 rpx = 0.42 px               | 1 px = 2.34 rpx               |
+| iPhone6      | 1 rpx = 0.5 px                | 1 px = 2 rpx                  |
+| iPhone6 Plus | 1 rpx = 0.552 px              | 1 px = 1.81 rpx               |
 
 # 样式导入
 
-使用 `@import` 语句可以导入外联样式表，`@import` 后需要加上外联样式表相对路径，用`;` 表示结束。
+通过使用 `@import` 语句，可以在 ACSS 文件中导入外部样式表。在 `@import` 语句后面，需要指定外联样式表的相对路径，并以分号 `;` 结束该声明。
 
 **示例代码**：
 
@@ -35,80 +37,84 @@ rpx（responsive pixel）可以根据屏幕宽度进行自适应，规定屏幕
 }
 ```
 
-导入路径支持从 node_modules 目录载入第三方模块，例如 page.acss。
+ACSS 支持从 `node_modules` 目录导入第三方模块的样式文件，例如在 `page.acss` 中导入。
 
 ```css
-@import './button.acss'; /*相对路径*/
-@import '/button.acss'; /*项目绝对路径*/
-@import 'third-party/page.acss'; /*第三方 npm 包路径*/
+@import './button.acss'; /* 相对路径 */
+@import '/button.acss'; /* 项目绝对路径 */
+@import 'third-party/page.acss'; /* 第三方 npm 包路径 */
 ```
-
 # 内联样式
 
-组件上支持使用 `style`、`class` 属性来控制样式。
+在 ACSS 中，可以使用 `style` 和 `class` 属性来控制组件的样式。
 
 ## style 属性
 
-用于接收动态样式，样式在运行时会进行解析。行内样式不支持 `!important` 优先级规则。
+`style` 属性用于设置动态样式，这些样式将在运行时被解析。注意，行内样式不支持使用 `!important` 来提升优先级。
+
+**示例代码**：
 
 ```html
-<view style="color:{{color}};" />
+<view style="color: {{color}};"></view>
 ```
 
 ## class 属性
 
-用于接收静态样式，属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上`.`，多个类名间以空格分隔。请静态样式写进 class 中，避免将静态样式写进 style 中，以免影响渲染速度。
+`class` 属性用于应用静态样式，其值是一个或多个样式类名的集合。类名不需要包含点号 `.` 前缀，并且多个类名之间应以空格分隔。建议将静态样式放在 `class` 中，以避免将静态样式写入 `style` 属性，这样可以提高渲染效率。
+
+**示例代码**：
 
 ```html
-<view class="my-awesome-view" />
+<view class="my-awesome-view"></view>
 ```
-
 # 选择器
 
-同 CSS3 保持一致。
+ACSS 选择器的使用方式与 CSS3 保持一致，提供了丰富的选择器用于定位和样式化页面中的元素。
 
 **注意**：
 
-- `.a-`，`.am-` 开头的类选择器为系统组件占用，不可使用。
-- 不支持属性选择器。
+- 类选择器以 `.a-` 或 `.am-` 开头的是系统组件保留的，开发者应避免使用这些前缀以免发生冲突。
+- ACSS 不支持属性选择器。
 
 # 全局样式与局部样式
 
-- app.acss 中的样式为全局样式，作用于每一个页面。
-- 页面文件夹内的 .acss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.acss 中相同的选择器。
+- 在 `app.acss` 文件中定义的样式是全局样式，这些样式将影响小程序中的所有页面。
+- 在页面文件夹内的 `.acss` 文件中定义的样式是局部样式，只影响对应的页面，并且可以覆盖 `app.acss` 中的同名选择器。
 
 # 本地资源引用
 
-ACSS 文件里的本地资源引用请使用绝对路径的方式，不支持相对路径引用，例如下方示例。
+在 ACSS 文件中引用本地资源时，应使用绝对路径。相对路径的引用方式不被支持。
+
+**示例代码**：
 
 ```css
-/* 支持 */
+/* 正确的引用方式 */
 background-image: url('/images/ant.png');
-/* 不支持 */
+
+/* 错误的引用方式 */
 background-image: url('./images/ant.png');
 ```
-
 # 常见问题
 
-## Q：一个 axml 引用多个自定义组件或 template 模板、include 等，造成样式之间相互影响、样式污染怎么办？
+## 一个 axml 引用多个自定义组件或 template 模板、include 等，造成样式之间相互影响、样式污染怎么办？
 
-A：对于基础库小于 2.7.2 的小程序，可使用 class 命名空间处理样式隔离。从基础库版本 2.7.2 开始，可以在自定义组件的 JSON 文件中配置 styleIsolation，避免页面的样式影响到外部。例如：
+对于基础库版本小于 2.7.2 的小程序，建议使用类命名空间来处理样式隔离，避免样式冲突。从基础库版本 2.7.2 开始，自定义组件的 JSON 文件中可以配置 `styleIsolation` 选项，这有助于防止页面样式相互影响。
 
 ```json
 {
   "styleIsolation": "apply-shared"
 }
 ```
 
-该选项支持以下取值：
+`styleIsolation` 支持的选项包括：
 
-- apply-shared 表示 app.acss 样式以及其他（设置了 shared 的页面和其他自定义组件）的样式将影响到自定义组件，但自定义组件 ACSS 中指定的样式不会影响外部。
-- shared（默认）表示 app.acss 样式以及其他（设置了 shared 的页面和其他自定义组件）的样式将影响到页面，自定义组件 ACSS 中指定的样式也会影响到外部。
+- `apply-shared`：表示自定义组件将受到 app.acss 样式以及其他设置了 shared 的页面和自定义组件的样式影响，但自定义组件内部的样式不会影响外部。
+- `shared`（默认值）：表示自定义组件的样式既会受到 app.acss 的影响，也可能会影响外部的样式。
 
-## Q：设置页面高度 100% 为什么没用？
+## 设置页面高度 100% 没有效果怎么办？
 
-A：设置 100%，需要依赖父容器的高度，父容器没有高度那么 100% 就是 0。或者添加绝对定位也可解决，如不添加，会自适应页面的内容。
+如果设置元素高度为 100% 没有效果，可能是因为其父容器没有设置高度，导致 100% 实际上等于 0。解决方法是确保父容器有明确的高度，或者给元素设置绝对定位。
 
 # 相关文档
 
-[小程序全局配置介绍](https://opendocs.alipay.com/mini/framework/app)
+更多关于小程序开发的详细信息，请参考[小程序全局配置介绍](https://opendocs.alipay.com/mini/framework/app)。

mini/framework/SJS 语法参考/SJS 介绍.md

@@ -1,29 +1,39 @@
-SJS（Safe/Subset JavaScript）是小程序定义的一套脚本语言，由它导出的变量/函数可以 [在 `AXML` 中使用](https://opendocs.alipay.com/mini/framework/import-sjs)。
+SJS (Safe/Subset JavaScript) 是专为小程序设计的脚本语言。作为 JavaScript 的子集，它支持 JavaScript 的部分功能，但不是全部。它的主要特点是变量和函数可以直接在小程序的 AXML 中使用，提高了开发效率和安全性。
 
-## 语言概述
+## 详细特性
+
+### 语法规则与特性
+
+SJS 遵从 JavaScript 的基本语法，但作为子集，并非支持 JavaScript 的所有特性。详细信息可参考以下链接：
 
-**语法定义**  
-SJS 是 JavaScript 语言的子集，并不等同于 JavaScript。具体可参考：  
 - [变量](https://opendocs.alipay.com/mini/framework/sjs-variable)
 - [数据类型](https://opendocs.alipay.com/mini/framework/datatype)
 - [运算符](https://opendocs.alipay.com/mini/framework/operator)
 - [语句](https://opendocs.alipay.com/mini/framework/sjs-statement)
 - [基础类库](https://opendocs.alipay.com/mini/framework/basic-library)
 
-**模块管理**  
-- SJS 文件的扩展名必须为 `.sjs`，每个 .sjs 文件为一个模块，使用 export 导出变量和函数，使用 import 引入依赖的其他 SJS 模块。
-- SJS 也可引用 npm 包，但只能引用其中的 .sjs 文件。
+### 模块化特性
+
+- **文件格式**：`.sjs` 文件，每个文件是一个模块。
+- **导入导出**：使用 `export` 导出变量和函数，通过 `import` 引入其他 SJS 模块。
+- **对 npm 支持**：SJS 支持引用 npm 包中的 `.sjs` 文件。
+
+### 运行环境
 
-**运行环境**  
-- SJS 运行在小程序渲染层，与小程序的 JavaScript 运行环境（逻辑层）隔离，因而不能调用 JS 文件中定义的函数，也不能调用小程序提供的 API。
-- SJS 中定义的函数可用于响应基础组件的事件以避免逻辑层和渲染层的频繁通信，但有一定的限制，详见 [SJS 响应事件](https://opendocs.alipay.com/mini/01og7z)。
+SJS 在小程序的渲染层中运行，与逻辑层的 JavaScript 环境隔离。具体来说：
 
+- SJS 不能调用 JS 文件中定义的函数或小程序提供的 API。
+- SJS 可用于处理基础组件的事件响应，减少逻辑层和渲染层间的通信。
+- 使用 SJS 有一定限制，详见：[SJS 响应事件](https://opendocs.alipay.com/mini/01og7z)。
 
 ## 使用示例
 
+以下是 SJS 的基本使用示例，展示了如何定义和使用 SJS 脚本。
+
+### 定义 SJS 模块
+
 ```javascript
 // pages/index/foo.sjs
-
 const message = 'hello sjs';
 const format = num => num.toFixed(2);
 const five = 5;
@@ -34,17 +44,19 @@ export default {
 };
 ```
 
+### 引入和使用其他 SJS 模块
+
 ```javascript
 // pages/index/bar.sjs
-
 import { five } from './foo.sjs';
 export const x = 3;
 export const y = 4 + five;
 ```
 
+### 小程序页面的 JavaScript 部分
+
 ```javascript
 // pages/index/index.js
-
 Page({
   data: {
     message: 'hello javascript',
@@ -53,21 +65,21 @@ Page({
 });
 ```
 
+### 小程序页面的 AXML 部分
+
 ```html
 <!-- pages/index/index.axml -->
-
 <import-sjs from="./foo.sjs" name="m" />
 <import-sjs from="./bar.sjs" name="{x, y: z}" />
-
 <view>js message: {{message}}</view>
 <view>sjs message: {{m.message}}</view>
 <view>formatted value: {{m.format(value)}}</view>
-
 <view>x: {{x}}</view>
 <view>z: {{z}}</view>
 ```
 
-**页面渲染结果：**  
+### 页面渲染结果
+
 ```text
 js message: hello javascript
 sjs message: hello sjs