jsui-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

JSUI Agent Developer Guide

JSUI Agent 开发者指南

This guide provides independent and comprehensive context for AI agents developing JSUI applications. It includes project structure, SFC

.ink

support specifications, and standard API references, designed to help Large Language Models (LLMs) generate accurate JSUI pages and logic code.

本指南为开发JSUI应用的AI Agent提供独立且全面的参考内容，包括项目结构、SFC

.ink

支持规范以及标准API参考，旨在帮助大语言模型（LLMs）生成准确的JSUI页面和逻辑代码。

1. Project Structure

1. 项目结构

A standard JSUI application project typically contains the following core files:

```
AGENTS.md
```
: The agent manifest, defining the agent's identity and capabilities.
```
app.json
```
: Global configuration, including page routes, window settings, etc.
```
app.js
```
: Application lifecycle and global logic.
```
pages/
```
: Page directory containing the application's pages, primarily using the Single File Component (SFC)
```
.ink
```
format.
```
assets/
```
: Directory for storing static resources like images and audio.

标准JSUI应用项目通常包含以下核心文件：

```
AGENTS.md
```
：Agent清单文件，定义Agent的身份和能力。
```
app.json
```
：全局配置文件，包含页面路由、窗口设置等。
```
app.js
```
：应用生命周期与全局逻辑文件。
```
pages/
```
：页面目录，存放应用的所有页面，主要使用单文件组件（SFC）
```
.ink
```
格式。
```
assets/
```
：静态资源目录，用于存储图片、音频等资源。

1.1 Agent Manifest (AGENTS.md)

1.1 Agent清单（AGENTS.md）

The manifest file defines the agent's basic information and required permissions/skills:

markdown

undefined

清单文件定义Agent的基本信息及所需权限/技能：

markdown

undefined

Agent Manifest

Identity

Name: My JSUI Agent
Version: 1.0.0
Description: A brief application description.
Author: Developer Name

Name: My JSUI Agent
Version: 1.0.0
Description: A brief application description.
Author: Developer Name

Capabilities

Permissions:
- camera
- microphone
- network
- audio
Skills:
- weather-lookup

undefined

Permissions:
- camera
- microphone
- network
- audio
Skills:
- weather-lookup

undefined

1.2 Global Configuration (app.json)

1.2 全局配置（app.json）

Defines application page paths and global UI styles:

json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "My JSUI Agent",
    "viewport": {
      "width": "device-width"
    }
  }
}

定义应用的页面路径和全局UI样式：

json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "My JSUI Agent",
    "viewport": {
      "width": "device-width"
    }
  }
}

1.3 Application Registration (app.js)

1.3 应用注册（app.js）

JSUI uses an ES module-based registration system, registering the application by exporting a default configuration object:

javascript

export default {
  onLaunch() {
    console.log('App Launch');
  },
  globalData: {
    userInfo: null
  }
};

JSUI采用基于ES模块的注册系统，通过导出默认配置对象完成应用注册：

javascript

export default {
  onLaunch() {
    console.log('App Launch');
  },
  globalData: {
    userInfo: null
  }
};

1.4 Page Configuration (page.json)

1.4 页面配置（page.json）

In JSUI, each page acts as a Model Context Protocol (MCP) UI component. The configuration for each page is defined in its respective

page.json

(or within the

<script def>

block of an

.ink

file). This configuration declares the page's capabilities and the expected input parameters for rendering.

Key fields in page configuration:

```
description
```
: A clear, natural language description of what the page UI represents or what task it accomplishes. This helps the AI or system understand the page's purpose.
```
schema
```
: Defines the expected input data structure for rendering the UI.
- ```
data
```
  : A JSON Schema object specifying the properties, types, and required fields needed to populate the page's initial state.

Example Page Configuration:

json

{
  "navigationBarTitleText": "Weather Card",
  "description": "A UI component that displays the current weather conditions for a specific city.",
  "schema": {
    "data": {
      "type": "object",
      "properties": {
        "city": {
          "type": "string",
          "description": "The name of the city"
        },
        "temperature": {
          "type": "number",
          "description": "Current temperature in Celsius"
        },
        "condition": {
          "type": "string",
          "enum": ["sunny", "rainy", "cloudy", "snowy"]
        }
      },
      "required": ["city", "temperature", "condition"]
    }
  }
}

