第二章总结

小程序的基本目录

pages文件夹：为页面文件夹，里面包含所有页面，每一个页面都有一个小文件夹
utils文件夹：工具包
app.js：逻辑文件，在编译时app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。
app.json：配置文件，用于配置小程序全局设置
app.wxss：样式文件，用于设置页面样式

小程序的开发框架：

视图层：

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：wxss文件用于描述页面的样式；wxml文件用于描述页面的样式。

逻辑层：

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

数据层：

数据层在逻辑上包括页面临时数据或缓存、文件储存（本地存储）和网络存储与调用。

配置文件

全局配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。

小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求API的超时时间值（netwoekTimeout）以及配置多个切换页（tabBar）等。

各全局配置的相关描述：

pages配置项

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

window配置项

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

window配置项及其描述：

tabBar配置项

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

tabBar配置项及其描述：

tabBar中list选项：

netwoekTimeout配置项

小程序中各种网络请求API的超时时间值只能通过netwoekTimeout配置项进行统一设置，不能在API中单独设置。

netwoekTimeout配置项属性

项目逻辑文件

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

App（）函数用于注册小程序，参数为Object，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如：

项目逻辑文件配置项：

页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。

页面逻辑文件配置项：

运行截图

运行代码

index.js

Page({
  data:{
    name:'lll',
    age:18,
      birthday:[{year: 2002 },{month: 2 },{date: 2 }],
      object:{hobby:'csgo'},
      num1:1,
      num2:2,
      students:[
        {nickname:'tom',height:170,weight:120},
        {nickname:'kary',height:166,weight:100}
      ]
    }
  })

index.json

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "页面配置演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

index.wxml

<view>姓名:{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好：{{object.hobby}}</view>
<view>算数运算:{{num1}} + {{num2}} = {{num1 + num2}} </view>
<view>逻辑运算 :{{num2 == 2 }} </view>
<view>三元运算{{num1>num2? 'num1>num2':'num1<num2'}}</view>
<block wx:for="{{students}}">
<view>
<text>姓名：{{item.nickname}}、</text>
<text>身高：{{item.height}}、</text>
<text>体重：{{item.weight}}</text>
</view>
</block>

app.js

App({
  //小程序初始化时执行
  onLaunch(){
    console.log("小程序初始化");
  },

  //小程序启动时执行
  onShow(){
    console.log("小程序启动");
  },

  //小程序隐藏时执行
  onHide(){
    console.log("小程序隐藏")
  }
})

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序功能演示",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
    "tabBar": {
      "color": "#66666",
      "selectedColor": "#ff0000",
      "borderStyle": "black",
      "backgroundColor": "#ffffff",
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/aaa.png",
        "selectedIconPath": "images/hhh.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/aaa.png",
        "selectedIconPath": "images/hhh.png",
        "text": "新闻"
      }]
  }
}