第二章总结

1.小程序基本目录结构

pages用来存放所有小程序的页面
utils用来存放工具性质的模块（例如：格式化时间的自定义模块）
app.js 小程序项目的入口文件（项目组合逻辑文件，用于处理文件需求）
app.json 小程序项目的全局配置文件app.wxss 小程序项目的全局样式文件project.config.json 项目的配置文件
sitemap.json用来配置小程序及其页面是否允许被微信索引

1*.js文件（页面的脚本文件，存放页面的数据、事件处理函数等）

2*.json 文件（当前页面的配置文件，配置窗口的外观、表现等）.wxml文件（页面的模板结构文件）
3*.wxss文件（当前页面的样式表文件）

小程序的开发框架：

微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。

视图层：

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

逻辑层：

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

数据层：

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

1.页面临时数据或缓存

2.文件存储(本地存储)

3.网络存储与调用

创建小程序页面

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": "新闻"
      }]
  }
}

 app.js代码

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

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

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

 *.js代码

Page({
  data:{
    name:'qzq',
    age:18,
      birthday:[{year: 2004 },{month: 2 },{date: 2 }],
      object:{hobby:'羽毛球'},
      num1:1,
      num2:2,
      students:[
        {nickname:'tom',height:172,weight:120},
        {nickname:'kary',height:166,weight:100}
      ]
    }
  })

 *.json代码

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

 *.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>

 运行界面

配置文件

1.全局配置文件

 2.window配置项

 3.tabBar配置项

 tabBar中list选项：

 4、netwoekTimeout配置项

 冒泡事件

属性标签 

 项目逻辑文件

 页面逻辑文件