在JSUI中，每个页面作为模型上下文协议（MCP）UI组件存在。每个页面的配置定义在对应的

page.json

（或

.ink

文件的

<script def>

块内），该配置声明页面的能力以及渲染所需的输入参数。

页面配置的关键字段：

```
description
```
：清晰描述页面UI的用途或完成的任务，帮助AI或系统理解页面目的。
```
schema
```
：定义渲染UI所需的输入数据结构。
- ```
data
```
  ：JSON Schema对象，指定填充页面初始状态所需的属性、类型和必填字段。

页面配置示例：

json

{
  "navigationBarTitleText": "Weather Card",
  "description": "A UI component that displays the current weather conditions for a specific city.",
  "schema": {
    "data": {
      "type": "object",
      "properties": {
        "city": {
          "type": "string",
          "description": "The name of the city"
        },
        "temperature": {
          "type": "number",
          "description": "Current temperature in Celsius"
        },
        "condition": {
          "type": "string",
          "enum": ["sunny", "rainy", "cloudy", "snowy"]
        }
      },
      "required": ["city", "temperature", "condition"]
    }
  }
}

2. Single File Component (SFC)

.ink

Specification

2. 单文件组件（SFC）

.ink

规范

In JSUI, page development is recommended to use the Single File Component (SFC) format, which is the

.ink

file. This format centralizes the page's configuration, logic, structure, and style in a single file.

A standard

.ink

file structure contains four main tag blocks:

```
<script def>
```
: Used to define page-level JSON configuration, such as the navigation bar title.
```
<script setup>
```
: Contains the page's JavaScript logic code, exporting the page configuration object (including
```
data
```
, lifecycle hooks, custom methods, etc.) via
```
export default
```
.
```
<page>
```
: The page's template structure (WXML-like syntax).
```
<style>
```
: The page's stylesheet (CSS).

在JSUI中，页面开发推荐使用单文件组件（SFC）格式，即

.ink

文件。该格式将页面的配置、逻辑、结构和样式集中在单个文件中。

标准

.ink

文件结构包含四个主要标签块：

```
<script def>
```
：用于定义页面级JSON配置，如导航栏标题。
```
<script setup>
```
：包含页面的JavaScript逻辑代码，通过
```
export default
```
导出页面配置对象（包括
```
data
```
、生命周期钩子、自定义方法等）。
```
<page>
```
：页面的模板结构（类WXML语法）。
```
<style>
```
：页面的样式表（CSS）。

2.1

.ink

Example Code:

2.1

.ink

示例代码：

html

<script def>
{
  "navigationBarTitleText": "Home"
}
</script>

<script setup>
import wx from 'wx';

export default {
  data: {
    greeting: 'Hello JSUI!'
  },
  onLoad() {
    console.log('Page loaded');
  },
  handleTap() {
    this.setData({
      greeting: 'Hello, World!'
    });
  }
}
</script>

<page>
  <view class="container">
    <text class="title">{{ greeting }}</text>
    <button bindtap="handleTap">Click Me</button>
  </view>
</page>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>

html

<script def>
{
  "navigationBarTitleText": "Home"
}
</script>

<script setup>
import wx from 'wx';

export default {
  data: {
    greeting: 'Hello JSUI!'
  },
  onLoad() {
    console.log('Page loaded');
  },
  handleTap() {
    this.setData({
      greeting: 'Hello, World!'
    });
  }
}
</script>

<page>
  <view class="container">
    <text class="title">{{ greeting }}</text>
    <button bindtap="handleTap">Click Me</button>
  </view>
</page>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>

3. WXML (WeiXin Markup Language) & Components

3. WXML（WeiXin Markup Language）与组件

In JSUI, the structure of a page is described using WXML (WeiXin Markup Language), which is used within the

<page>

tag of an

.ink

file (or a standalone

.wxml

file). It allows you to build user interfaces using components, data binding, and conditional rendering.

