Quick Guide to Developing Alipay Mini Programs

Since the public beta of Alipay Mini Programs on August 18, developers can register on the Ant Open Platform, apply for a mini‑program public test, and obtain an AppID required for later publishing.

1. Developer Registration – Log in with an enterprise Alipay account, navigate to the Mini Program public test page, and submit the application (review takes one business day). Personal accounts cannot access the mini‑program menu.

2. Obtain Mini Program AppID – After logging into the Open Platform, go to the developer center, select the Mini Program menu, create a new mini‑program if needed, and find the generated AppID in the "My Mini Programs" list.

3. Download and Log In to the IDE – Download the Alipay Mini Program IDE (https://docs.alipay.com/mini/ide/download), install it, and log in by scanning a QR code with the Alipay app on your phone.

4. Create a Project – Click "Create Project" in the IDE, choose a folder, and the IDE will generate the project scaffold.

5. Code Editing – The IDE shows three panes: file explorer, code editor, and preview. It provides auto‑completion for my API and axml syntax, and automatically recompiles and refreshes the app on changes.

6. Sample Project Structure – A new project includes app.js (logic), app.json (global config), app.acss (global styles), and page files ( .js, .json, .acss, .axml). The app.js can listen to lifecycle events and call APIs such as storage and user info.

7. Page Development – Example pages include a Todo List and an Add Todo page. todos.axml uses components like <view/>, <image/>, <text/>, <button/>, <label/>, and <checkbox/> with a:for for list rendering. Corresponding todos.js handles lifecycle methods, data binding, and event handling. todos.acss defines page styles, while todos.json can override global window settings.

8. Add Todo Page – Uses <input/> for user input, with its own add-todo.js, add-todo.acss, and add-todo.json to set the page title.

9. Local Debugging – The IDE provides a preview area that simulates the Alipay app, a debug tab for inspecting components and network requests, a preview log for compilation details, and red‑box error feedback for syntax or configuration issues.

10. Real‑Device Preview – Switch to the "Device" tab, enter the AppID, and choose to push the preview to yourself or all developers associated with the AppID.

11. Publishing – Click "Publish", confirm the AppID and version number, and submit the mini‑program for review and release.