第二章总结

pages，是页面文件，是管理所有页面的一个文件夹，如果要创建一个新的页面就需要创建一个新的文件夹。

utile,是工具包文件，pages里面的所有页面都可以使用utile里面的工具。

app.js小程序逻辑文件主要用来注册小程序全局，该文件在项目里面必不可少。

app.wxml是页面结构文件，用于页面设计的布局数据绑定，该文件在项目里面必不可少。

app.wxss 小程序主要样式文件，在主样式文件设置样式，中其他界面同样有效。不是项目必不可少的。

.js文件 页面逻辑文件，在该文件中编写javaScript代码控制页面的逻辑，是必不可少的。wxml 文件页面结构文件，用于设计页面的布局、数据绑定等，尖似中的.html文件。该文件在页面中不可缺少。
.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wes中的样式规则；否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少。
json文件页面配置文件，该文件在页面中不可缺少。

视图层
 MINA框架的视图层由言WXML与WXSS 编写。视图层就是所有wxml文件与.wxss 文件的集合 wxml 文件用于描述页面的结构，wxss文件用于描述页面的样式。

逻辑层
逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合
微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

数据层
书籍层不是单独存在数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。

1.页面临时数据或缓存
在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的件的 this.data的值。
setData()函数的参数接收一个对象，以(key，value)的形式表示将key在this. data中对应的值改变成value。
2.文件存储(本地存储)
使用数据API接口，如下：
wx.getStorage 获取本地数据缓存。
wx. setStorage设置本地数据缓存。
wx. clearStorage清理本地数据缓存
3. 网络存储与调用
启动的 上传或下载文件API接口，如下：
wx.request 发起网络请求。
wx. uploadFile 上传文件。
wx.downloadFile 下载文件。
调用URL的API接口，如下：
wx. navigateTo新窗口打开页面。
wx. redirectTo原窗口打开页面。

创建一个小程序页面 

Page({
 
})

强 zcxcsfx mgndanbfdZb sB cd bFDB FD

{
  
}

{
  "pages": [
    "pages/yang/yang",
    "pages/logs/logs"
  ]

window配置项及描述

对象	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景色
navigationBarTextStyle	String	white	导航栏标题颜色只支持white/black
navigationBartitleText	String	-	导航栏标题文字内容
BackgroundColor	HexColor	#ffffff	下拉刷新窗口背景色
backgroundTextStyle	String	dark	下拉背景字体，只支持dark/light
enablePullDownDownRefresh	Boolean	false	是否开启下拉刷新

{
  "pages": [
    "pages/yang/yang",
    "pages/logs/logs"
  ],
 "window": {
   "navigationBarBackgroundColor": "#fff",
   "navigationBarTextStyle":"black",
   "navigationBarTitleText": "洋",
   "backgroundColor": "#ccc",
   "backgroundTextStyle":"light"
 },
 "tabBar": {
   "color": "#000000",
   "selectedColor": "#ff0000",
   "borderStyle":"black",
   "backgroundColor": "#ffffff",
   "list": [{
     "pagePath": "pages/yang/yang",
     "iconPath": "images/ee.png",
     "selectedIconPath": "images/aa.png",
     "text": "不知道"
   },
   {
    "pagePath": "pages/logs/logs",
    "iconpath": "images/aa.png",
    "selectedIconPath": "images/ee.png",
    "text": "不知"
   }
   ]
 }
}

tabBar配置项及描述，及tabBar中list选项

对象	类型	是否 必填	描述
color	HexColor	是	标签页上的文字默认颜色
selectedColor	HexColor	是	标签页上的文字被选中时呈现的颜色
backgroundColor	HexColor	是	标签页的背景色
borderStyle	String	否	标签条之上的框线颜色只支持black/white,默认为black
list	Array	是	标签页列表，支持2-5个标签页
pagePath	String	是	页面路径，必须在pages中定义
text	String	是	标签页上按钮
iconPath	String	是	标签上图标的图片路径，图标的图片大小限制在40KB以内
selectedIconPath	String	是	标签被选中时图标的图片路径，图标的图片大小限制在40KB以内

App({
 onLaunch(){
   console.log("小程序初始化");
   },
   onShow(){
     console.log("小程序启动");
   },
   onHude(){
     console.log("小程序隐藏");
   }  
})

项目逻辑文件 配置项

参数	类型	描述
onLaunch	Function	当小程序初始化完成时，自动触发onLaunch，只触发一次
onShow	Function	当小程序启动（或从后台进入前台显示）时，自动触发onShow
onHide	Function	当小程序从前台进入后台自动触发onHide

/*yang.js代码*/
Page({
  data:{
    name:"1wk",
    age:30,
    birthday:[{year:1988},{month:11},{date:18}]  ,
    odject:{hobby:"computer"}
  }
 
})

yang.wxml代码
<view>姓名:{{name}}</view>>
<view>年龄：{{age}}</view>>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>>
<view>爱好：{{object.hobby}}</view>>

页面逻辑文件配置项

参数	类型	描述
data	Object	页面初始数据
onLoad	Function	页面的生命周期函数，用于监听页面加载
onReady	Function	页面生命周期函数，用于监听页面初次数据绑定完成
onShow	Function	页面生命周期函数，用于监听页面显示
onHide	Function	页面生命周期函数
onUnload	Function	页面生命周期函数，用于监听页面隐藏
onPullDownRefreash	Function	监听用户下拉动作
onReachBottom	Function	页面上拉触动事件的处理函数
其他	Any	自定义函数或数据，用this可以访问

networkTimeout配置项

 运算

在{{}}内可以做一些简单的运算（主要有算术运算，逻辑运算，三元运算，字符串运算等）这些运算都符合JavaScript运算规则

 代码演示

<view>算术运算:{{dr+date}}</view>> 
<view>逻辑运算:{{age==50}}</view>>
<view>三元运算：{{1==0 ?'happy':'sao'}}</view>>

1.定义模板 

模板代码由wxml组成

代码展示

<template name="stu">

</template>>

调用代码

将模板定义后就可以调用

代码演示

<template is="stu" data="{{students}}"></template>>

效果图

冒泡事件是和非冒泡事件

冒泡数据是指某个组件的事件被触发事件会向父级元素传递一直到页面顶级元素

非冒泡元素是指某个组件的事件被触发后不会向父节点传递

冒泡事件

wxss常用属性