第二章总结

2.1小程序的基本目录结构

主体文件

微信小程序的主体部分由3个文件细成，这了个文件必须放在项目的主目录中，程序的整体配置，它们的名称是固定的。

app.js: 小程序逻辑文件，主要用来注册小程序全局实例 在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
app.json:小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少.

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

页面文件

  小程序通常是由多个页面到成的，每页面包含4个文件，同一页的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行挑转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。
. js文件  页面逻指文件，在该文件中练写Jmiscip代码控制页面的逻辑。该文在每个小程序的页面中不可缺少。
.wxml文件   页面结构文件，用于设计页面的布局、数据绑定等，类似 HTML页商中的.html文件。该文件在页面中不可缺少。
.wxss文件  页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠盖app.wss 中的样式规则；否则，直接使用app.wass中指定的样式规则。该文件在页面中不可缺少。
.json文件 页面配置文件。该文件在页面中不可缺少。

2.2 小程序的开发框架

小程序MINA框架如图所示

视图层

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

逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括：
(1)增加app()和Page()方法，进行程序和页面的注册。
(2)提供丰富的API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。

小程序系统默认提供的app.js文件如下图所示

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

数据层

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

1. 页面临时数据或缓存
在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this. data的值。
setData()函数的参数接收一个对象，以(key,value)的形式表示将key在 this. data中对应的值改变成value。
2.文件存储(本地存储)
使用数据API接口，如下：
wx.getStorage获取本地数据缓存。
wx.setStorage 设置本地数据缓存。
wx. clearStorage 清理本地数据缓存。
3. 网络存储与调用
上传或下载文件API接口，如下：
发起网络请求。
wx. request
wx.uploadFile 上传文件。
wx. downloadFile 下载文件。
调用URL的API接口，如下：
wx.navigateTo 新窗口打开页面。
wx.redirectTo 原窗口打开页面。

2.3创建小程序页面

创建项目图

创键第一个页面文件

创建一个名为ci1的文件，并在目录下新建ci1.js;ci1.json;ci1.wxml;ci1.wxss.

ci1.js中输入

Page({
  
})

ci1.json

{
  
}

ci1.wxml

你好

2.4配置文件

全局配置文件

全局配置项

window配置项及其描述

在app.json中的window配置项

taber配置项

taber配置项及描述

taber中的list选项

在app.json中设置taBar配置

    "tabBar": {
    "color":"#666666",
    "selectedColor":"#ff0000",
    "borderStyle":"black",
    "backgroundColor":"#ffffff",
    "list":[
      {
        "pagePath": "pages/ci1/ci1",
        "iconPath": "images/1.png",
        "selectedIconPath": "images/2.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/1.png",
        "selectedIconPath": "images/2.png",
        "text": "新闻"
      }
    ]
  }
}

运行结果

networkTimeout配置项

2.5逻辑层文件

项目逻辑文件配置项

在app.js中加入

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

显示效果

页面逻辑文件

页面逻辑文件配置项

设置初始数据

设置数据绑定

运行效果

2.6页面结构文件

数据绑定

页面初始数据

 data:{
    name:'ydl' ,
    age:30,
    birthday:[{year:1988},{month:11},{date:18}],
    num:40,

运算

 data:{
    name:'ydl' ,
    age:30,
    birthday:[{year:1988},{month:11},{date:18}],
    num:40,

运行结果

条件数据绑定

<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">2</view>
<view wx:else>3</view>

运行结果

模板

<template name="stu">
<view wx:for="{{students}}">
    <text>姓名: {{item.nickname}}</text>
    <text>身高:{{item.height}}</text>
    <text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"/>

页面事件

定义事件函数：在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。

调用事件  调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key =value”形式出现，key(属性名)以bind或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。

冒泡事件  冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递级元素再向其父级元素传递，一直到页面的顶级元素。

非冒泡事件  非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传选在WXML中，冒泡事件有6个。

2.7页面样式文件

WXSS常用属性