tmui-cli 2.0.3 → 2.0.5

package/data/uni-app-x-docs/i18n.md

@@ -0,0 +1,379 @@
+# 国际化
+uni-app x的国际化，即多语言，分2种情况：
+1. 固定一种外语：这种方式很简单，自己直接写就可以
+2. 动态切换语言：内置多种语言，根据条件动态切换。这种略微复杂，需要仔细读下文。
+
+首先需要分清楚，一个应用分为开发者的代码，和uni-app x框架代码2部分。它们都涉及国际化。
+
+- 开发者代码：即开发者自己的代码里涉及的界面部分
+- 框架部分：即uni-app x内置组件和API涉及界面的部分
+
+## 开发者代码的国际化
+
+这里的国际化指动态切换语言。如果是写死一种语言，直接在代码里写就好了。
+
+从 HBuilderX 5.25 起，uni-app x 项目的 `vue-i18n` 升级到了 `11.4.6` 版本。如希望使用其他版本，可在项目根目录自行安装指定版本。
+
+APP 蒸汽模式、鸿蒙和 iOS VDOM 模式、Web平台、小程序平台可以直接使用内置的 `vue-i18n` 官方库。Android VDOM 模式推荐使用 [lime-i18n](https://ext.dcloud.net.cn/plugin?id=18954) 解决动态语言切换。
+
+### 使用 vue-i18n@vue-i18n
+
+项目根目录创建 `locale` 目录，并按语言标签放置语言文件：
+
+```
+├── locale
+│   ├── en.json
+│   ├── zh-Hans.json
+│   └── zh-Hant.json
+├── i18n.uts
+└── main.uts
+```
+
+语言文件内容示例：
+
+```json
+{
+  "i18n.title": "国际化",
+  "i18n.description": "使用 vue-i18n 切换页面语言",
+  "i18n.currentLocale": "当前语言",
+  "i18n.greeting": "你好，uni-app x",
+  "i18n.named": "欢迎使用 {framework}",
+  "i18n.switchToZhHans": "简体中文",
+  "i18n.switchToZhHant": "繁体中文",
+  "i18n.switchToEn": "English"
+}
+```
+
+在 `i18n.uts` 中初始化 `vue-i18n`：
+
+```ts
+import { createI18n } from 'vue-i18n'
+import en from './locale/en.json'
+import zhHans from './locale/zh-Hans.json'
+import zhHant from './locale/zh-Hant.json'
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-Hans',
+  fallbackLocale: 'en',
+  messages: {
+    en,
+    'zh-Hans': zhHans,
+    'zh-Hant': zhHant
+  }
+})
+```
+
+在 `main.uts` 中挂载 `i18n`：
+
+```ts
+import App from './App.uvue'
+import { createSSRApp } from 'vue'
+import { i18n } from './i18n.uts'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(i18n)
+  return {
+    app
+  }
+}
+```
+
+页面中通过 `useI18n()` 获取 `t` 和 `locale`，模板中调用 `t()` 渲染对应语言的内容：
+
+```html
+<template>
+  <view class="page">
+    <text>{{ t('i18n.title') }}</text>
+    <text>{{ t('i18n.description') }}</text>
+    <text>{{ t('i18n.currentLocale') }}: {{ locale }}</text>
+    <text>{{ t('i18n.greeting') }}</text>
+    <text>{{ t('i18n.named', { framework: 'uni-app x' } as UTSJSONObject) }}</text>
+
+    <button @click="changeLocale('zh-Hans')">{{ t('i18n.switchToZhHans') }}</button>
+    <button @click="changeLocale('zh-Hant')">{{ t('i18n.switchToZhHant') }}</button>
+    <button @click="changeLocale('en')">{{ t('i18n.switchToEn') }}</button>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+
+const syncLocale = (newLocale : string) => {
+  locale.value = newLocale
+}
+
+const changeLocale = (newLocale : string) => {
+  syncLocale(newLocale)
+}
+</script>
+```
+
+## pages.json 国际化@pages
+
+> App平台 pages.json 不支持通过配置语言json文件实现国际化，暂时可通过tabbar和navigationbar的API来设置文字  
+
+Web平台还额外支持如下使用方式：
+
+项目根目录的locale目录下配置语言json文件，locale/[语言标签](#lantag).json，如：en.json，zh-Hans.json，zh-Hant.json
+
+```
+├── locale
+│   ├── en.json
+│   ├── zh-Hans.json
+│   └── zh-Hant.json
+```
+
+语言文件示例（zh-Hans.json）
+
+```json
+{
+  "app.name": "Hello uni-app",
+  "index.title": "首页"
+}
+```
+
+pages.json 示例
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "%index.title%" // locale目录下 语言标签.json 文件中定义的 key，使用 %% 占位
+      }
+    }
+  ],
+  "tabBar": {
+    "list": [{
+        "pagePath": "pages/index/index",
+        "text": "%index.home%"
+      }
+    ]
+  }
+}
+```
+
+pages.json 支持以下属性配置国际化信息
+
+- navigationBarTitleText
+- tabBar->list->text
+
+
+## 框架内置组件和API国际化
+
+uni-app x 的部分组件和API涉及界面，框架内置支持的国际化语言，如果手机os或浏览器语言在这些内置国际化语言列表中会自适应。如果不在5种内，会默认为英文。
+- app-Android平台
+	* 中文简体
+	* 中文繁体
+	* 英语
+	* 法语(HBuilderX 4.25及以上版本支持)
+	* 西班牙语(HBuilderX 4.25及以上版本支持)
+- app-iOS平台
+	* 中文简体
+   * 中文繁体(HBuilderX 4.25及以上版本支持)
+	* 英语(HBuilderX 4.25及以上版本支持)
+	* 法语(HBuilderX 4.25及以上版本支持)
+	* 西班牙语(HBuilderX 4.25及以上版本支持)
+- web平台
+	* 中文简体
+	* 中文繁体
+	* 英语
+	* 法语
+	* 西班牙语
+
+涉及界面的组件和API包括：
+- [uni.showModal](./api/toast.md#showtoast)：默认的确定和取消按钮文字，会根据os和浏览器的语言自适应。也可以在API中通过参数自己指定文字。
+- [uni.showActionSheet](./api/action-sheet.md#showactionsheet)：取消按钮文字，会根据os和浏览器的语言自适应。
+- [uni.chooseImage](./api/choose-image.md#chooseimage) 、[uni.chooseVideo](./api/choose-video.md#choosevideo)：
+	+ app平台弹出的`拍摄`和`从相册选择`的actionsheet方式的选择框文字不支持国际化，但可以设置`sourceType`参数值为单项，自己弹出选择框来处理。
+		* `拍摄` 打开的是系统相机界面，在app平台跟随系统语言，不受uni-app x内置国际化语言列表限制
+		* `从相册选择` 分系统相册和自定义相册。系统相册的国际化是根据手机OS的语言设置。自定义相册界面，在uni-app x内置国际化语言列表可配置。
+	+ 小程序这部分的国际化大多跟随小程序宿主的语言
+- [uni.chooseMedia](./api/choose-media.md)：  
+  + app平台弹出系统媒体选择界面，使用的是当前系统的语言。  
+
+
+## manifest.json 国际化@manifest  
+> HBuilderX5.0及以上版本 app-android/app-ios 平台云端打包和 app-harmony 平台本地打包支持设置国际化  
+
+manifest.json 文件的国际化与 pages.json 一样，在项目根目录的locale目录下配置语言json文件，locale/[语言标签](#lantag).json，如下：  
+
+```
+├── locale
+│   ├── en.json
+│   ├── zh-Hans.json
+│   └── zh-Hant.json
+```
+
+语言文件示例（zh-Hans.json）：  
+
+```json
+{
+  "app.name": "你好UniX"
+}
+```
+
+### 应用名称  
+在manifest.json可视化界面的“应用名称”中配置为 `%app.name%` 。  
+
+或在 源码视图 中配置如下：  
+```json
+{
+  "name": "%app.name%",
+  "app.ios.des.camera": "拍照功能需要使用摄像头"
+}
+```
+
+配置后需提交云端打包生效。  
+
+**注意**  
+app-android、app-ios平台离线打包需在原生工程中配置应用的国际化名称。  
+
+
+### app-ios平台隐私信息许可描述  
+iOS平台应用的隐私信息访问的许可描述中的提示文字，也可在manifest.json中配置国际化。  
+在可视化界面 “iOS App配置” 的 “隐私信息访问的许可描述” 对应的项中配置，如 “摄像头（NSCameraUsageDescription）” 项配置为 `%app.ios.des.camera%` 。  
+
+或在 源码视图 中配置 “摄像头（NSCameraUsageDescription）” 如下：  
+```json
+{
+  "app-ios": {
+    "distribute": {
+      "privacyDescription": {
+        "NSCameraUsageDescription": "%app.ios.des.camera%"
+      }
+    }
+  }
+}
+```
+
+配置后需提交云端打包生效。  
+
+**注意**  
+app-ios平台暂不支持配置Info.plist文件中其他信息的国际化配置，有此特殊需求离线打包可在原生XCode工程中配置。  
+
+
+## uniCloud国际化
+
+注：大陆以外的终端用户访问uniCloud，开通阿里云的海外加速后可以提高访问速度。[详见](https://doc.dcloud.net.cn/uniCloud/faq.html#global-accelerate)
+
+### DB Schema 国际化@schema
+
+uniCloud的 DB Schema 中涉及字段的显示名称、错误格式提示语，这些也需要国际化。
+
+在项目根目录 uniCloud/database/locale/{数据库表名}/[语言标签](#lantag).json 文件，然后在 `*.schema.json` 文件中使用 %% 占位
+
+```
+├─uniCloud
+│  ├─cloudfunctions
+│  └─database
+│      │  hello.schema.json
+│      └─locale
+│          └─hello
+│              en.json
+│              zh-Hans.json
+```
+
+hello.schema.json 文件内容
+
+```json
+// 文档教程: https://doc.dcloud.net.cn/uniCloud/schema
+{
+  "bsonType": "object",
+  "required": [],
+  "permission": {
+    "read": false,
+    "create": false,
+    "update": false,
+    "delete": false
+  },
+  "properties": {
+    "_id": {
+      "description": "ID"
+    },
+    "name": {
+      "bsonType": "string",
+      "label": "%name%",
+      "errorMessage": {
+        "format": "{label}%name.format%"
+      }
+    }
+  }
+}
+```
+
+en.json 文件内容
+
+```json
+{
+  "name": "Name",
+  "name.format": " invalid format"
+}
+```
+
+zh-Hans 文件内容
+
+```json
+{
+  "name": "姓名",
+  "name.format": "格式无效"
+}
+```
+
+
+## App第三方SDK界面的国际化
+
+Web平台 内置支持Google地图。
+
+其他如海外的支付、登录等app sdk，需自行开发插件或去插件市场搜索。
+
+
+## 语言API
+
+uni-app x可以通过如下API获取os、浏览器或应用的语言。
+
+- [uni.getSystemInfo](./api/get-system-info.md)
+- [uni.getDeviceInfo](./api/get-device-info.md)
+  * 获取OS语言：`uni.getDeviceInfo().osLanguage`
+- [uni.getAppBaseInfo](./api/get-app-base-info.md)
+  * 获取应用语言：`uni.getAppBaseInfo().appLanguage`
+  * 获取宿主语言：`uni.getAppBaseInfo().hostLanguage`
+
+### Web平台还支持以下更多功能
+
+Web平台注意要区分系统语言和应用语言的概念。
+
+- [uni.setLocale](https://uniapp.dcloud.io/api/ui/locale.html#setlocale)
+
+设置应用语言
+
+- [uni.onLocaleChange](https://uniapp.dcloud.io/api/ui/locale.html#onlocalechange)
+
+当前应用语言发生变化时，触发回调。也就是`uni.setLocale`执行时。
+
+
+## 语言标签 @lantag  
+
+语言标签由一个或多个子标签（subtags）组成，用连字号(-)分隔，子标签只能由基本拉丁字母或数字组成。处理逻辑遵循 BCP 47 规范。  
+
+语言标签通常为两个或三个字母，参考[ISO 639](https://zh.wikipedia.org/wiki/ISO_639-1%E4%BB%A3%E7%A0%81%E8%A1%A8)规范
+
+语言代码-地区代码，地区代码为两个字母，参考[ISO 3166-2](https://zh.wikipedia.org/wiki/ISO_3166-2)规范
+
+
+常见语言标签示例：  
+| 标签        | 含义            | 使用场景                |
+| -           | -               | -                      |
+| zh          | 中文（泛指）    | 通用中文内容            |
+| zh-Hans     | 简体中文        | 简体文本（不指定地区）   |
+| zh-Hans-SG  | 中文，简体，新加坡 | 新加坡简体中文        |
+| zh-Hant     | 繁体中文        | 繁体文本（不指定地区）   |
+| zh-Hant-HK  | 中文，繁体，香港 | 香港繁体中文            |
+| zh-Hant-TW  | 中文，繁体，台湾 | 台湾繁体中文            |
+| en          | 英文             | -                      |
+| en-US       | 英文，美国       | -                      |

package/data/uni-app-x-docs/mp/README.md

@@ -0,0 +1,155 @@
+# 编译到小程序端
+
+> 新增于 HBuilderX 4.41+
+
+uni-app x 项目在编译到小程序平台时，将部分特性对齐了web与app端，因此和非uni-app x项目编译到小程序端略有差异。
+
+与uni-app相比，uni-app x编译到微信小程序有2个显著差别：
+1. uni-app x 支持 Element API
+在微信小程序上开发高性能应用，离不开wxs。但wxs难用且不跨平台。\
+虽然微信小程序自身不支持Element操作，但uni-app x提供了跨平台的Element API，并且把这些API映射到了微信小程序的wxs上。\
+这样即实现了跨平台一致性，又解决了微信下wxs使用麻烦的问题。
+2. 布局全面使用flex
+小程序的webview渲染支持flex布局，但默认是block布局。\
+uni-app x中全平台统一使用flex布局。
+
+## 基础库范围
+截止到HBuilderX 4.41发版时微信的主流基础库版本是3.7.1。
+uni-app x主要是在这个版本库上适配。
+已知过老的基础库版本上，scroll-view区域大小会不准确。请开发者检查并确保基础库版本大于3.7.1。
+
+## vue
+
+### 自定义组件启用virtualHost带来的影响@virtualHost
+
+标准的小程序下的自定义组件会多套一层DOM，这影响性能且更会影响flex等样式传递。而uni-app x默认都是flex的。
+
+所以为了拉齐样式表现，uni-app x 项目在编译到小程序时，默认启用了virtualHost，该配置是小程序平台提供的一种策略，可以取消多套的一层。\n
+同时默认启用了[mergeVirtualHostAttributes特性](https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin)，在取消多套的一层后，将原本父层的属性设置，合并到子层。
+
+`去掉一层`以及`合并父属性到子`，这2件事会对真实渲染的DOM产生影响。*尤其会影响在组件外获取组件的DOM*。
+
+我们先看一个例子：
+
+有个组件c1，父级外层代码如下
+```html
+<c1 id="c1parent" ref="c1ref" class="class1parent"></c1>
+```
+
+c1组件的代码如下：
+```html
+<template>
+    <view class="classchild">
+    </view>
+</template>
+```
+
+然后看下mergeVirtualHostAttributes属性合并策略（HBuilderX 4.42+）：
+1. 仅将组件外层设置的 id、style、class 以及 v-show 指令生成的 hidden 属性，这4个属性合并到 vue 组件编译成的小程序组件根节点上，其他外层设置的属性都丢弃了。
+2. 仅对组件是单个根节点才会合并，组件内多个根节点的时候不会合并。父层全部丢弃。
+
+根据策略看，上述代码在运行时合并后，父层的id、class属性合并到组件根节点上，所以`class1parent` 和 `classchild` 同时生效。
+
+父层通过`uni.createSelectorQuery().in(this.$page).select('#c1parent')`拿不到NodesRef。
+
+但createSelectorQuery是支持设定查找范围的，上面的代码是在页面里查找，如果在父层代码里通过in方法指定查找组件，例如：`uni.createSelectorQuery().in(this.$refs['c1ref'] as ComponentPublicInstance).select('#c1parent') `，可以拿到c1组件的NodesRef
+
+父层通过`uni.getElementById("c1parent")`也可以拿到UniElement。
+
+实际上，不管是通过`.class1parent` 还是 `.classchild`，都可以拿到。因为样式合并后，这2个class在运行时同时存在。
+
+vue组件的方法调用不受影响，ref取到组件后，可以直接调用组件的方法。
+
+### refs@refs
+
+非 uni-app x 项目使用refs取内置组件引用时会获取到undefined，而 uni-app x 项目会获取到对应的UniElement。
+
+## dom
+
+### UniElement
+
+小程序端逻辑层与视图层分离，导致大多数同步的dom api都不可用。
+
+UniElement在小程序端仅支持如下属性/方法：
+
+- id 元素的id属性
+- nodeName 元素的节点名
+- tagName 元素的标签名
+- style 元素的style对象，可以通过style对象调用style.setProperty方法
+- getBoundingClientRectAsync 异步获取元素的布局位置信息
+- getAttribute 获取元素的属性值，目前仅支持id、style
+
+**注意**
+
+- 小程序端只有UniElement，不支持UniButtonElement、UniViewElement等类
+- 小程序端在各种事件在target、currentTarget指向未配置id的组件时，event.target、event.currentTarget会返回一个功能缺失的UniElement，仅能访问dataset、offsetTop、offsetLeft属性。
+- 小程序端在各种事件在target、currentTarget指向配置了id的组件时，event.target、event.currentTarget会返回一个功能和getElementById一致的UniElement，除了能访问getElementById返回的UniElement的各种属性方法之外，还能访问dataset、offsetTop、offsetLeft属性。
+
+### 事件
+
+click、tap事件上补充了如下属性，使其表现更像PointerEvent：
+
+```
+event.x
+event.y
+event.clientX
+event.clientY
+event.pageX
+event.pageY
+event.screenX
+event.screenY
+```
+
+## css
+
+### 样式重置
+
+App平台的ucss和webview的标准css略有差异。为保证多端统一，uni-app-x编译到小程序端时，会进行浏览器样式重置，内置组件根元素带有一些默认样式，详情参考：[uvue css使用](../css/README.md)。
+
+如果你不开发App，且不需要样式重置，想使用原始的小程序样式，那么可以在pages.json的globalStyle或对应的页面style内配置`enableUcssReset`为false来关闭ucss样式重置。参考：[page.json文档](../collocation/pagesjson.md)
+
+## skyline
+
+对skyline的支持处于实验阶段。
+
+目前编译器会根据页面是否为skyline来决定是否注入ucss样式覆盖，仅webview渲染的页面才会进行ucss样式覆盖。
+
+worklet函数暂不支持写在uvue、uts文件内，推荐从js文件内引用。
+
+## 其他差异
+
+### 文件命名
+页面或组件目录下，不能使用与 `uvue` 同名的 `uts` 文件。\
+小程序端 `uvue` 文件会被编译为同名的 `js、json、wxml、wxss` 文件，如果存在同名 `uts` 文件，会导致冲突。
+
+### 实体字符
+
+uni-app x项目在编译到小程序端时，如果页面内静态的使用了实体字符`&gt;、&lt;、&thinsp;、&nbsp;、&ensp;、&emsp;`则会在最终输出的小程序页面文件中保留这些实体字符，例如`&nbsp;`在微信小程序的wxml文件中仍为`&nbsp;`不会被转为空格， 而非uni-app-x项目`&nbsp;`会转为空格。
+
+### radio、checkbox组件使用justify-content等属性对齐插槽内容与选择框时与app、web表现不一致
+
+> 此表现后续可能会调整，请勿依赖此特性进行布局
+
+由于小程序端radio、checkbox组件内部有一层额外节点，如下属性设置在根节点上不能按预期方式布局插槽内容与选择框
+
+```
+flex-direction
+align-content
+justify-content
+align-items
+```
+
+### 支付宝小程序注意事项@mp-alipay
+
+编译到支付宝小程序时需注意以下平台差异：
+
+- `scroll-view` 不支持通过 `slot="refresher"` 自定义下拉刷新内容，相关内容需通过条件编译排除支付宝小程序。
+- `radio`、`checkbox` 不支持将文本或 `text` 组件放在组件内部。选项文本应与 `radio`、`checkbox` 作为同级节点放置，通常可使用 `label` 包裹同级的选项组件和文本。
+- 同一页面存在多个 `page-container` 时，第二个及后续打开的 `page-container` 可能无法弹出，建议同一页面只保留一个 `page-container`。
+- `native-view` 暂不支持支付宝小程序，使用时需通过条件编译排除支付宝小程序。
+- `picker` 不支持 `mode` 属性，如需多平台兼容，需要为支付宝小程序单独处理选择能力。
+- `picker-view` 动态设置指示器样式时可能出现偏移，建议使用静态配置，避免运行时修改指示器样式。
+
+## 开发和调试
+
+在HBuilderX底部状态栏选择语法平台，确保有微信小程序平台，否则代码提示不会有微信专有API。如果选择其他平台，但代码里在非MP-WEIXIN的条件编译里写了微信专有代码，ide会告警。

package/data/uni-app-x-docs/mp/native-component-and-wxs.md

@@ -0,0 +1,166 @@
+# 小程序自定义组件支持
+
+`uni-app x` 除了支持 uvue 组件之外，也实现了对原生小程序自定义组件的兼容。小程序组件不是 uvue 组件，每家小程序都有自己的组件规范，比如微信小程序的组件是 wxml、wxss ，支付宝小程序是 axml、acss。下面介绍如何在 `uni-app x` 中使用原生小程序自定义组件。
+
+## 创建自定义小程序目录
+
+原生小程序自定义组件需要放在 `uni-app x` 项目 `根路径` 的特定名称目录中，项目结构类似于
+
+<pre v-pre="" data-lang="">
+	<code class="lang-" style="padding:0">
+┌─wxcomponents                  微信小程序自定义组件存放目录
+│   └──custom                   微信小程序自定义组件
+│		├─index.js
+│		├─index.wxml
+│		├─index.json
+│		└─index.wxss
+├─mycomponents                  支付宝小程序自定义组件存放目录
+│   └──custom                   支付宝小程序自定义组件
+│		├─index.js
+│		├─index.axml
+│		├─index.json
+│		└─index.acss
+├─pages
+│  └─index
+│		└─index.vue
+│
+├─static
+├─main.ts
+├─App.uvue
+├─manifest.json
+└─pages.json
+	</code>
+</pre>
+
+目录名可以参考下方表格
+
+| 平台         | 目录名       |
+| ------------ | ------------ |
+| 微信小程序   | wxcomponents |
+| 支付宝小程序 | mycomponents |
+
+此文档要求开发者对各端小程序的**自定义组件**有一定了解，没接触过小程序**自定义组件**的可以参考：
+
+- [微信小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
+- [支付宝小程序自定义组件](https://docs.alipay.com/mini/framework/custom-component-overview)
+
+## 使用组件
+
+在需要使用自定义小程序组件的页面中，添加 `usingComponents` 配置。例如，在微信小程序中：
+
+```json
+// pages.json
+{
+  "pages": [
+    {
+      "path": "index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "usingComponents": {
+          "custom": "/wxcomponents/custom/index"
+        }
+      }
+    }
+  ]
+}
+```
+
+页面使用自定义小程序组件
+
+```html
+<template>
+  <view>
+    <custom :title="title" @change="handleChange"></custom>
+  </view>
+</template>
+<script setup lang="ts">
+  const title = ref("自定义组件标题");
+
+  function handleChange() {
+    // 处理自定义组件的变化事件
+  }
+</script>
+```
+
+# WXS
+
+WXS 是一套运行在视图层的脚本语言，它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时，可采用 WXS。
+
+与 WXS 类似，支付宝小程序提供了 SJS，`uni-app x` 也支持使用这些功能，并将它们编译到支付宝小程序端。
+
+**平台差异说明**
+
+| 微信小程序 | 支付宝小程序 |
+| :--------: | :----------: |
+|    wxs     |     sjs      |
+
+下面介绍如何在 `uni-app x` 中使用 WXS/SJS。
+
+## 创建 WXS/SJS 文件
+
+在微信小程序中，可以通过创建 `.wxs` 文件来定义 WXS 模块。例如，创建 `utils.wxs`：
+
+```javascript
+// utils.wxs
+module.exports = {
+  log: function () {
+    console.log("log");
+  },
+};
+```
+
+在支付宝小程序中，可以通过创建 `.sjs` 文件来定义 SJS 模块。例如，创建 `utils.sjs`：
+
+```javascript
+// utils.sjs
+function log() {
+  console.log("log");
+}
+
+export default {
+  log,
+};
+```
+
+## 页面使用 WXS/SJS
+
+```html
+<template>
+  <view>
+    <image class="logo" src="/static/logo.png"></image>
+    <text class="title">{{title}}</text>
+    <button @click="utils.log">打印日志</button>
+  </view>
+</template>
+<!-- #ifdef MP-ALIPAY -->
+<script src="./utils.sjs" module="utils" lang="sjs"></script>
+<!-- #endif -->
+<!-- #ifdef MP-WEIXIN -->
+<script src="./utils.wxs" module="utils" lang="wxs"></script>
+<!-- #endif -->
+<script setup lang="uts">
+  const title = ref('标题')
+</script>
+
+<style>
+  .logo {
+    height: 100px;
+    width: 100px;
+    margin: 100px auto 25px auto;
+  }
+
+  .title {
+    font-size: 18px;
+    color: #8f8f94;
+    text-align: center;
+  }
+</style>
+```
+
+## 注意事项
+
+- **【重要】** 编写 wxs、sjs 内容时必须遵循相应语法规范
+- **【重要】** `module` 所指定的模块名不可与声明的变量或者函数内的属性重名
+- 微信小程序请使用 wxs 规范，[WXS 语法参考文档](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/)
+- 支付宝小程序请使用 sjs 规范，[SJS 语法参考文档](https://docs.alipay.com/mini/framework/sjs)
+- 支付宝小程序 sjs 只能定义在 .sjs 文件中，然后使用 `<script>` 标签引入，不支持在 uvue 文件中直接编写