[Toc]

微信小程序的基本目录结构为：

F:\WX>tree/f
Folder PATH listing for volume 文件
Volume serial number is 10E3-916A
F:.
│  app.js
│  app.json
│  app.wxss
│  project.config.json
│  sitemap.json
│
├─pages
│  ├─index
│  │      index.js
│  │      index.json
│  │      index.wxml
│  │      index.wxss
│  │
│  └─logs
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│
└─utils
        util.js

小程序页面显示内容用view标签包括起来

<view>Hello World!</view>

字体样式可以在标签中通过style设置，也可以通过class设置

font-family设置字体

font-size设置字体大小

font-style设置字体倾斜

font-weight设置字体是否加粗

view 组件支持使用 style,class 属性来设置组件的样式，静态的样式一般写到 class 中，动态的样式一般写到 style 中，这样可以提高渲染速度。

• 在 app.wxss中定义的样式类属于全局样式类，可以在项目的任何文件中使用

• 在index.wxss中定义的样式类一般只在index wxml中使用。

image标签通过src设置路径，bindtap绑定事件函数

<image src="{{imgSrc}}" bindtap="tapCat"></image>

然后在 JS 文件中对imgSrc赋值，编写tapCat函数

1. 使用音频

   首先要利用 API 函数wx.createInnerAudioContext()创建音频上下文，然后设置该上下文的src，并利用play()函数播放音频。

2. 数据绑定 WXML 文件中的动态数据通过{{}}符号与 JS 文件中的数据进行绑定，这样 JS 中的数据就可以传给 WXML 文件。这种传递是单向的。

3. 事件绑定。在 WXML 文件组件标签内利用bind…=函数名，绑定组件事件与函数，并在 JS 文件中定义该事件函数。

所有WXML元素都可以看作盒子，在WXSS中box model这一术语是用来设计和布局时使用。盒模型本质上是一个盒子，封装周围的WXML元素，它包括：边距，边框，填充和实际内容。

边框样式

border- style属性用来定义边框的样式

边框宽度

border- width属性用了设置边框宽度。

边框颜色

border-color属性用于设置边框的颜色。

单独设置各边

可以通过 border-top、 border-right、 border-bottom、border -left属性设置不同的侧面具有不同的边框。

一次性设置边框属性

可以利用 border 属性一次性设置边框宽度、边框样式和边框颜色。如：border：1px solid #fff

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来对盒状模型进行布局

Flex 容器布局

Flex 项目布局

利用 1ine- height 设置文本垂直居中对齐

line- height 可以理解为每行文字所占的高度。比如说有一行高度为 20px 的文字，如果设置为 line-height：50px，那就是说，这行文字的高度会占 50x，由于每个字的高度只有 20px，于是浏览器就把多出来的 30px（50px- 20px）在这行文字的上面加上了 15px，下面加上了 15px，这样文字就在这 50px 的空间内是居中的了。

navigator组件能够实现页面导航

navigator组件的属性

open-type 的合法值

icon组件显示一个图标

Icon 图标组件的主要属性

float 属性

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

Float 属性的合法值

clear 属性

清除浮动

clear 属性的合法值

利用 margin 属性实现水平居中对齐

如果要实现块元素的水平居中对齐，可以通过让 margin 左右边距为 auto 的方式来实现，这样块元素将平均分配左右边距，从而实现水平居中对齐

条件语句

1. if
2. if … else if …else
3. if … else
4. switch

Math 对象

JavaScript 中的逻辑运算符

button组件常用属性

属性合法值

JavaScript 支持的循环类型

• for
• for/in
• while
• do/while

JavaScript 全局对象

全局的属性

全局的方法

Array 对象

Number 对象

setTimeOut()

函数 number setTimeout(function callback,number delay, any rest)。设定一个计时器，在计时到期以后执行注册的回调函数。

clearTimeOut()

函数 clearTimeout(number timeoutID)。取消由setTimeout设置的计时器。参数 timeoutID为要取消的计时器的 ID。

setInterval()

函数number setInterval(function callback, number delay, any rest)。设定一个计时器，按照指定的周期（以毫秒计）来执行注册的回调函数。

clearInterval()

函数 clearInterval(number intervalID)。取消由 setInterval设置的计时器。参数intervalID为要取消的计时器的 ID。

利用 app.json文件对小程序进行全局配置

利用同名.json文件对本页面窗口表现进行配置‘

全局配置

Pages 配置

pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的.json，.js，.wxml，.wxss四个文件进行处理。数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

Window 配置

tabBar 配置

list 配置

小程序整个生命周期的执行基本顺序是：

WXML

wxml是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

data对象

data对象是页面第一次渲染时使用的初始数据，WXML中的动态数据均来自对应Page的 data。页面加载时，data以JSON字符串的形式由逻辑层传至渲染层，数据类型包括：字符串，数字，布尔值，对象，数组等。

数据绑定

渲染层可以通过 WXML 对数据进行绑定。数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：内容、组件属性、控制属性、关键字、运算、组合、数组、对象等场景。

setData() 函数

用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

事件绑定

事件是视图层到逻辑层的通讯方式，它可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id,dataset, touches。

在 JavaScript 文件中声明的变量和函数只在该 文件中有效；不同文件中可以声明相同名字的 变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要 全局的数据，可以在 App() 中设置。

可以将一些公共的代码抽离成为一个单独的 js 文件作为一个模块。模块通过 module.exports 或者 exports 对外暴露接口，在需要这些模块的文件中，使用 require(path) 将公共代码引入（path为相对 路径，暂时不支持绝对路径）。

wx:if

在框架中，使用 wx:if=“{{condition}}”，来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块，

block wx:if 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

数组当前项的下标变量默认为 index，数组当前项的变量名默认为 item。使用 wx:for-item 和wx:for-index可以指定数组当前元素和元素下标。可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。

如果列表元素位置会动态改变或者有新的元素添加，并且希望列表中的项目保持自己的特征和状态，就需要使用 wx:key 来指定列表中元素的唯一标识符。

当 wx:for 的值为字符串时，会将字符串解析成字符数组。例如：<view wx:for="array">等同于<view wx:for="{{['a','r','r','a','y']}}">

• 利用wx:for对数组、对象和字符串进行列表渲染的方法
• 利用wx:for-index和wx:for-item修改数组默认下标index 和默认数组元素item 的方法
• 在block标签中使用wx:for对多节点结构块进行列表渲染的方法

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方引用。

定义模板时，使用 name 属性指定模板的名字；引用模板时，使用 is 属性指定引用的模板，并通过 data 属性传入模板数据。

利用import可以引用目标文件中定义的template，import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template.

利用include引用文件

WXML 提供两种文件引用方式：import和include。import只能引用文件中的template，而通过include 可以引用文件中除了<template/> 和<wxs/>之外的整个代码，相当于将目标文件中的代码拷贝到 include 位置。