APEX Mini-App Tools

VS Code extension for building APEX mini-apps — syntax highlighting, IntelliSense, a built-in simulator, and dev server integration.

Features

Syntax Highlighting

Full syntax highlighting for .axml and .acss files — the two languages used to build APEX mini-app templates and styles.

IntelliSense

• Auto-complete for all built-in APEX components (view, text, button, scroll-view, image, input, swiper, and more)
• Attribute suggestions with type annotations
• Hover documentation showing component descriptions and attribute tables
• Go-to-definition for component and page references

Live Simulator

Open a phone-frame simulator directly inside VS Code. The simulator compiles your project on the fly and hot-swaps styles without a full reload.

Command Palette → APEX: Open Simulator or click the $(device-mobile) APEX Simulator button in the title bar.

Development Server

Start a local dev server that serves your compiled mini-app bundle to the APEX host app over the network.

APEX: Start Development Server   → starts on port 3000 (configurable)
APEX: Stop Development Server    → shuts it down
APEX: Preview on Device          → shows the QR code / deep-link URL

Scaffolding Commands

• APEX: Create New Mini-App — interactive wizard, produces a ready-to-run project
• APEX: Generate Page — right-click a pages/ folder to add a new page (.axml, .js, .acss, .json)
• APEX: Generate Component — right-click a components/ folder to scaffold a reusable component

Production Build

APEX: Build for Production — compiles and bundles the app into a .map package ready for distribution.

Getting Started

1. Install the extension

Search for APEX Mini-App Tools in the VS Code Extensions panel, or install with:

code --install-extension isw-apex.apex-ide

2. Install the CLI

npm install -g @qt-test/apex-cli

3. Scaffold a project

apex create my-first-app
cd my-first-app
code .

The extension activates automatically when it detects an app.json in your workspace root.

Project Structure

my-first-app/
├── app.json          # App manifest (appId, pages list, window config)
├── app.js            # App lifecycle (onLaunch, onShow, onHide)
├── app.acss          # Global styles
├── pages/
│   └── index/
│       ├── index.axml    # Template
│       ├── index.js      # Page logic
│       ├── index.acss    # Page-scoped styles
│       └── index.json    # Page config
├── components/       # Reusable custom components
├── assets/           # Images and static files
└── package.json

AXML & ACSS Quick Reference

AXML — Template Language

AXML is a declarative markup language similar to HTML, designed for mini-app UIs.

<view class="container">
  <text class="title">{{pageTitle}}</text>

  <view a:for="{{items}}" a:key="id">
    <text>{{item.name}}</text>
  </view>

  <button type="primary" onTap="handleSubmit">
    Submit
  </button>
</view>

Data binding uses {{expression}} syntax.
Directives: a:if, a:elif, a:else, a:for, a:key.

ACSS — Styling Language

ACSS is CSS with a responsive unit: rpx (responsive pixels, 750rpx = screen width).

.container {
  padding: 32rpx;
  background-color: #f5f5f5;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1a1a1a;
}

Built-in Components

Commands

Settings

Requirements

• VS Code 1.85 or later
• Node.js 18+ (for CLI scaffolding and dev server)
• APEX CLI (npm install -g @qt-test/apex-cli)

Release Notes

0.1.2

• Bundled @qt-test/apex-compiler into the VSIX — simulator no longer requires a local node_modules/
• Fixed esbuild native binary shipping inside the extension package
• Simulator compiles and hot-reloads without any additional setup

0.1.0

• Initial release
• AXML/ACSS syntax highlighting and IntelliSense
• Simulator panel, dev server integration, and scaffolding commands

License

MIT — see LICENSE