initial commit
This commit is contained in:
+16
@@ -0,0 +1,16 @@
|
||||
# 依赖目录
|
||||
node_modules/
|
||||
|
||||
# 构建输出目录
|
||||
dist/
|
||||
|
||||
# 日志文件
|
||||
*.log
|
||||
|
||||
# 编辑器配置
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# 系统文件
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@@ -0,0 +1,71 @@
|
||||
# Xiaomi Vela JS 照片查看器应用
|
||||
|
||||
这是一个基于 Xiaomi Vela JS 应用框架的照片查看器应用。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── manifest.json # 应用配置文件
|
||||
├── app.ux # 应用入口文件
|
||||
├── pages/
|
||||
│ └── index/
|
||||
│ └── index.ux # 主页面
|
||||
├── common/
|
||||
│ ├── style.css # 公共样式
|
||||
│ └── utils.js # 公共工具函数
|
||||
└── Common/
|
||||
└── icon.png # 应用图标
|
||||
```
|
||||
|
||||
## 开发说明
|
||||
|
||||
### 环境要求
|
||||
|
||||
- 安装 AIoT-IDE（Xiaomi Vela JS 应用的集成开发环境）
|
||||
- 支持 Ubuntu、Windows、MacOS 等操作系统
|
||||
|
||||
### 运行应用
|
||||
|
||||
1. 使用 AIoT-IDE 打开项目
|
||||
2. 启动模拟器
|
||||
3. 运行项目查看效果
|
||||
|
||||
### 打包应用
|
||||
|
||||
1. 在 AIoT-IDE 中使用打包功能
|
||||
2. 生成安装包（.rpk 文件）
|
||||
|
||||
## 应用特点
|
||||
|
||||
- 轻量化：适合智能穿戴设备
|
||||
- 跨平台兼容性：支持多种设备
|
||||
- 高性能渲染：流畅的动画和交互
|
||||
- 安全性能：三重隔离机制保护数据安全
|
||||
|
||||
## 开发语法
|
||||
|
||||
Xiaomi Vela JS 应用采用以下语法：
|
||||
|
||||
### 模板语法（template）
|
||||
- 数据绑定：`{{variable}}`
|
||||
- 事件绑定：`onclick="handler"` 或 `@click="handler"`
|
||||
- 列表渲染：`for="{{list}}"`
|
||||
- 条件渲染：`if="{{condition}}"`、`elif="{{condition}}"`、`else`
|
||||
|
||||
### 样式语法（style）
|
||||
- 类似 CSS 的样式定义
|
||||
- 支持 Flexbox 布局
|
||||
- 单位为 px
|
||||
|
||||
### 脚本语法（script）
|
||||
- 使用 JavaScript 语言
|
||||
- 支持 MVVM 开发范式
|
||||
- 数据与视图自动同步
|
||||
|
||||
## 参考文档
|
||||
|
||||
- [Xiaomi Vela JS 应用概述](https://iot.mi.com/vela/quickapp/zh/guide/)
|
||||
- [开发语法](https://iot.mi.com/vela/quickapp/zh/guide/framework/)
|
||||
- [UI 组件](https://iot.mi.com/vela/quickapp/zh/components/)
|
||||
- [JS 接口](https://iot.mi.com/vela/quickapp/zh/features/)
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* 构建脚本
|
||||
* 用于构建 Xiaomi Vela JS 应用
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
// 源目录
|
||||
const srcDir = path.join(__dirname, 'src');
|
||||
|
||||
// 输出目录
|
||||
const distDir = path.join(__dirname, 'dist');
|
||||
|
||||
// 创建输出目录
|
||||
if (!fs.existsSync(distDir)) {
|
||||
fs.mkdirSync(distDir);
|
||||
}
|
||||
|
||||
// 复制文件函数
|
||||
function copyFileSync(source, target) {
|
||||
let targetFile = target;
|
||||
|
||||
// 如果目标是一个目录，则在目录中创建同名文件
|
||||
if (fs.existsSync(target)) {
|
||||
if (fs.lstatSync(target).isDirectory()) {
|
||||
targetFile = path.join(target, path.basename(source));
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFileSync(targetFile, fs.readFileSync(source));
|
||||
}
|
||||
|
||||
// 复制目录函数
|
||||
function copyFolderRecursiveSync(source, target) {
|
||||
let files = [];
|
||||
|
||||
// 检查目标目录是否存在
|
||||
const targetFolder = path.join(target, path.basename(source));
|
||||
if (!fs.existsSync(targetFolder)) {
|
||||
fs.mkdirSync(targetFolder);
|
||||
}
|
||||
|
||||
// 检查源目录是否存在
|
||||
if (fs.existsSync(source)) {
|
||||
files = fs.readdirSync(source);
|
||||
files.forEach(function (file) {
|
||||
const curSource = path.join(source, file);
|
||||
if (fs.lstatSync(curSource).isDirectory()) {
|
||||
// 递归复制子目录
|
||||
copyFolderRecursiveSync(curSource, targetFolder);
|
||||
} else {
|
||||
// 复制文件
|
||||
copyFileSync(curSource, targetFolder);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 开始构建
|
||||
console.log('开始构建 Xiaomi Vela JS 应用...');
|
||||
|
||||
try {
|
||||
// 复制源文件到输出目录
|
||||
copyFolderRecursiveSync(srcDir, distDir);
|
||||
console.log('构建完成！');
|
||||
console.log('输出目录:', distDir);
|
||||
} catch (error) {
|
||||
console.error('构建失败:', error);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "photo-viewer",
|
||||
"version": "1.0.0",
|
||||
"description": "Xiaomi Vela JS 照片查看器应用",
|
||||
"main": "build.js",
|
||||
"scripts": {
|
||||
"build": "node build.js",
|
||||
"start": "echo '请使用 AIoT-IDE 运行项目'"
|
||||
},
|
||||
"keywords": [
|
||||
"xiaomi",
|
||||
"vela",
|
||||
"js",
|
||||
"app",
|
||||
"photo-viewer"
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT"
|
||||
}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
/**
|
||||
* 应用级别的配置，供所有页面公用
|
||||
*/
|
||||
import util from './common/utils'
|
||||
|
||||
export default {
|
||||
util
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
这是一个图标占位符文件。在实际应用中，这里应该是一个192x192像素的PNG图标文件。
|
||||
@@ -0,0 +1 @@
|
||||
这是一个照片占位符文件。在实际应用中，这里应该是一个真实的PNG图片文件。
|
||||
@@ -0,0 +1 @@
|
||||
/* 公共样式 */
|
||||
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* 公共工具函数
|
||||
*/
|
||||
|
||||
// 显示菜单
|
||||
function showMenu() {
|
||||
// 实现显示菜单的逻辑
|
||||
}
|
||||
|
||||
// 创建快捷方式
|
||||
function createShortcut() {
|
||||
// 实现创建快捷方式的逻辑
|
||||
}
|
||||
|
||||
// 导出工具函数
|
||||
export default {
|
||||
showMenu,
|
||||
createShortcut
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"package": "com.example.photo-viewer",
|
||||
"name": "photo-viewer",
|
||||
"icon": "/common/icon.png",
|
||||
"versionName": "1.0",
|
||||
"versionCode": 1,
|
||||
"minAPILevel": 1,
|
||||
"features": [],
|
||||
"router": {
|
||||
"entry": "index",
|
||||
"pages": {
|
||||
"index": {
|
||||
"component": "index"
|
||||
}
|
||||
}
|
||||
},
|
||||
"display": {
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<text class="title">照片查看器</text>
|
||||
<div class="photo-list">
|
||||
<div class="photo-item" for="{{photos}}">
|
||||
<image class="photo" src="{{$item.url}}"></image>
|
||||
<text class="photo-name">{{$item.name}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.photo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.photo-name {
|
||||
font-size: 30px;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
private: {
|
||||
photos: [
|
||||
{ name: '照片1', url: '/common/photo1.png' },
|
||||
{ name: '照片2', url: '/common/photo2.png' },
|
||||
{ name: '照片3', url: '/common/photo3.png' }
|
||||
]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user