智能小程序框架概述

文件结构

小程序分为 app 和 page 两层。app用来描述整个应用，page 用来描述各个页面，此外还有关于整个 project 的配置描述（可选）。 app 由三个文件组成，必须放在小程序源码目录内。

小程序源码目录默认等于项目根目录，可在项目配置文件（project.tuya.json）中修改字段 miniprogramRoot。

完整项目示例

├── project.tuya.json
├── app.js
├── app.json
├── app.tyss
├── assets
│   └── images
│       └── tab
│           └─ component.png
├── i18n
│   └── strings.json
├── components
│   └── foo
│       ├── index.js
│       ├── index.json
│       ├── index.tyml
│       └── index.tyss
├── pages
│   └── page
│       ├── index.js
│       ├── index.json
│       ├── index.tyml
│       └── index.tyss
├── theme.json
├── package.json
└── node_modules

app 主体

app 由三个文件组成，必须放在项目的根目录。

文件	必填	作用
app.js	是	应用逻辑
app.json	是	公共设置，例如：所有页面路径等
app.tyss	否	公共样式
theme.json	否	主题配置文件

pages 页面

文件类型	必填	作用
js	是	页面逻辑
json	是	页面配置
tyml	是	页面结构
tyss	否	页面样式表

注意： 为了方便开发者，智能小程序规定这四个文件必须具有相同的路径与文件名。 project 特指 project.tuya.json 文件，必须放在项目的根目录，其中的具体配置请参见 小程序项目配置。 开发者写的所有代码最终将会打包成一份 JavaScript 脚本，在小程序启动的时候运行，在小程序结束运行时销毁。

components 自定义组件

文件	必填	作用
js	是	组件逻辑
json	是	组件配置
tyss	否	组件样式表
tyml	是	组件结构

注意： 为了方便开发者，智能小程序规定这四个文件必须具有相同的路径与文件名。

i18n

文件	必填	作用
strings.json	是	多语言配置

逻辑结构

小程序的核心是一个响应式的数据绑定系统，分为视图层和逻辑层。这两层始终保持同步，只要在逻辑层修改数据，视图层就会相应的更新。

示例代码：

<!-- 视图层 -->
<view> Hello {{name}}! </view>
<button bind:tap="changeName">Click me!</button>

// 逻辑层脚本
// 注册一个页面
Page({
  data: { name: 'world' },
  changeName(e) {
    // 改变数据
    this.setData({ name: 'Smart MiniApp' });
  },
});

上面代码中，框架自动将逻辑层数据中的 name 与视图层的 {{name}} 进行了绑定，所以在页面一打开的时候会显示Hello world!。

用户点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到对应的事件处理函数。逻辑层执行了 setData 的操作，将 name 从 world 变为 Smart MiniApp ，因为该数据和视图层已经绑定了，从而视图层会自动改变为 Hello Smart MiniApp!。

注意： 由于框架并非运行在浏览器中，所以 JavaScript 在 web 中的一些能力都无法使用，如 document、window 等对象。

模块化

小程序均支持 CommonJS 和 ESModule 模块化语法规范，推荐使用 ESModule。需要注意的是项目内的脚本文件应遵循统一语法规范，否则可能出现程序运行异常的情况。

ESModule 模块化语法

import util from './util'; // 载入相对路径
import absolute from '/absolute'; // 载入项目根路径文件
import lodash from 'lodash'; // 载入 npm 三方包

CommonJS 模块化语法

const util = require('./util'); // 载入相对路径
const absolute = require('/absolute'); // 载入项目根路径文件
const lodash = require('lodash'); // 载入 npm 三方包

更多详细信息请参考 模块化

保留关键字

小程序中将浏览器部分内置对象名（如：window、document）作为保留字使用。请勿使用保留字作为变量名或使用保留字到逻辑中，否则小程序应用会出现无法正常运行的情况。

NPM 模块

支持引入第三方模块，需先在项目目录下执行如下命令安装该模块：

$ npm install query-string --save

引入后即可在逻辑层中直接使用：

import queryString from 'query-string'; // 载入第三方 npm 模块