在JSUI中，页面结构使用WXML（微信标记语言）描述，该语言用于

.ink

文件的

<page>

标签内（或独立的

.wxml

文件）。它允许通过组件、数据绑定和条件渲染构建用户界面。

3.1 Basic Syntax and Data Binding

3.1 基础语法与数据绑定

WXML uses double curly braces

{{ }}

for data binding. You can bind properties from your page's

data

object directly to the UI.

html

<!-- Text binding -->
<view>{{ message }}</view>

<!-- Attribute binding -->
<view class="{{ dynamicClass }}"></view>

<!-- Expression binding -->
<view>{{ count + 1 }}</view>

WXML使用双大括号

{{ }}

进行数据绑定，可将页面

data

对象中的属性直接绑定到UI上。

html

<!-- 文本绑定 -->
<view>{{ message }}</view>

<!-- 属性绑定 -->
<view class="{{ dynamicClass }}"></view>

<!-- 表达式绑定 -->
<view>{{ count + 1 }}</view>

3.2 Directives (Conditional Rendering)

3.2 指令（条件渲染）

JSUI supports conditional rendering using the

ink:if

ink:elif

, and

ink:else

directives to control whether a component is rendered based on a condition.

html

<view ink:if="{{condition === 1}}"> Rendered if condition is 1 </view>
<view ink:elif="{{condition === 2}}"> Rendered if condition is 2 </view>
<view ink:else> Rendered otherwise </view>

Important Note: JSUI's WXML implementation currently does not support list rendering (e.g.,
wx:for
or
ink:for
are NOT supported). If you need to render lists, you should handle the logic manually in JavaScript or flatten the UI structure as needed.

JSUI支持使用

ink:if

、

ink:elif

和

ink:else

指令进行条件渲染，根据条件控制组件是否渲染。

html

<view ink:if="{{condition === 1}}"> 当条件为1时渲染 </view>
<view ink:elif="{{condition === 2}}"> 当条件为2时渲染 </view>
<view ink:else> 其他情况渲染 </view>

重要提示： JSUI的WXML实现目前不支持列表渲染（例如
wx:for
或
ink:for
均不支持）。如果需要渲染列表，应在JavaScript中手动处理逻辑，或根据需要扁平化UI结构。

3.3 Built-in Components

3.3 内置组件

JSUI provides a set of built-in components that you can use within your WXML templates. These components are mapped to native implementations for optimal performance.

For parameter-by-parameter documentation, event behavior, content model notes, and examples, see components.md. The reference there is intentionally aligned with the current component registry and implementation details in

ink-builtin-components

<view>
: The fundamental layout container, similar to
```
<div>
```
in HTML.
<swiper>
: A swipeable container currently backed by the base view implementation.
<swiper-item>
: An item inside
```
<swiper>
```
, currently backed by the base view implementation.
<fragment>
: A lightweight grouping container currently backed by the base view implementation.
<text>
: Displays text content. Similar to
```
<span>
```
in HTML.
<icon>
: An icon-like text element currently rendered through the text component implementation.
<image>
: Displays local or remote images.
<button>
: A standard clickable button component.
<canvas>
: A component for custom 2D drawing.
<scroll-view>
: A scrollable container for content that exceeds the visible area.
<chart>
: A chart component supporting Line, Area, Pie, and Radar charts.
<input>
: A focusable single-line text input component.
<textarea>
: A focusable multi-line text input component.
<switch>
: A toggle control for boolean on/off state.
<lottie-view>
: Renders Lottie animations from inline JSON, local files, or remote URLs.
<streamdown>
: Renders Markdown-style streaming text content with optional streaming caret behavior.
<a2ui>
: A specialized component for rendering agent-generated UI commands dynamically.
<error-state>
: A compact status component that displays an optional icon with a message.

JSUI提供一组内置组件，可在WXML模板中使用。这些组件映射到原生实现以获得最佳性能。

有关详细的参数文档、事件行为、内容模型说明及示例，请参阅components.md。该参考与

ink-builtin-components

中的当前组件注册表和实现细节保持一致。

