一.什么是微信小程序?
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
二.微信小程序与传统页面的比较
| - | 微信小程序 | 传统web |
|---|---|---|
| 结构 | WXML | HTML |
| 样式 | WXSS | css |
| 逻辑 | JavaScript | JavaScript |
| 配置 | JSON |
由于网页开发渲染线程和脚本线程是互斥的，所以长时间的脚本运行可能会导致页面失去响应；而在小程序中，二者是分开的，分别运行在不同的线程中。
网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。前端开发非常熟悉的一些库，例如 jQuery、 Zepto,一些 NPM 的包在小程序中都无法运行。
三.小程序的代码构成
初始化小程序时，页面配置如下:
-
page
index index.js index.json index.wxml index.wxss logs logs.js logs.json logs.wxml logs.wxss -
utils
-
app.js
-
app.json
-
app.wxss
-
project.config.json
-
sitemap.json
A.json文件
内容补充:JSON 语法
JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中。
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错。
- 数字，包含浮点数和整数
- 字符串，需要包裹在双引号中
- Bool值，true 或者 false
- 数组，需要包裹在方括号中 []
- 对象，需要包裹在大括号中 {}
- Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错
全局配置文件:app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。文件内容为一个 JSON 对象。
app.json初始化时是这样的:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}(1)app.json中的全局配置字段—pages字段:
用于描述当前小程序所有页面路径。
写pages时要这样写:"pages/index/index"省略.html后缀。
(2)app.json中的全局配置字段—windows字段:
定义小程序所有页面的顶部背景颜色，文字颜色定义等。
解释：常用属性如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | string | black | 导航栏标题颜色，颜色值只能为black / white |
| navigationBarTitleText | string | 导航栏标题文字内容 | |
| backgroundTextStyle | string | dark | 下拉刷新时 loading 的样式，颜色值只能为 dark / light |
| backgroundColor | HexColor | #ffffff | 下拉刷新时窗口的背景色 |
| enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新 |
(3)app.json中的全局配置字段----tabBar字段:
底部如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
- 基本属性
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色，仅支持十六进制颜色 | |
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色，仅支持十六进制颜色 | |
| backgroundColor | HexColor | 是 | tab 的背景色，仅支持十六进制颜色 | |
| list | Array | 是 | tab 的列表，最少 2 个、最多 5 个 tab | |
| position | string | 否 | bottom | tabBar 的位置，仅支持 bottom / top |
- list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | string | 是 | 页面路径，必须在 pages 中先定义 |
| text | string | 是 | tab 上按钮文字 |
| iconPath | string | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。 |
| selectedIconPath | string | 否 | 被选中时的图片路径，限制同上 |
- 举个例子：
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"icon/home.png",
"selectedIconPath":"icon/_home.png"
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath":"icon/mine.png",
"selectedIconPath":"icon/mine.png"
}],
"color":"#fff",
"selectedColor":"#000",
"backgroundColor":"#f40",
"position":"bottom"
}页面配置文件:pages.json
这里的页面配置文件pages.json其实是用来表示页面目录pages下的.json文件这类和小程序页面有关的配置。
开发者可以独立定义页面的一些属性，如顶部颜色，是否允许下拉刷新等。
页面的配置只能设置app.json中的部分window配置项的内容，页面配置项会覆盖app.json中与windows相同的配置项。
sitemap 配置
用来配置小程序及其页面是否允许被微信索引。
B.WXML文件
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
内容补充:
view相当于web页面中的div,块级元素。
text相当于web页面中的span,行内元素。
语法:
数据绑定
<!--pages/index/index.wxml-->
<view> {
{
message}} </view>// pages/index/index.js
Page({
data: {
message: 'Hello MINA!'
}
})就可以实现WXML页面中message内容的显示。
注意：变量如果为一个对象时，必须具体到对象的属性上，否则将整个对象在WXML页面中输出值错误。
运算
在花括号中可以进行数字操作
列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
举个例子:
<view wx:for="{
{array}}">
{
{
index}}: {
{
item.message}}
</view>注意事项：
1.标准写法为:wx: for="{
{数组或对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"。虽然默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item,但若有多层for嵌套循环，就会出现循环项和循环项的索引重命的问题，使页面呈现结果出错。因此必须注意，不要使它们重名。
2.只有当for循环仅有一层时，wx:for-item="循环项的名称" wx:for-index="循环项的索引"才可以省略。
3.wx:key="唯一值"用来提高列表渲染的性能。
（1）wx:key绑定的是一个普通的字符串，这个字符串的名称必然要为循环数组中的对象的唯一属性。
（2）wx:key="*this"就表示数组是一个普通数组(形如:[1,2,3,44,6,9,11])时，“*this”表示的就是循环项。
4.如果是对象循环，则标准格式为:wx:for="{
{对象}}" wx:for-item="{
{对象的属性值}}" wx:for-index="{
{对象的属性名}}"
条件渲染
wx:if
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块。
举个例子:
<view wx:if="{
{condition}}"> True </view>或者这样:
<view wx:if="{
{length > 5}}"> 1 </view>
<view wx:elif="{
{length > 2}}"> 2 </view>
<view wx:else> 3 </view>补充知识:
(1)block标签
它并不是一个组件，它仅仅是一个包装元素，是一个起到占位符作用的标签。只接受控制属性。
在写代码时可以看到该标签的存在，但在页面进行渲染时，小程序会把它移除掉。
举个例子:
//WXML
<block wx:if="{
{true}}">
<view> view1 </view>
<view> view2 </view>
</block>(2)hidden属性
隐藏代码块的功能
可以在标签中直接加入属性hidden或者hidden="{
{true}}"
(3)wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
而hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。
因此，如果需要频繁切换的情景下，用 hidden 更好；
如果在运行时条件不大可能改变则 wx:if 较好。
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
- 定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段，如:
//A.WXML
<template name="msgItem">
<view>
<text> {
{
msg}} </text>
</view>
</template>- 使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
//B.WXML
<template is="msgItem" data="{
{msg:'this is a template'}}"/>引用
WXML 提供两种文件引用方式import和include。
- import可以在该文件中使用目标文件定义的template，如:
//B.WXML
<import src="A.wxml"/>- include 可以将目标文件除了
<template/> <wxs/>外的整个代码引入，相当于是拷贝到 include 位置，如：
//B.WXML
<include src="A.wxml"/>C.事件
视图层为WXML,WXSS。逻辑层为JS。
1.什么是事件?
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。
2.事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
3.事件类别
- 点击事件: tap
- 长按事件: longtap
- 触摸事件:touchstart，touchend，touchmove，touchcancel（代表触摸事件被打断，并非自己取消了。)
- 其它: submit，input…
4.事件的绑定
- bind
举个例子
//A.WXML
<view bindtap="handleTap">
Click here!
</view>//A.js
Page({
handleTap： function(){
console.log(""这是一个测试");
}
})- catch
解除了当前绑定事件的冒泡效果
只是将bindtap="handleTap"换成了catchtap="handleTap"便可正常运行。
5.事件对象
事件对象e中的currentTarget中代表的是当前发生效果的组件，
target则代表产生事件的组件。两者含义并不一致。
注意：无法在小程序当中的事件中直接传参，要通过自定义属性的方式来传递参数，然后从事件源对象e中获取自定义属性。