Cloud Phone - Vue Sample Widget
🔰 This is a beginner guide on Cloud Phone widget development, created using create-vue to bootstrap a Vue.js project.
https://cloudmosa.github.io/cloudphone-vue-sample/
- Node & npm
- Git
- A GitHub account
The default page that uses an OptionsMenu for navigating to About, Settings, or Privacy (external).
A simple page displaying a static description.
A page for configuring the application. By default, the application will detect the best candidate from the browser's language. Users can override this on the settings page.
A header displayed at the top of the screen. Includes a fixed logo and a title property that updates both document.title and an h1 tag displaying the title on screen.
A modal containing a list of menu items. Supports T9 keyboard navigation. Focus is moved using ArrowUp and ArrowDown. Menu items are selected using Enter.
An on-screen menu bar with three actions in the positions start (left), center, and end (right). Supports both icon and text actions triggered via a global keydown event listener.
On Cloud Phone, soft keys are mapped as follows:
| Name | Key | Function |
|---|---|---|
| Left Soft Key (LSK) | Escape |
Programmable |
| Right Soft Key (RSK) | N/A | history.back() |
| Enter | Enter |
Programmable |
Because developers cannot override the RSK behavior, clicking RSK also calls history.back() to reproduce the same behavior on desktop browsers.
GitHub Pages offers free hosting for public open-source repositories. This project uses the official deploy-pages GitHub Action to build and deploy static HTML, CSS, and JS. Set the base path configuration in vite.config.js to match your repository name and ensure the path provided to the upload-pages-artifact GitHub Action matches the default dist/ directory.
Warning
Production: although it's possible to configure custom domain names, "GitHub Pages is not intended for or allowed to be used... either facilitating commercial transactions or providing commercial software" (see Prohibited Uses). Use GitHub Pages for production applications at your own risk.
Register for the Cloud Phone Developer Program to upload test widgets and use the Cloud Phone Simulator.
Licensed under the Apache 2.0 license