<view>
：基础布局容器，类似于HTML中的
```
<div>
```
。
<swiper>
：可滑动容器，当前基于基础视图实现。
<swiper-item>
：
```
<swiper>
```
内的子项，当前基于基础视图实现。
<fragment>
：轻量级分组容器，当前基于基础视图实现。
<text>
：显示文本内容，类似于HTML中的
```
<span>
```
。
<icon>
：类图标文本元素，当前通过文本组件实现渲染。
<image>
：显示本地或远程图片。
<button>
：标准可点击按钮组件。
<canvas>
：用于自定义2D绘图的组件。
<scroll-view>
：内容超出可视区域时的可滚动容器。
<chart>
：支持折线图、面积图、饼图和雷达图的图表组件。
<input>
：可聚焦的单行文本输入组件。
<textarea>
：可聚焦的多行文本输入组件。
<switch>
：用于布尔值开关状态的切换控件。
<lottie-view>
：渲染来自内联JSON、本地文件或远程URL的Lottie动画。
<streamdown>
：渲染Markdown风格的流式文本内容，可选流式光标行为。
<a2ui>
：用于动态渲染Agent生成的UI命令的专用组件。
<error-state>
：紧凑状态组件，显示可选图标和消息。

4. WXSS (WeiXin Style Sheets)

4. WXSS（WeiXin Style Sheets）

WXSS is a style language used to describe the visual presentation of components. It is highly compatible with standard CSS and is used within the

<style>

block of an

.ink

file (or a standalone

.wxss

file).

WXSS是用于描述组件视觉表现的样式语言，与标准CSS高度兼容，用于

.ink

文件的

<style>

块内（或独立的

.wxss

文件）。

4.1 Features

4.1 特性

WXSS extends standard CSS with features tailored for mobile and wearable devices:

@import
: You can use the
```
@import
```
statement to import external style sheets.

css

@import "./common.wxss";

.box {
  width: 240px;
  height: 100px;
  background-color: #40FF5E;
}

WXSS扩展了标准CSS，增加了针对移动和可穿戴设备的特性：

@import
：可使用
```
@import
```
语句导入外部样式表。

css

@import "./common.wxss";

.box {
  width: 240px;
  height: 100px;
  background-color: #40FF5E;
}

4.2 Selectors

4.2 选择器

JSUI supports most standard CSS selectors:

Class Selector (
.class
): The recommended way to style components.
ID Selector (
#id
).
Type Selector (
element
): e.g.,
```
view
```
,
```
text
```
.
Combinators: Grouping (
```
A, B
```
), Descendant (
```
A B
```
), Child (
```
A > B
```
).

Recommendation: Prioritize using Class Selectors to ensure optimal rendering performance.

JSUI支持大多数标准CSS选择器：

类选择器（
.class
）：推荐用于组件样式设置。
ID选择器（
#id
）。
类型选择器（
element
）：例如
```
view
```
、
```
text
```
。
组合器：分组（
```
A, B
```
）、后代（
```
A B
```
）、子元素（
```
A > B
```
）。

建议：优先使用类选择器，以确保最佳渲染性能。

4.3 Flexbox Layout

4.3 Flexbox布局

JSUI's view engine provides robust support for Flexbox. It is the primary and recommended method for building responsive layouts in JSUI.

css

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

JSUI的视图引擎提供强大的Flexbox支持，是JSUI中构建响应式布局的主要推荐方式。

css

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

5. Design Guidelines

5. 设计准则

When developing JSUI applications, especially for wearable devices, it is crucial to follow these design guidelines to ensure a consistent and user-friendly experience.

开发JSUI应用（尤其是针对可穿戴设备）时，必须遵循以下设计准则，以确保一致且友好的用户体验。

5.1 Dimensions and Layout

5.1 尺寸与布局

Width: The application width is strictly 480px.
Height: The recommended application height is between 120px and 380px. Avoid creating overly tall pages that require excessive scrolling.
Card Style: It is highly recommended to use a Card Style layout for each page. This provides a clear boundary and better visual focus in the spatial environment.
Default Background: Use black as the default background color.
Default Border: Use a 2px border as the default border width for cards and key interactive elements.
Border Radius: The recommended border radius (e.g., for cards, buttons, and images) is 12px.

