新手引导｜小程序开发指南基础篇（一）

一. 准备

欢迎进入新手引导小程序！您需要准备的材料包括：

• 智能生活 App。请您前往应用商店自行下载此 App。
• 本地仓库。
• 开发者工具。请按需下载最新稳定版版本的 IDE。
• 打开本地仓库，安装依赖：需要依赖 Node 环境, 使用 npm i 或 yarn 安装依赖包。
• 打开开发者工具，导入本地仓库，选择本地项目模式，单击 编译。
• 编译完成后选择真机调试，即可用安装的 App 扫描二维码进行预览。
• 关于小程序开发者工具和开放平台的使用流程，详见开发者工具和开发者平台相关教程。

注意：如果开发者工具的运行结果与真机运行结果不一致，请以真机的调试运行结果为准。

学习内容

❣️ 智能小程序基本 TYML、TYSS、相关语法.

❣️ 智能小程序页面、组件、组合开发。

❣️ 一些 API 的介绍和使用。

❣️ 内置的智能小程序扩展能力补充，包括 主题适配、多语言等。

❣️ 其他扩展能力，包括 组件库、手势库、图表库、动画库等。

二. 基本概念

• 小程序分为 app 和 page 两层。app 用来描述整个应用，page 用来描述各个页面。更多信息，请参考 框架概述。
• 可使用 component 将需要复用的功能模块抽象成自定义组件。因而，您可以在不同页面中复用这些组件，还可以将自定义组件发布到 NPM 上，然后在不同小程序中进行复用这些组件。更多信息，请参考 小程序组件。

项目结构

├── 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
        

三. 基本语法 - TYSS

• TYSS 是一套样式语言，用于描述 TYML 的组件样式、显示效果。
• TYSS 继承 CSS 特性，TYSS 和 CSS 规则完全一致，100% 可兼容。同时，为了更适配小程序开发，对 CSS 进行扩充，在 TYSS 中增加 rpx 自适应单位，便于实现对各尺寸屏幕适配开发。
• 为提高开发者编写样式文件的效率，智能小程序支持使用 less 语法进行样式编写。需使用 index.less 文件，index.tyss 仅支持 CSS。
• 更多信息，请参考 TYSS 语法参考。

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

四. 基本语法 - TYML

• TYML（Tuya Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
• TYML 中的动态数据均来自对应 Page 的 data。
• 数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)、运算、三元运算、算术运算、逻辑判断、字符串运算等。更多信息，请参考 TYML 语法参考。

1. 数据绑定

<!--tyml-->
          <view> {{message}} </view>
        

// page.js
          Page({
          data: {
          message: "Hello MINA!",
          },
          });
        

2. 列表渲染

如不提供 ty:key，会报一个 warning。如果已明确是静态列表，或者不必关注其顺序，可以选择忽略。更多信息，请参考 列表渲染。

<!--tyml-->
          <view ty:for="{{array}}"> {{item}} </view>
        

// page.js
          Page({
          data: {
          array: [1, 2, 3, 4, 5],
          },
          });
        

3.条件渲染

更多信息，请参考 条件渲染。

<!--tyml-->
          <view ty:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
          <view ty:elif="{{view == 'APP'}}"> APP </view>
          <view ty:else="{{view == 'MINA'}}"> MINA </view>
        

// page.js
          Page({
          data: {
          view: "MINA",
          },
          });
        

4.模板

更多信息，请查看 模板。

<!--tyml-->
          <template name="staffName">
          <view>
          FirstName: {{firstName}}, LastName: {{lastName}}
          </view>
          </template>

          <template is="staffName" data="{{...staffA}}"></template>
          <template is="staffName" data="{{...staffB}}"></template>
          <template is="staffName" data="{{...staffC}}"></template>
        

// page.js
          Page({
          data: {
          staffA: { firstName: "Hulk", lastName: "Hu" },
          staffB: { firstName: "Shang", lastName: "You" },
          staffC: { firstName: "Gideon", lastName: "Lin" },
          },
          });
        

五 . App

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

注意：App() 必须在** app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的效果。

1. 生命周期

• onLaunch：小程序初始化完成时触发，全局只触发一次。
• onShow：小程序启动，或从后台进入前台显示时触发。
• onHide：小程序从前台进入后台时触发。
• onError：小程序发生脚本错误或 API 调用报错时触发。
• onPageNotFound：小程序要打开的页面不存在时触发。
• onThemeChange：系统切换主题时触发。

更多信息，请查看 App。

示例代码

App({
          onLaunch(options) {
          // Do something initial when launch.
          },
          onShow(options) {
          // Do something when show.
          },
          onHide() {
          // Do something when hide.
          },
          onError(msg) {
          console.log(msg);
          },
          globalData: "I am global data",
          });
        

2. getApp

你可以在 js 中（page 或 component）通过 getApp 方法获取到小程序全局唯一的 App 实例。

示例代码

// other.js
          var appInstance = getApp();
          console.log(appInstance.globalData); // I am global data
        

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

新手引导｜小程序开发指南基础篇（二） 

新手引导｜小程序开发指南基础篇（三）