第二章总结

2.1小程序的基本目录结构

pages 页面文件夹

utils 工具包文件夹

2.1.1 主体文件

微信小程序的主体部分由3个文件组成，该三个文件必须放在项目的主目录中，负责小程序的整体配置，名称是固定的。

app.js 小程序逻辑文件，主要用来注册小程序全局实例，该文件在项目中不可缺少

app.json 小程序公共设置文件，配置小程序全局设置，该文件在项目中不可缺少

app.wxss 小程序主样式文件

2.1.2 页面文件

小程序通常由多个页面组成每个页面包含4个文件，同一页面的4个文件必须有相同的路径和文件名。

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

.wxml文件： 页面结构文件，用于设计页面布局，数据绑定等，类似HTML页面中的.html文件

.wxss文件: 页面样式表文件，用于定义本业面中用到各类样式表

.json文件： 页面配置文件

2.2小程序的开发框架

小程序MINA框架示意图：

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

MINA 框架为页面组件提供了bindtap、bindtouchstart等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。 

2.2.1 视图层

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

2.2.2 逻辑层

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

微信小程序开发框架的逻辑层采用JavaScript编写

2.2.3 数据层

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. rediretTo原窗口打开页面。

2.3创建小程序页面

在pages目录下新建一个index目录，并在index目录下新建news.js,news.json,news.wxml,news.wxss空文件 

2.4配置文件

 全局配置项

1. pages配置项

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

2.window配置项

window配置项及其描述

3.tabBar配置项 

tabBar配置项及其描述

 tabBar中list选项

4.networkTimeout配置项

networkTimeout配置项

5.debug

debug配置项用于开启开发者工具的调试模式，默认为FALSE。

2.4.2页面配置文件

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。

2.5逻辑层文件

2.5.1项目逻辑文件

2.5.2 页面逻辑文件

1.设置初始数据

设置初始数据是对页面的第一次数据绑定

2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。
示效果    该函数的参数可以获取wx.navigateTo和wx. redirectTo 及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。 onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时调用该函数。
onUnload 页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调用该函数。 

2.6页面结构文件 

1.数据绑定

简单绑定：使用大括号（{{{}}}）将变量包起来，在页面中直接作为字符串输出使用

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

示例代码

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

 2.条件数据绑定

wx:if条件数据绑定

block wx:if条件数据绑定 

3.列表数据绑定

wx:for

block wx:for

ru.wxml代码：

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>算术运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==1 ? 3 : num}}</view>

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

ru .js代码：

Page({
  data: {
    name:'lwk',
    age:30,
    num:100,
    birthday:[{year:1988},{month:11},{date:18}],
    object:{hobby:'computer'},
    students:[
      {nickname:"Tom",height:180,weight:150},
      {nickname:"Aiz",height:160,weight:100}
    ]
  }
})

app.js代码：

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中定义属性'
})

运行结果图

 

4.模板

定义模板

调用模板

示例代码

<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}}"></template>

2.7页面样式文件

wxss常用属性