宽度：应用宽度严格为480px。
高度：推荐应用高度在120px至380px之间。避免创建过高的页面，导致过度滚动。
卡片样式：强烈建议每个页面使用卡片样式布局，在空间环境中提供清晰的边界和更好的视觉焦点。
默认背景：使用黑色作为默认背景色。
默认边框：卡片和关键交互元素的默认边框宽度为2px。
边框圆角：推荐卡片、按钮和图片的边框圆角为12px。

5.2 Color Palette

5.2 调色板

Primary Color: Use
```
#40FF5E
```
as the primary brand/action color.
- 100% Opacity:
```
#40FF5E
```
  (Main elements, active states)
- 60% Opacity:
```
rgba(64, 255, 94, 0.6)
```
  (Secondary elements, hover states)
- 40% Opacity:
```
rgba(64, 255, 94, 0.4)
```
  (Background highlights, disabled states)
Default Text Color: Use the Primary Color
```
#40FF5E
```
as the default text color unless a more specific semantic color is required.

主色调：使用
```
#40FF5E
```
作为主要品牌/操作色。
- 100%不透明度：
```
#40FF5E
```
  （主要元素、激活状态）
- 60%不透明度：
```
rgba(64, 255, 94, 0.6)
```
  （次要元素、悬停状态）
- 40%不透明度：
```
rgba(64, 255, 94, 0.4)
```
  （背景高亮、禁用状态）
默认文本颜色：使用主色调
```
#40FF5E
```
作为默认文本颜色，除非需要更特定的语义颜色。

5.3 Prohibitions

5.3 禁止事项

🚫 DO NOT use large areas of solid color blocks. This can be visually overwhelming and uncomfortable on wearable displays. Keep backgrounds subtle and use colors primarily for accents, text, and interactive elements.

🚫 请勿使用大面积纯色块。这在可穿戴设备显示屏上可能会造成视觉冲击和不适。保持背景简洁，主要将颜色用于强调、文本和交互元素。

6. JSUI API Reference

6. JSUI API参考

JSUI aims to provide a development experience that conforms to modern Web standards while also maintaining compatibility with the WeChat Mini Program ecosystem to facilitate smooth migration and code reuse. The APIs are divided into two main categories: Web APIs and WeChat Compatible APIs.

JSUI旨在提供符合现代Web标准的开发体验，同时保持与微信小程序生态的兼容性，以实现平滑迁移和代码复用。API分为两大类：Web API和微信兼容API。

6.1 Web APIs

6.1 Web API

JSUI supports the WinterCG (Web-interoperable Runtimes Community Group) Minimum Common Web API and several other critical Web standards, optimized for wearable devices.

Console API: Standard debugging output interface (
```
console.log
```
,
```
info
```
,
```
warn
```
,
```
error
```
,
```
debug
```
,
```
group
```
,
```
groupEnd
```
).

