第二章总结

小程序的基本目录结构

主体文件

 pages：目录中又2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。

utils：目录用来存放一些公共的.js文件。

app.js：小程序逻辑文件，主要用来注册小程序全局实例。

app.json：小程序公共设置文件，配置小程序全局设置。

app.wxss：小程序住样式表文件，类似HTML的.css文件。

页面文件

index.json：页面配置文件。

index.ts/js：页面逻辑文件，用控制代码逻辑。

index.wxml：页面结构文件，用来设置布局。

index.wxss：页面样式文件，用来调整页面样式。

小程序的开发框架

视图层：(wxml（结构)、wxss（样式）)这俩文件决定了看到什么东西，看到这东西长啥样。

逻辑层：用于处理事务逻辑。对小程序而言逻辑层就是所有.js脚本文件的集合。

数据层：1.页面临时数据或缓存        2.文件存储（本地存储）        3.网络存储与调用

创建小程序页面

新建文件

设置文件名字并创建相应文件

.js文件：

Page({
  
})

注：这里“P”为大写

.json文件：

{
  
}

.wxml文件：输入任意文字即可

.wxss文件：暂时为空

app.json文件：

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

输入 "pages/ohhhh/ohhhh",

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

配置文件

                                                                1.pages配置项:

 2.window配置项:

 3.tabBar配置项:

                                                                3.1.tabBar中list选项

                                                        4.networkTimeout配置项:

5.debug配置项:dobug配置用于开启开发者工具的调试模式，默认为false。

逻辑层文件

项目逻辑文件

项目逻辑文件app.js中可以通过App（）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp（）获取 

项目逻辑文件配置项

页面逻辑文件

页面逻辑文件的主要功能有：

1.设置初始数据；

2.定义当前页面的生命周期函数；

3.定义事件处理函数；

4.使用setData更新数据

页面逻辑文件配置项

页面结构文件

数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。

1.简单绑定：

简单绑定是指使用双大括号（ { { } } ）将变量包起来，在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。

//wxml
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
//js
Page({
  data:{
    name:'原神大王',
    age:3,
    birthday:[{year:2021},{month:12},{date:12}],
})

2.运算：

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

//wxml
<view>算术运算：{{age+num}}</view>
<view>逻辑运算：{{age==3}}</view>
<veiw>三元运算：{{age == 6 ? 'happy' : 'sad'}}</veiw>
//js
Page({
  data:{
    name:'原神大王',
    age:3,
    birthday:[{year:2021},{month:12},{date:12}],
    num:100
})

条件数据绑定

1.wx:if条件数据绑定

<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==10}}">0</view>
<view wx:else="">-1</view>

2.block wx:if条件数据绑定

当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx：if属性即可

<block wx:for="{{student}}">
<view>
<text>{{index}}</text>
<text>{{item.name}}</text>
<text>{{item.age}}</text>
<text>{{item.hobby}}</text>
</view>
</block>

列表数据绑定

1.wx:for

在组件上，可以使用wx：for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件下

//js
 students:[
      {nickname:"Tom",height:180,weight:150},
      {nickname:"Anmi",height:160,weight:100},
]

//wxml
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>

2.bolck wx:for

与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。

模板

1.定义模板

<template name="模板名">
</template>

2.调用模板

//wxml
<template name="nmd">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="nmd" data="{{students}}"></template>

引用页面文件

 1.import方式：

//a.wxml
<template name="item">
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</template>

//b.wxml
<import src="a.wxml"/>
<template is="item" data="{{student}}"/>

2.include方式

//aa.wxml
<text>{{item.name}}</text>
<text>{{item.age}}</text>

//bb.wxml
<include src="aa.wxml"/>
<text>{{item.hobby}}</text>

页面事件

1.定义事件函数       在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。

2.调用事件        调用事件也被称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。

3.冒泡事件        冒泡事件是指吗某个组件上的事件被触发后，事件会向父元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。

4.非冒泡事件        非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。在wxml中，冒泡事件有6个：

页面样式文件

1.尺寸单位        2.样式导入        3.选择器       

4.wxss常用属性：