第二章总结

小程序的基本目录结构

主体文件

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

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

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

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

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

页面文件

index.json：页面配置文件。

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

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

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

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

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

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

创建小程序页面

新建文件

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

配置文件
1.pages配置项：pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages配置项是必填项。设置pages配置项时，应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json 、.wxml 和.wxss文件进行整合数据绑定。

 app.json配置:

{
"pages":[
"pages /news /news " ,
"pages/index/index"
]
}

2.window配置项:

在app.json中设置window配置项

"window":{
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText":"小程序window功能演示",
    "backgroundColor":"#ccc",
    "backgroundTextStyle":"light"
  }

3.tabBar配置项:

3.1.tabBar中list选项：

在app.json中设置tabBar配置项：

"tabBar": {
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "text",
      "iconPath": "images/pp1.jpg",
      "selectedIconPath": "images/pp1.jpg"
    },{
      "pagePath": "pages/news/news",
      "text": "text",
      "iconPath": "images/pp2.jpg",
      "selectedIconPath": "images/pp2.jpg"
    }
  ]
  }
}

4.networkTimeout配置项：

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

逻辑层文件

项目逻辑文件

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

项目逻辑文件配置项：

页面逻辑文件

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

1.设置初始数据；

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

3.定义事件处理函数；

4.使用setData更新数据

页面逻辑文件配置项：

页面结构文件

数据绑定

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

1.简单绑定：

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

news.wxml文件

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

news.js文件

Page({
data:{
  name:"小陈",
  age:"4",
  birthday:[{year:2020},{month:1},{date:18}],
  object:{hobby:"computer"},
  num:100,
  students:[
        {nickname:"小明",height:180,weight:150},
        {nickname:"小红",height:160, weight:100}
      ]
}
})

2.运算：

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

 <view>算术运算:{{age+num}}</view>
    <view>逻辑运算:{{age==40}}</view>
    <view>三元运算:{{age==30?'happy':'nohappy'}}</view>

条件数据绑定

1.wx:if条件数据绑定：

    <view wx:if="{{age>40}}">1</view>
    <view wx:elif="{{age==40}}">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:"小明",height:180,weight:150},
        {nickname:"小红",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个：

页面样式文件

页面样式文件（WXSS）是基于CSS拓展的样式语言，用于描述WXML的组成样式，定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩和修改。

wxss常用属性：