1、app.json是对整个小程序的全局配置。
2、app.wxss是整个小程序的公共样式表。
3、逻辑层:
App和Page方法：用于程序和页面注册
getApp和getCurrentPages方法：用于获取App实例和当前页面栈
API:微信提供了扫一扫，支付等微信功能
1）App()函数用来注册应用程序，通过传入一个对象参数来操作程序，参数说明：
onLaunch:程序初始化完成时触发
onShow:程序启动或由后台进入前台时触发
onHide:程序从前台进入后台时触发
onError：程序发生脚本错误时触发
其他：可以在对象内自定义数据或者方法应用于全局作用域中
2）getApp()函数是一个用于获取小程序实例的全局函数
3）Page()函数用于注册一个页面，传入一个对象作为参数，用于指定初始数据，生命周期函数等，参数说明：
data：页面初始数据
onLoad：页面加载时的生命周期函数
onReady:页面初次渲染完成的生命周期函数
onShow:页面显示
onHide：页面隐藏
onUnload：页面卸载
onShareAppMessage：右上角分享
其他：自定义函数（如事件响应函数等 ）
4）setData()用于将数据的改变及时通过到View层进行相应改变，同时改变对应的this.data值
注意：不能直接通过this.data来修改数据，这样会造成数据不一致的问题。
5）getCurrentPages()用于获取当前页面实例
4、微信小程序框架的视图层主要内容：WXML、WXSS，WXML，WXSS可以看成是HTML，CSS对应的结构，其写法也大致相同。
WXML是小程序框架实现的标签语言，有点像React的组件标签。其结合基础组件、事件系统，可以构建出页面的结构。
常用的几个标签如下：
1）数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: ’Hello World!’
}
})
如上： 在Page()内传入对象，并初始化数据data，设置了一个叫message的key，对应value值hello World。在对面的wxml页面中，使用view标签结合{{}}表达式的形式进行数据的渲染。
2）列表渲染 wx:for
<!--使用wx:for对列表进行遍历，得到的每一项为item-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
数据的初始化定义仍然在data中进行，页面中使用wx:for进行数据遍历，拿到每项item即为列表元素。这里的wx:for指令跟Vue的v-for指令相似
3）条件渲染 wx:if
<!--wxml-->
<view wx:if="{{view == ’WEBVIEW’}}"> WEBVIEW </view>
<view wx:elif="{{view == ’APP’}}"> APP </view>
<view wx:else="{{view == ’MINA’}}"> MINA </view>
// page.js
Page({
data: {
view: ’MINA’
}
})
如上：通过wx: 前缀结合js中类似的条件分支语句实现条件判断
4）模板 template
微信提供了template标签用于定义一个页面的部分组件模板，从而实现代码复用。通过name属性来设置template名字，在template内写wxml代码，从而实现模板的定义。
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
通过is属性来引用对应name的模板，数据的传入则使用data属性，数据写法类似于react的属性延展式写法。
<template is="msgItem" data="{{...item}}"/>
注意：属性都是要加“双引号”的，即使是表达式，数据如下：
Page({
data: {
item: {
index: 0,
msg: ’this is a template’,
time: ’2016-09-15’
}
}
})
5、事件机制
什么是事件？
1）事件是视图层到逻辑层的通讯方式。
2）事件可以将用户的行为反馈到逻辑层进行处理。
3）事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
4）事件对象可以携带额外信息，如 id, dataset, touches。
事件绑定：
在wxml的标签中进行事件绑定主要有两种方式：bind+事件名 或者 touch+事件名
1）bind
bind+事件名可以绑定一个事件处理函数，函数传入参数即为事件对象
示例：<view id="tapTest" data-say="hello" bindtap="showMe"> 点击输出 </view>
如上，通过bindtap，绑定一个触摸点击事件，tap为小程序封装的一个事件名。在Page函数的参数中，定义对应的事件响应函数，id，dataset，touches是事件对象携带的信息。
Page({
showMe: function(event) {
console.log(event)
}
})
事件对象event是小程序包装过的对象，其中常用的是currentTarget属性：dataset中存放了在标签中通过data-自定的属性值 key即为data-中*定义的内容，value即为对应的值，touches:中存放了事件触发的具体信息
2）catch
catch+事件名 ：是绑定事件的另一种方法
<view id="target1" catchTap="handleTap1">触摸事件</view>
Page({
handleTap1:function(e){
console.log(e)
}
})
3）catch和bind的区别
二者都用于绑定事件，但bind不能阻止事件冒泡，而catch方法可以阻止事件冒泡
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
冒泡事件：touchstart,touchmove,touchcancel,touchend,tap,longtap
4）事件对象
如上2：打印出的事件对象具有多个属性
type:事件类型，timeStamp：事件时间戳，target：事件源 currentTarget:事件绑定的组件
6、样式表wxss
6.1 引入模板：小程序提供了两个引入外部模板的方法：import和include，使用外部模板可以实现大部分共同页面的代码利用，在一个app中，头部和脚部基本不会 变动太大，这时就可以通过模板的方式引入，实现多个页面的复用。
1）import
示例：
<!--view.wxml-->
<template name="view">
<text>{{text}}</text>
</template>
引入：
<import src="view.wxml"/>
<template is="view" data="{{text: ’forbar’}}"/>
注意：import有作用域，即import引入的模板只在当前页面有效，即import不会向下查找另外的模板
2）include
include标签可以看作是对 “html”的一个拷贝，即将外部的wxml片段拷贝进文档中
示例：
外部wxml片段
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
引入：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
总结：import是引入模板片段，且有作用域限制，不能进行模板嵌套。include是引入wxml片段，相当于代码拷贝。
6.2 WXSS 微信样式表
小程序中，页面样式的渲染通过wxss文件实现，.wxss可以看成是css，因为它们都在实现相同的功能。实质上wxss也是在css的基础之上进行了扩充和修改得到的。wxss在css上的扩展特性：
1）尺寸单位：rpx
rpx：是一个相对像素单位，可以根据屏幕宽度进行自适应。
针对移动端的开发，设计稿一般都是以iphone6为标准的。而iphone用的是视网膜屏，即我们css中设定的1px，在iphone上实际是由2px*2px的像素点组成的。
以iphone6为准，屏幕宽度375px，共有750个物理像素，则750rpx=350px,即1rpx=0.5px
2）样式导入 @import
跟在css中的外部样式表的导入类似：@import "common.wxss";
7、组件
什么是组件？
1）组件是视图层的基本组成单元。
2）组件自带一些功能与微信风格的样式。
3）一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
注意：所有组件与属性都是小写，以连字符-连接
组件的属性：
所有组件都有如下的属性：id,class,style,hidden(组件是否显示)，data-（自定义属性），bind/catch*（事件绑定）。
小程序中，基础组件分为了七大类：视图容器、基础内容、表单组件、导航、多媒体、地图、画布、客服会话。
7.1 视图容器 view
view组件是很常用的一个标签
7.2 button组件
button组件在微信官方API中属性表单组件的一部分。通过小程序提供的样式属性就可以实现基本的按钮样式。
<button type="primary">点击我</button>
7.3 icon 列表
小程序中封装了一些常用的图标icon。有三个属性可以对icon样式进行设置：
> type:icon类型，有效值有success, success_no_circle, info, warn, waiting, cancel, download, search, clear
> size：单位px
> color:与css的color值一致
<view class="section">
<icon type="success"></icon>
<icon type="info"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
<icon type="cancel" bindtap="showme"></icon>
</view>
7.4 image组件
在小程序中，可以通过image组件的mode属性控制图片的显示。mode共有13种模式，其中有4种缩放模式，9种裁剪模式
1）、缩放模式（当图片宽高与设定的image宽高不一致时）
scaleToFill:不保持纵横比缩放图片，使图片拉伸至填满image元素
aspectFit:保持纵横比缩放，使长边完全填满图片
aspectFill：保持纵横比缩放，使短边完全显示出来
widthFix:宽度不变，高度自动变化，保持原图宽高比不变
2)、裁剪模式
当图片超出image设定的宽高时所做的处理
top:不缩放图片，只显示图片的顶部区域
bottom:不缩放图片，只显示图片的底部区域
center:不缩放图片，只显示图片的中间区域
left 不缩放图片，只显示图片的左边区域
right 不缩放图片，只显示图片的右边区域
<image src="/images/gsml.png" mode="aspectFill"></image>
<image src="{{imageUrl}}" mode="scaleToFill"></image>
8、数据绑定
在微信小程序中提供了类似于模板引擎的方法来实现数据的绑定。从而动态控制页面显示内容。
注意：这是单向数据绑定，即只能在js里来控制wxml里的数据，而不能通过视图层的数据变化来直接改变model层数据的变化。
1）数据绑定
在小程序中，通过{{}}将js中初始的数据绑定到视图中
1.1）简单绑定：
<!-- wxml -->
<view>{{msg}}</view>
<!-- js -->
Page({
data:{
msg:’hello world’
}
})
如上：在js中通过data属性进行数据的初始化，在wxml中通过{{}}表达式将数据绑定到视图
注意：
1、数据值作为组件（标签）的属性进行绑定时，要写在“双引号”之内
2、针对布尔值true,false要用表达式来写，例如checkbox的checked属性，不能直接写checked=”false”,这样计算出来的结果是字符串，转换来布尔值还是true，因此使用checked={{false}}来设置checkbox的是否选中属性
1.2）{{}}内的运算：
1.2.1）在{{}}内可以进行值的运算，包括算数运算，三元运算，字符串的运算，以即逻辑判断
1.2.2）{{}}内可以对数据进行组合，例如下面代码：
A、数组与属性的组合
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
<!-- js部分 -->
Page({
data: {
zero: 0
}
})
B、对象组合
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
<!-- js -->
Page({
data: {
a: 1,
b: 2
}
})
最终组合成的对象是 {for: 1, bar: 2}
2）条件渲染 wx:if
通过wf:if判断一个表达式的方式来控制标签的显示与否，wf:if添加在标签上，传入一个判断表达式，实现条件判断
例：如下简单示例,前两条都为false所以走else这条，最终页面只会显示3
<view wx:if="{{2> 5}}"> 1 </view>
<view wx:elif="{{1 > 2}}"> 2 </view>
<view wx:else> 3 </view>
进阶：因为 wx:if 是标签内的。但项目中经常需要判断的不是一个标签的显示与否，而是一块儿区域，这里可以通过标签将多个组件包装起来，在block标签中使用wx:if来控制元素的显示。
注意：并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
例：
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
3）列表渲染 wx:for
在组件上用wx:for使用数组中各项的数据重复渲染该组件。
3.1)默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
<view wx:for="{{array}}">{{index}} : {{item}}</view>
3.2)wx:for-item用于指定数组当前元素的变量名，wx:for-index用于指定数组当前下标的变量名：
3.3)wx:for可以进行嵌套使用
例：九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
进阶：使用标签包装多节点的结构
注意：在使用wx:for遍历数组时，会报一个需指定wx:key的警告，此警告的作用指当用户所遍历的数据是会动态改变的或者有新项目添加到列表中时，需要有一个key来与之前的数据做参考对比。
<block wx:for="{{arrs}}" wx:key="this">
<view> {{item}} </view>
</block>
<!-- js部分 -->
Page({
data:{
arrs:[1,2,3,4,5,6]
}
})
如上是一个简单的数据遍历示例，wx:key的值可以有两种形式：
A）就如上面一样用this，指带当前for循环中的item本身（即用item本身作为遍历的标识）
B）字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
4）模板template
定义模板：
<template name="tpl">
<view wx:for="{{user}}" wx:key="this">
姓名：{{item.name}} 年龄：{{item.age}}
</view>
</template>
<!-- 数据 -->
Page({
data:{
user:[
{ name:"小强", age:18 },
{ name:"小明", age:18 },
{ name:"小红", age:18 },
{ name:"小花", age:18 }
]
}
})
使用模板：
<template is="tpl" data="{{user}}" ></template>
补充：运算符{{…object}}可以将object展开传入到视图中进行渲染。