Window API: Basic global environment interfaces (

window

self

global

setTimeout

setInterval

clearTimeout

clearInterval

atob

btoa

URL API: Standard URL parsing and manipulation (
```
URL
```
,
```
URLSearchParams
```
).
Encoding API: Text encoding and decoding (
```
TextEncoder
```
,
```
TextDecoder
```
).
Crypto API: Web Crypto API for cryptographic operations (
```
crypto.subtle
```
,
```
crypto.randomUUID()
```
).
Performance API: For monitoring agent runtime performance (
```
performance.now()
```
,
```
performance.timeOrigin
```
).
Storage API: Web-like local data persistence (
```
localStorage
```
).
Canvas API: Provides 2D drawing capabilities with spatial rendering support.
Speech API: Speech recognition and synthesis (
```
speechSynthesis
```
,
```
SpeechSynthesisUtterance
```
).
Barcode Detection API: Used for identifying barcodes and QR codes in the environment (
```
BarcodeDetector
```
).

JSUI支持WinterCG（Web互操作运行时社区组）最小通用Web API及其他几个关键Web标准，并针对可穿戴设备进行了优化。

Console API：标准调试输出接口（
```
console.log
```
、
```
info
```
、
```
warn
```
、
```
error
```
、
```
debug
```
、
```
group
```
、
```
groupEnd
```
）。

Window API：基础全局环境接口（

window

、

self

、

global

、

setTimeout

、

setInterval

、

clearTimeout

、

clearInterval

、

atob

、

btoa

）。

URL API：标准URL解析与操作（
```
URL
```
、
```
URLSearchParams
```
）。
Encoding API：文本编码与解码（
```
TextEncoder
```
、
```
TextDecoder
```
）。
Crypto API：用于加密操作的Web Crypto API（
```
crypto.subtle
```
、
```
crypto.randomUUID()
```
）。
Performance API：用于监控Agent运行时性能（
```
performance.now()
```
、
```
performance.timeOrigin
```
）。
Storage API：类Web的本地数据持久化（
```
localStorage
```
）。
Canvas API：提供支持空间渲染的2D绘图能力。
Speech API：语音识别与合成（
```
speechSynthesis
```
、
```
SpeechSynthesisUtterance
```
）。
Barcode Detection API：用于识别环境中的条形码和二维码（
```
BarcodeDetector
```
）。

Web API Examples

Web API示例

Barcode Detection

javascript

import { BarcodeDetector } from 'barcode';
const detector = new BarcodeDetector({ formats: ['qr_code'] });
const results = await detector.detect({ data, width, height });

Speech Synthesis

javascript

const utterance = new SpeechSynthesisUtterance('Hello, welcome to JSUI');
utterance.lang = 'en-US';
utterance.rate = 1.0;
speechSynthesis.speak(utterance);

条形码检测

javascript

import { BarcodeDetector } from 'barcode';
const detector = new BarcodeDetector({ formats: ['qr_code'] });
const results = await detector.detect({ data, width, height });

语音合成

javascript

const utterance = new SpeechSynthesisUtterance('Hello, welcome to JSUI');
utterance.lang = 'en-US';
utterance.rate = 1.0;
speechSynthesis.speak(utterance);

6.2 WeChat Compatible APIs (

wx.*

)

6.2 微信兼容API（

wx.*

）

To allow developers to reuse existing Mini Program code and resources, JSUI provides a set of APIs compatible with WeChat Mini Programs.

为允许开发者复用现有小程序代码和资源，JSUI提供一组与微信小程序兼容的API。

Base / System

基础/系统

```
wx.canIUse(schema)
```
: Check API support.

wx.getWindowInfo()

: Get screen metrics (

pixelRatio

screenWidth

windowHeight

safeArea

```
wx.getSystemInfoSync()
```
: Alias for
```
getWindowInfo
```
.
```
wx.exitMiniProgram()
```
: Exit the application.

```
wx.canIUse(schema)
```
：检查API支持情况。

wx.getWindowInfo()

：获取屏幕指标（

pixelRatio

、

screenWidth

、

windowHeight

、

safeArea

）。

```
wx.getSystemInfoSync()
```
：
```
getWindowInfo
```
的别名。
```
wx.exitMiniProgram()
```
：退出应用。

UI & Canvas

UI与Canvas

```
wx.setBackgroundColor(options)
```
: Set background color.
Canvas-related APIs for UI rendering.

```
wx.setBackgroundColor(options)
```
：设置背景颜色。
用于UI渲染的Canvas相关API。

Networking

网络

wx.request(options)

: Initiate an HTTPS network request. Returns a

RequestTask

Options:

url

method

data

header

responseType

dataType

success

fail

wx.connectSocket(options)

wx.createSocket(options)

: Create a WebSocket connection. Returns a

SocketTask

wx.request(options)

：发起HTTPS网络请求，返回

RequestTask

。

参数：

url

、

method

、

data

、

header

、

responseType

、

dataType

、

success

、

fail

。

wx.connectSocket(options)

wx.createSocket(options)

：创建WebSocket连接，返回

SocketTask

。

Media

媒体

```
wx.media.getRecorderManager()
```
: Get the globally unique recorder manager for audio recording.
```
wx.media.createCameraContext()
```
: Create a camera context for taking photos.
- ```
takePhoto({ quality: 'high' | 'normal' | 'low' })
```
  : Returns a Promise containing image data.

```
wx.media.getRecorderManager()
```
：获取全局唯一的录音管理器，用于音频录制。
```
wx.media.createCameraContext()
```
：创建相机上下文，用于拍照。
- ```
takePhoto({ quality: 'high' | 'normal' | 'low' })
```
  ：返回包含图片数据的Promise。

Speech

语音

```
wx.speech.playTTS(options)
```
: Text-to-Speech (TTS) playback.
```
wx.speech.startRecognition(options)
```
: Start speech recognition.

```
wx.speech.playTTS(options)
```
：文本转语音（TTS）播放。
```
wx.speech.startRecognition(options)
```
：开始语音识别。

Router

路由

Navigation and routing APIs compatible with the Mini Program routing system.

与小程序路由系统兼容的导航和路由API。

7. Usage Examples (WeChat APIs)

7. 使用示例（微信API）

Take a Photo with Camera

相机拍照

javascript

import wx from 'wx';

const camera = wx.media.createCameraContext();
const photo = await camera.takePhoto({ quality: 'high' });
console.log('Image data size:', photo.data.byteLength);

javascript

import wx from 'wx';

const camera = wx.media.createCameraContext();
const photo = await camera.takePhoto({ quality: 'high' });
console.log('Image data size:', photo.data.byteLength);

Crypto & UUID Generation

加密与UUID生成

javascript

const uuid = crypto.randomUUID();
const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode('hello JSUI'));

javascript

const uuid = crypto.randomUUID();
const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode('hello JSUI'));

