这是我参与「第四届青训营」笔记创作活动的第5天，关于小程序的简介、代码构成以及一些基础语法。

一、小程序简介

小程序开发的模式与 Web 开发类似，使用 JavaScript 进行开发，使用 CSS 控制样式，最终使用 HTML 进行渲染。
在 Web 开发中，每个页面中 JS 线程与渲染线程是互斥的；而在小程序中，JS 的运行进程与渲染进程（视图层）是独立的，视图的渲染更新，并不会阻塞 JS 的执行，同时 JS 的逻辑执行，也不会阻塞视图的渲染更新。

二、小程序代码构成

小程序项目中单个页面会依赖不同类型的文件：

.json 后缀的 JSON 配置文件
.ttml 后缀的 TTML 模板文件
.ttss 后缀的 TTSS 样式文件
.js 后缀的 JS 脚本文件

目录结构

.
├── app.js
├── app.json
├── app.ttss
├── project.config.json
└── pages
   └── pageA
       ├── pageA.ttss
       ├── pageA.js
       ├── pageA.json
       └── pageA.ttml

根目录

一个小程序主体部分由一份项目配置和三个文件组成，必须放在项目的根目录，如下：

页面

一个小程序页面由四个文件组成，分别是：

三、小程序基础语法

TTML

TTML是用来编写页面结构用的标签语言。主要包括以下特性。

数据绑定

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

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

列表渲染

<!--ttml-->
<view tt:for="{{array}}"> {{item}} </view>

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

条件渲染

<!--ttml-->
<view tt:if="{{view == 'A'}}"> A </view>
<view tt:elif="{{view == 'B'}}"> B </view>
<view tt:else="{{view == 'C'}}"> C </view>

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

模板

<!--ttml-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<template is="msgItem" data="{{...item}}" />

// page.js
Page({
  data: {
    item: {
      index: 0,
      msg: "this is a template",
      time: "2020-06-01",
    },
  },
});

事件

<!--ttml-->
<view bindtap="add"> {{count}} </view>

// page.js
Page({
  data: {
    count: 1,
  },
  add: function (e) {
    this.setData({
      count: this.data.count + 1,
    });
  },
});

TTSS

TTSS 是一套样式语言，用于描述 TTML 的组件样式。

为了适应广大的前端开发者，TTSS 具有 CSS 大部分特性。同时 TTSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，TTSS 扩展的特性有：

尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有：

小程序技术全解|青训营笔记

一、小程序简介

二、小程序代码构成

目录结构

根目录

页面

三、小程序基础语法