第二章总结

2.1 小程序的基本目录

项目主目录有两个子目录分别为

1. pages:存放所有页面相关文件 2.utils：工具包

和四个文件：

1. app.js：小程序逻辑文件
2. app.json：小程序公共设置文件
3. app.wxss：小程序主样式表文件
4. project.config.json

2.1.1 页面文件

.js文件 页面逻辑文件 ：在该文件中编写JavaScript代码控制页面的逻辑。

.wxml文件 页面结构文件：用于设计页面的布局，数据绑定等。

.wxss文件 页面样式表文件：用于定义本页面中用到的各类样式表。

.json文件 页面配置文件

2.2 小程序的开发框架

小程序MINA框架将整个系统划分视图层和逻辑层。

1. 视图层：由框架设计的标签语言WXML（WeiXin MarkKup Language）和用于描述WXML组件样式的WXSS（WeiＸin　Style　Sheets）组成。
2. 逻辑层：是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据，页面交互处理逻辑都在逻辑层中实现。
3. 数据层：数据层在逻辑上包括页面临时数据或缓存，文件储存（本地储存）和网络存储与调用。

2.3 全局配置文件

1.pages配置项接受一个数组，用于指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的"路径"+文件名。pages项是必填项。

设置pages配置项，应注意以下3项

• 数组的第一项用于设定小程序的初始页面。
• 在小程序中新增或减少页面，都需要对数组进行修改。
• 文件名不需要写文件扩展名。

例如，app.json文件的配置如下

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

2.window配置项

window配置项负责设置小程序状态栏，导航栏，标题，窗口背景色等系统样式。

 在app.json中window配置项：

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

    
  },

3.tabBar配置项

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

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

4.networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。networkTime可以配置的属性如下：

5.debug配置项

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

2.3.1页面配置文件

页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window配置项的的配置值。内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)中页面中的window配置只需书写配置项，不必书写window，代码示例如下:

}
"navigationBarBackgroundColor":"#ffffff"，
"navigationBarTextStyle": "black",
"navigationBarTitleText":"页面 window配置演示"，
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light
}

2.4逻辑层文件

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

 

​
App({
  onLaunch:function(){
    console.log("小程序初始化完成")
  },
  onShow:function(options){
    console.log("小程序显示");
    console.log(this.data);
    console.log(this.fun);
  },
  onHide:function(){
console.log("小程序进入后台")
  },
  onError:function(msg){
  },
  fun:function(){
    console.log("在app.js中定义的方法")

  },
  data:'app.js中定义的属性'
})

​

 2.页面逻辑文件

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

 2.5页面结构文件

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

2.5.1数据绑定 

     小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法(IF)将变量或运算规则包起来。

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

[注意]
简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。  

     2.运算在{{}}内可以做一些简单的运算（主要有算数运算，逻辑运算，三元运算，字符串运算）

这些运算均符合JavaScript运算规则。

<view>算术运算:{{age+num}}</view>
<view> 逻辑运算：{{age==40}}</view>
<view>三元运算：{{age ==1 ? 3 :num }}</view>

2.5.2条件数据绑定 

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

1.wx:if条件数据绑定

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

<view wx:if ="{{conditon|}">内容</view>	

在以上代码中，当condition变量的值为true时，view组件将数据绑定输出相关内容;当 condition 变量的值为false时，view组件将不数据绑定。当需要添加多个分支块时，可以使用wx:elif、wx:else 属性。当控制表达式为true时，数据绑定一个分支;当控制表达式为false时，数据绑定另一个分支 。

<view wx:if ="{{x>0}}">1</view >
<view wx:elif="{{x==0}|">0</view >
<view wx:else > -1</view >

2.5.3列表数据绑定

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

1.wx:for

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

students:[
      {nickname:"tom",height:180,weight:150},
      {nickname:"anan",height:150,weight:100}

    ]

2.block wx:for

与block wx:if类似，在wxml中也可以使用<block >包装多个组件进行列表数据绑定。例如，上面的代码可以被修改为以下形式，效果不变:

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

2.5.4模板

1.定义模板

模板代码由wxml组成，因此其定义也是在wxml文件中，定义模板的格式为：

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

  2.模板调用

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