jsui-dev

Original

Translation

JSUI Agent Developer Guide

JSUI Agent 开发者指南

1. Project Structure

1. 项目结构

1.1 Agent Manifest (AGENTS.md)

1.1 Agent清单（AGENTS.md）

Agent Manifest

Agent Manifest

Identity

Identity

Capabilities

Capabilities

1.2 Global Configuration (app.json)

1.2 全局配置（app.json）

1.3 Application Registration (app.js)

1.3 应用注册（app.js）

1.4 Page Configuration (page.json)

1.4 页面配置（page.json）

2. Single File Component (SFC) .ink Specification

2. 单文件组件（SFC）.ink规范

2.1 .ink Example Code:

2.1 .ink示例代码：

3. WXML (WeiXin Markup Language) & Components

3. WXML（WeiXin Markup Language）与组件

3.1 Basic Syntax and Data Binding

3.1 基础语法与数据绑定

3.2 Directives (Conditional Rendering)

3.2 指令（条件渲染）

3.3 Built-in Components

3.3 内置组件

4. WXSS (WeiXin Style Sheets)

4. WXSS（WeiXin Style Sheets）

4.1 Features

4.1 特性

4.2 Selectors

4.2 选择器

4.3 Flexbox Layout

4.3 Flexbox布局

5. Design Guidelines

5. 设计准则

5.1 Dimensions and Layout

5.1 尺寸与布局

5.2 Color Palette

5.2 调色板

5.3 Prohibitions

5.3 禁止事项

6. JSUI API Reference

6. JSUI API参考

6.1 Web APIs

6.1 Web API

Web API Examples

Web API示例

6.2 WeChat Compatible APIs (wx.*)

6.2 微信兼容API（wx.*）

Base / System

基础/系统

UI & Canvas

UI与Canvas

Networking

网络

Media

媒体

Speech

语音

Router

路由

7. Usage Examples (WeChat APIs)

7. 使用示例（微信API）

Take a Photo with Camera

相机拍照

Crypto & UUID Generation

加密与UUID生成

2. Single File Component (SFC)
`.ink`
Specification

2. 单文件组件（SFC）
`.ink`
规范

2.1
`.ink`
Example Code:

2.1
`.ink`
示例代码：

6.2 WeChat Compatible APIs (
`wx.*`
)

6.2 微信兼容API（
`wx.*`
）