第一章 小程序云开发的目录结构
一、目录结构（云开发环境下，小程序的前端和后端代码均在一个目录下）
（1）cloudfunctions文件夹云开发环境下的后端代码，‘|’竖线后为云环境的名称。
（2）miniprogram文件夹云开发环境下的前端代码
（3）README文件README.md，自述文件，使用Markdown语法书写的项目描述
（4）开发工具配置project.config.json，开发工具在创建项目时自动创建的关于小程序项目的配置，例如是否使用云开发、项目名称、appid和编译配置等。
（5）utils文件夹:通常仅有一个js文件，用于存放公共的js代码，方便在不同页面调用。
（6）images文件夹:通常手动创建，用于存放小程序使用到的全部静态图片。
（7）sitemap.json: sitemap配置，用来配置小程序及其页面是否允许被微信索引。
二、代码文件类型（在一个小程序中，一共有四种类型的文件）
（1）.json：用于描述页面的配置。
（2）wxml：用于描述页面的结构。
（3）wxss：用于描述页面的样子。
（4）.js：用来处理页面和用户的交互。
三、.json配置
1、配置作用
. json是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
.json文件的内容都是一个json对象，被包裹在一个大括号中办，通过key-value的方式来表达数据。
需要注意的是:
. json的key必须包裹在一个双引号中
. json文件中无法使用注释
2、app.json（全局配置）
（1）作用
小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
（2）字段
pages字段:用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段:定义小程序所有页面的顶部背景颜色，文字颜色定义等。
（3）常见配置项
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持black/white |
| navigationBarTitleText | string | 导航栏标题文字内容 |
3、页面配置
（1）作用
每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置，进而独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。
（2）注意
页面配置的.json文件存放在页面文件夹中，例如“根目录/pages/index/index.json”文件描述了index页面的配置。
页面中配置项会覆盖app.json的 window 中相同的配置项。（更高优先级）
4、其他配置
（1）工具配置project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等，这些配置会保存在此文件中。
（2）sitemap配置sitemap.json：用于配置小程序及其页面是否允许被微信索引。
第二章 小程序语法
一、wxml语法（wxml：WeiXin Markup Language）
1、基础知识
（1）什么是wxml？
是从HTML (HyperText Markup Language)衍生而来的一种专门在小程序前端页面使用的语言，这是一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
因此，wxml与HTML一样，都是使用标记标签来描述页面结构，页面内容写在标签内部，标签由尖括号包围的关键词构成，可以分为两类。
（2）什么是组件？
组件是视图层的基本组成单元。组件自带一些功能与微信风格一致的样式。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
每一种组件都有一种“独特”的功能，编写wxml的第一步就是选择合适的组件。
2、常用组件和属性
（1）通用属性
| 属性名 | 类型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 组件的唯一标识 | 保持整个页面唯一 |
| class | String | 组件的样式类 | 在对应的wxss中定义的样式类 |
| style | String | 组建的内联样式 | 可以动态设置的内联样式 |
| hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
| data-* | Any | 自定义属性 | 组件上触发事件时，会发送给事件处理函数 |
| bind*/catch* | EventHandler | 组件的事件响应 | 详见事件 |
（2）视图容器view ：这里是内容
作用：相当于一个盒子，使得页面更加整齐有序。
注意：标签内部可以是组件也可以是文本内容。
常用属性：class和style。
（3）文本组件text ：<text class= "mytext”>今天天气真好</ text >
作用：展示文字文本，是一种基础组件。
常用属性： class和style。
（4）媒体组件
图片image ：<image class= "myview" src= "logo.png">
作用：在页面中显示一张图片。
注意：支持JPG、PNG、SVG、WEBP、GIF等格式，2.3.0起支持云文件lD。
常用属性：class和style。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图片资源地址 | 1.0.0 | |
| mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
（5）表单组件
按钮button ：<button class= "myview" type= "default" bindtap= "action”>
这里是一个按钮
</ button >
作用：在页面中显示一个按钮。
常用属性：class和style。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| size | string | default | 否 | 按钮大小 | 1.0.0 |
| type | string | default | 否 | 按钮的样式类型 | 1.0.0 |
| disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
| open-type | string | 否 | 微信开放能力 | 1.0.0 |
输入框input ：<input class= "myview"value=“初始内容”type= “text" placeholder=“请在此输入”> </ input >
作用：在页面中显示一个输入框。
常用属性：class和style。
| 属性 | 说明 | 属性 | 说明 |
|---|---|---|---|
| value | 输入框的初识内容 | placeholder-style | 指定placeholder的样式 |
| type | input类型 | placeholder-class | 指定placeholder的样式类 |
| password | 是否时密码类型 | disabled | 是否禁用 |
| placeholder | 输入框为空时的占位符 | maxlength | 最大输入长度，设置为-1的时候不限制最大长度 |
二、数据绑定和渲染
1、什么是数据绑定？
通过{{}}的语法把一个变量绑定到界面上
2、如何使用数据绑定
（1）使用方法
wxml文件：在标签内容或者属性中使用{{变量名}}
js文件：对该变量进行定义
当wxml在加载组件及组件的属性时，会自动将该格式下的变量名拿到js文件中寻找，并将数据值渲染到页面上。
（2）使用位置
内容：{{imessage }}
组件属性(需要在双引号之内)：
控制属性(需要在双引号之内)：
关键字(需要在双引号之内)：</ checkbox>，注意：这里的true和false并不代表变量，而是boolean类型，表示真值和假值。
（3）可以进行简单运算
三元运算：Hidden
算数运算：{{a + b}}+ {{c}} + d，注意：这里的加号并非运算符而是字符串，若a=1，b=2，c=3，d=4则最终显示3+3+d，逻辑判断、字符串运算、数据路径运算等，也可以在双重花括号内直接进行组合，构成新的对象或者数组。
3、渲染
（1）列表渲染（wx:for=””）
在组件上使用wx :for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
（2）条件渲染（wx:if=””）
在框架中，使用wx:if="{{condition}}”来判断是否需要渲染该代码块：
true
也可以用wx:elif 和wx:else来添加一个else块:
<view wx : if="{{length > 5}}">1
<view wx :elif="{{length > 2}}">2
<view wx :else>3
如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用wx :if控制属性。
`<`block wx :if="{{true}}">
`<`view>view1</view>
`<`view>view2< /view>
`</`block>
三、事件响应
1、什么是事件
事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id, dataset, touches。
2、处理事件响应步骤
（1）第一步：在组件中绑定一个事件处理函数。
将点击事件绑定在组件上的方法：使用bindtap属性，属性值为js中的事件处理函数的函数名。
<view id="tapTest" data-hi="weChat" bindtap="tapName ">Click me!
（2）第二步：在相应的定义中写上相应的事件处理函数，参数是event。
对于点击事件，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
3、通过事件响应在视图层获取数据
通过事件响应可以在逻辑层(js)中获取到视图层(wxml)中的数据。
获取方式：对任意一个组件使用id属性和data-属性，同时绑定事件响应（如bindtap)即可，绑定什么变量名就获取什么变量名。
获取绑定的data数据wxml组件绑定方式：data-变量名，例如data-x，获取到的变量名为x，可以对一个组件设置多个data-xxx例如:
<view id="tapTest" data-hil"weChat" bindtap="tapName">Click me !
在页面对应的js文件中编写事件响应的函数
四、视图层数据更新
1、this关键字
（1）this关键字：表示当前对象的一个引用。
（2）使用方法
我们可以使用this来访问页面的数据或者调用页面内的函数，例如，访问页面的数据：this.data.xxx，(这里的data是我们在页面中定义的页面初始数据那一部分)
调用页面内的函数：this.onload()(这里的onLoad是我们在页面中定义的函数的函数名称)（3）注意
如果我们在API中使用this，其将不会指向页面，无法访问页面数据及函数。需要我们在调用API之前暂存当时指向页面的this，例如：var that = this。
this不是固定不变的，它会随着执行环境的改变而改变。
在小程序中，我们在js文件的任何位置都可以将this当作变量使用。当我们在某个位置使用时，其所指向的对象往往是上一层对象。
五、数据传递
1、全局数据
（1）全局数据在哪？——在app.js文件中:
App({
globalData: {
userInfo: null
}
})
（2）全局数据的读写——getAPP()：该方法指向了该小程序下的app.js文件
2、页面之间传递
1、页面之间传递数据的方法
（1）通过全局数据：将数据保存在全局数据中，每个页面再从全局数据中读取。
（2）通过URL传递：通过页面跳转过程中携带参数。
（3）通过页面间事件通信通道(EventChannel)传递参数
