第二章总结

2.1小程序基本目录结构：

1.主题文件

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

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

app.wxss:小程序主样式表文件，类似HTM的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.页面文件

js：文件页面逻辑文件，在该文件中编写JavaScript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

wxm：文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面
中的:html文件。该文件在页面中不可缺少。

.wxss：文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。

json：文件页面配置文件。该文件在页面中不可缺少。

2.2小程序的开发框架：

1.视图层

对于微信小程序而言，视图层就是所有.wxml文件与.wxs文件的集合:.wxml文件用于描述页面的结构;wxss 文件用于描述页面的样式。

微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的，组件是视图的基本组成单元。

2.逻辑层

微信小程序开发框架的逻辑层是采用JavaScript编写的。在 JavaScript 的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括:
(1)增加app()和Page()方法，进行程序和页面的注册
(2)提供丰富的 API,如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的.is脚本文件来实现的。

3.数据层

1．页面临时数据或缓存 
在Page(）中，使用setData 函数将数据从逻辑层发送到视图层，同时改变对应的this. data 的值。
有．js 脚本文件的集合。
层的事件反馈。
setData(）函数的参数接收一个对象，以（key,value）的形式表示将key在this. data中对应的值改变成value。
cript的基础上，微信团
2．文件存储（本地存储）
使用数据API接口，如下：
 wx. getStorage 获取本地数据缓存。
 wx. setStorage 设置本地数据缓存。 wx. clearStorage 清理本地数据缓存。
并非运行在浏览器中，
t,window等。
3．网络存储与调用
件，并在小程序启动的
上传或下载文件API接口，如下： 

wx, request 发起网络请求。

wx. uploadFile 上传文件。 

wx. downloadFile 下载文件。

调用URL的API接口，如下：
 wx. navigateTo 新窗口打开页面。
wx. redirectTo 原窗口打开页面。

4.配置文件

                                                                  全局配置项

{
/设置页面路径
'pages ":[
/设置默认页面的窗口表现
"window":
/设置底部tab的表现
"tabBar":
/设置网络请求API的超时时间值
"networkTimeout":
/设置是否开启 debug 模式
"debug":false
}

1.pages配置项

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

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

2。window配置项及其描述

如图下所示

3.tabBar配置项

当需要再程序顶部或底部设置菜单栏时，可以通过tabBar配置项来实现。

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

tabBar配置项可以配置的属性如图所示

其中的list（列表）接受数值，数组中的每一项也都是一个对象。对象的数据值如图所示

{
"tabBar":
"Color":"#666666"
"selectedColor":"#ff0000""borderStyle"，"black""backgroundColor":"#ffffff""list":[
"pagePath":"pages/index/index""iconPath":"images/indexl .png","selectedIconPath":"images/index2 .png""teXt":"首页”
},
{
"pagePath":"pages hews hews"
"iconPath"::"images /hewsl.png"
"selectedIconPath":"images hews2 .png""teXt":"新闻"
}
]
}

4.networkTimeout配置项

{
"networkTimeout"，{
"request":20000,
connectSocket":20000"
"uploadFile":20000,
"downloadFile":20000
}
}

5.debug配置项

debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以imnfo的形式输出到Console(控制台)面板上。

页面配置文件

页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window 配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)中的配置值，

{
"navigationBarBackgroundColor" :"#ffff ff ""navigationBarTextStyle"，"black"
"navigationBarTitleText":"页面window 配置演示"
"backgroundColor"."#eeeeee"
"backgroundTextStyle"，"liqht"
}

逻辑层文件

1.项目逻辑文件

  项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
  App()函数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、用户自定义属性和方法，如图所示

2.页面逻辑文件

页面逻辑文件的主要功能有;设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM改变页面，只能采用数据绑定和事件响应来实现。

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示

1.设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data将会以JS0N(Javascript 0bject No-tation，JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)
视图层可以通过 WXML对数据进行绑定
数据初始、数据绑定及运行效果。

2.定义当前页面的生命周期函数
在Page()数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。
该函数的参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。

onShow页面数据绑定函数。当页面初次数据绑定完成时调用该函数。

页面结构文件

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class 等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法(1})将变量或列表数据绑定用于将列表中的各项数据进行重复数据绑定:

条件数据绑定

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

wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。

当condition变量的值为true时，view组件将数据绑定输出相关内容;当condition 变量的值为false时，view组件将不数据绑定。

当需要添加多个分支块时，可以使用wx:elif、wx:else属性。当控制表达式为true 时数据绑定一个分支;当控制表达式为false时，数据绑定另一个分支。

，当x的值大于0时，输出1;当x的值等于0时，输出0;否则，输出-1。

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

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

列表数据绑定

列表数据绑定用于将列表中的各项数据进行重复数据绑定。

1.wx:for

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

items为一个数组，数组当前项的下标变量名默认为index，项的变量名默认为item，

微信开发工具中提供了使用wx:for-index来重新指定数据当前项下标的变量名，使用wx:for-item来重新指定当前项的变量名。

2.block wx:for

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

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>算术运算：{{age + num}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算：{{age==40 ?'happy' : 'nohappy'}}
</view>
<view wx:if="age>40">1</view>
<view wx:elif="age==40">0</view>
<view wx:else>-1</view>
<block wx:for="{{index}}">
<view wx:for="{{students}}">
   <text>姓名：{{item.nickname}}</text>
   <text>身高：{{item.height}}</text>
   <text>体重：{{item.weight}}</text>
</view>
</block>
<template name="stu"> 
</template>
<template is="stu"data="{{stuent}}"/>

Page({
  data:{
  name:'谢炜亮',
  age:20,
  birthday:[{year:2004},{month:2},{date:1 }],//数组
  object:{hobby:'崩坏：星穹铁道'}
  },
  chtext:function(){
    this.set 
  },
  student:[
    {name:'Tom',age:15,hobby:'game'},
    {name:'Helen',age:14,hobby:'music'},
    {name:'Bob',age:16,habby:'basketball'}
  ]
  })

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

// app.js
App({onLaunch(){
  console.timeLog("微信小程序初始化");
},
onshow(){
  console.log("微信小程序启动");
},
onHide(){
  console.log("微信小程序隐藏");
},

})

{
  "pages": [
    "pages/new/new",
    "pages/logs/logs"
  ],
  "window":{
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText":"微信小程序",
    "backgroundColor":"#ccc",
    "backgroundTextStyle":"light"
  },
  "tabBar":{
  "color":"#666666",
  "selectedColor":"#ff0000",
  "borderStyle":"black",
  "backgroundColor":"#fffff£",
  "list":[
  {"pagePath":"pages/logs/logs",
  "iconPath":"images/AI.png",
  "selectedIconPath":"images/PS.png",
  "text":"首页"
  },
 { "pagePath":"pages/new/new",
  "iconPath":"images/AI.png",
  "selectedIconPath":"images/PS.png",
  "text":"新闻"
 }
],
 
  "style": "v2",
  "componentFramework":"glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
}