微信小程序开发-总结2

app.json配置文件的作用：

　　用来对微信小程序进行全局配置，它决定了页面文件的路径，窗口表现，设施网络超时时间，设置多teb等。

　　在app.json配置文件中，最主要的配置节点是：

　　1. pages 数组：配置小程序的页面路径

　　　　用来指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息

　　　　文件名不需要写文件后缀，框架会自动取寻找对应位置的.json  .js   .wxml  .wxss 四个文件进行处理

　　　　注意：

　　　　　　1.数组的第一项代表小程序的初始页面（首页）。

　　　　　　2.小程序中新增/减少页面，都需要对pages数组进行修改。

　　2. window 对象：用于设置小程序的状态栏，导航条，标题，窗口背景色

　　　　window节点常用的配置项：

　　　　

 

 

 　　　　关于下拉刷新：enablePullDownRefresh

　　　　　

 

 

 　　　　　　效果：

　　　　　　

 

　

 

　　3. tabBar 对象：配置小程序的tab栏效果

　　　　是移动端应用常见的页面效果，用于实现多页面的快速切换；　　

　　　　小程序中通常将其分为底部tabBar和顶部tabBar；

　　　　注意：tabBar中，只能配置最少两个，最多五个tab标签，当渲染顶部tabBar的时候，不显示icon，只显示文本

 

　　　　tabBar的组成部分：↓

　　　　

　　　　

　　　　　iconPath/selectdIconPath：图片大小限制为40kb，建议为81px*81px，不支持网络图，当postion为top时，不显示icon

 

 

 　　　　　再加一个 list 属性，上面的的几个都不是必填的，只有list，text，pagePath是必填的。

　　　　　　list属性：tab的列表，详见list属性说明（最少2个，最多5个），类型是array；

　　　　　　pagePath属性：页面路径，必须在pages中先定义，类型是String；

　　　　　　text属性：tab上按钮文字，类型是String；

　　　　　　

页面级别和全局级别配置的关系：

　　app.json中的window节点，可以全局配置小程序中每个页面的窗口表现；

　　如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求。

　　总结：页面级别的配置优先于全局配置生效。

　　页面配置文件中可选的配置项列表：

　　

 

 　　

 

 

小程序的生命周期：

　　生命周期（Lift Cycle）是指：一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段。

　　　　在小程序中，包含两种类型的生命周期：

　　　　　1.应用生命周期：特指小程序从启动-> 运行 -> 销毁的过程；

　　　　　2.页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程；

　　　　其中，页面的生命周期范围较小，应用程序的生命周期范围较大。

　　生命周期函数：由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行；

　　　　生命周期函数的作用:允许在特定的生命周期时间点上，执行某些特定的操作。例如：页面刚加载的时候，在生命周期函数中自动发起数据请求，获取当前页面的数据；

　　

　　注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

 

　　生命周期函数的分类：

　　　1.应用生命周期函数

　　　　　　app.js是小程序执行的入口文件，在app.js中必须调用app()函数，app()函数是用来注册并执行小程序的。

　　　　　　app(Object)函数接受一个Object参数，可以通过这个Object参数，指定小程序的生命周期函数。

　　　　　　例：

　　　　　　

　　　2.页面生命周期函数

　　　　　　每个小程序页面，必须拥有自己的.js文件，且必须调用Page()函数，否则会报错。其中Page()函数用来注册小程序页面。

　　　　　　Page(Object)函数接受一个Object参数，可以通过这个object参数，指定页面的生命周期函数.

　　　　　　例:

　　　　　　

 

 

数据绑定

　　1.定义页面的数据

　　　　.js文件内可以定义页面的数据,生命周期函数,其他业务逻辑;

　　　　如果要在.js文件内定义的数据,只需把数据定义到data节点下即可.

　　　　例:

　　　　

　　2.Mustache语法格式

　　　　把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可.

　　　　

 

 　　　　Mustache语法的主要应用场景: 

　　　　　　(1)绑定内容:

　　　　　　例:

　　　　　　

 

 

　　　　　　(2)绑定属性:

　　　　　　例:

　　　　　　

 

 

　　　　　　(3)运算(三元表达式,算术运算,逻辑判断,字符串运算,数据路径运算)

　　　　　　例:

　　　　　　

 

 

事件

　　事件是视图层到逻辑层的通讯方式.

　　事件可以将用户的行为反馈到逻辑层进行处理.

　　事件可以绑定在组件上,当组件触发事件,就会执行逻辑层中对应的事件处理函数.

　　事件可以携带格外信息,例如:id,dataset,touches(有几个手指触碰了组件)

 

　　bingtap绑定触摸事件:

　　在小程序中,不存在click点击事件,是通过tap事件来响应触摸行为的.

　　

 

 

　　bindinput绑定文本框输入事件:

　　

 

　　

　　data和文本框之间的数据同步:

　　　1.手动监听文本框输入事件,通过时间参宿event，能够访问到文本框的最新值：

　　　　例：

　　　　

　　　2.修改data中的数据，通过this.setData(dataObject)方法，可以给页面中的data数据重新赋值。

　　　　例：（监听文本框的数据变化并把最新的值赋值给data中的info，并渲染到文本框中）

　　　　.wxml中代码：

　　　

 

　　　　.js中代码：

 　　　　

 

 　　

　　事件传参：

 　　　　1.不能在绑定事件的同时传递参数

　　　　　例：（下面的代码不能正常执行）

　　　　　

 

　　　　　因为小程序会把bindtap后指定的值，统一当作事件名称来处理。

 　　　　2.通过data-* 自定义属性传参

　　　　　例：（传递参数）

　　　　　

　　　　　其中info会被当作参数名，数值123会被当作参数值

　　　　3.获取data-*自定义属性中传递的参数

　　　　　通过事件参数 event.target.dataset.参数名，能够获取data-*自定义属性传递到事件处理函数中的参数。

　　　　　例：