第二章总结

2.1 小程序的基本目录结构

如下图所示，在微信小程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）。

在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。

project.config.json文件是项目配置文件，包含项目名称，App等相关信息。

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同拓展名（.wxml、.wxss、.js、.json）的文件，分别表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个页面的4个文件必须具有相同的路径与文件名。

utils目录用来存放一些公用的.js.文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用。

2.1.1主体文件

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

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

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

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

2.1.2页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径和文件名。当小程序被启动或者小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。

.js文件  页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。

.wxml文件  页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。

.wxss文件  页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少。

.json文件  页面配置文件，该文件在页面中不可缺少。

2.2小程序开发框架

小程序MINA框架示意

2.2.1视图层 

 MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。

2.2.2逻辑层 

逻辑层用于处理事务逻辑。

2.2.3数据层 

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

2.2.3.1  页面临时数据或缓存

在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

setData()函数的参数接收一个对象，以（key,value）的形式表示将key在this.data中对应的值改变成value。

2.2.3.2  文件存储（本地存储）

使用数据API接口，如下：

wx.getStorage  获取本地数据缓存

wx.setStorage  设置本地数据缓存

wx.clearStorage  清理本地数据缓存

2.2.3.3  网络存储与调用

上传或下载文件API接口，如下：

wx.request  发起网络请求

wx.uploadFile  上传文件

wx.downloadFile  下载文件

调用URL的API接口，如下：

wx.navigateTo  新窗口打开页面

wx.redirectTo  原窗口打开页面

2.3创建小程序页面

2.3.1 创建第一个页面文件

在项目主目录下新建一个pages目录，在pages目录下新建一个news（自行命名）目录，并在news目录下新建new.js/ts、news.ison、news.wxnl和news.wxss空文件。新建news页面后的项目目录结构如图所示。

新建news目录

news页面的项目目录结构

打开news.wxml文件 ，输入“欢迎大家学习这门课程  不能为空” 

news.wxml文件

news.js文件

news.json文件

2.4配置文件

2.4.1全局配置文件

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

全局配置项

window配置项及其描述

代码示例如下：

"window": {
    "navigationBarBackgroundColor": "#347900",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序Window功能演示",
    "backgroundColor": "#00ff00",
    "navigationStyle": "custom"
  },

tabBar配置项及其描述

tabBar中list选项

 代码示例如下：

"tabBar": {
    "color": "skyblue",
    "selectedColor": "#ff0000",
    "borderStyle": "black",
    "backgroundColor": "#ffff00",
    "list": [{
      "pagePath": "pages/news/news",
      "text": "首页",
      "iconPath": "images/tp.png",
      "selectedIconPath": "images/tp2.png"
    },
    {
      "pagePath": "pages/l/l",
      "text": "密码",
      "iconPath": "images/tp.png",
      "selectedIconPath": "images/tp2.png"
    }]
  },

networkTimeout配置项

 代码示例如下：

"networkTimeout": {
    "request": 2000,
    "connectSocket": 2000,
    "uploadFile": 2000,
    "downloadFile": 2000
  },

示例：app.json页面的代码

{
  "pages": [
    "pages/l/l",
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#347900",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序Window功能演示",
    "backgroundColor": "#00ff00",
    "navigationStyle": "custom"
  },
  "tabBar": {
    "color": "skyblue",
    "selectedColor": "#ff0000",
    "borderStyle": "black",
    "backgroundColor": "#ffff00",
    "list": [{
      "pagePath": "pages/news/news",
      "text": "首页",
      "iconPath": "images/tp.png",
      "selectedIconPath": "images/tp2.png"
    },
    {
      "pagePath": "pages/l/l",
      "text": "密码",
      "iconPath": "images/tp.png",
      "selectedIconPath": "images/tp2.png"
    }]
  },
  "style": "v2",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

2.4.2  页面配置文件

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app.json）中的配置项。

页面中的window配置只需书写配置项，不必书写window，代码示例如下：

{
  "navigationBarBackgroundColor": "#000",
  "navigationBarTextStyle":"black",
  "navigationBarTitleText": "页面配置设置",
  "backgroundColor": "#ffffff",
  "backgroundTextStyle":"light"
}

2.5  逻辑层文件

2.5.1  项目逻辑文件

项目逻辑文件配置项

2.5.2  页面逻辑文件

页面逻辑配置项

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

当前页面的生命周期函数

定义事件处理函数：开发者在Page()中自定义的函数称为事件处理函数。

news.wxml

<view bindtap="myckick">单击执行逻辑层事件</view>

 news.js

Page({
myclick:function(){
  console.log("点击了view")
}
});

2.6  页面结构文件

2.6.1  数据绑定

2.6.1.1 简单绑定

.wxml

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好：{{objiect.hobby}}</view>

 .js

Page({
  //页面的初始数据
  data:{
    name:'lwk',//字符串
    age:30,
    birthday:[{year:1988},{month:11},{date:18}],//数组
    object:{hobby:'computer'},//对象
   }
})

2.6.1.2  运算

.wxml

<view>算数运算{{age+num}}</view>
<view>逻辑运算{{age==40}}</view>
<view>三元运算:{{age==40 ? 'true' :'falst' }}</view>

.js

Page({
  //页面的初始数据
  data:{
    num:100,//数字
  }
})

2.6.2 条件数据绑定

.wxml

<view wx:if="age>40">1</view>
<view wx:elif="age==40">0</view>
<view wx:else>-1</view>

2.6.3  列表数据绑定

.wxml

<view wx:for="{{students}}">
  <text>姓名：{{item.nickname}}</text>
  <text>体重：{{item.height}}</text>
</view>

.js

Page({
  //页面的初始数据
  data:{
    students:[
      {
        nickname:'Tom',height:180
      },
      {
        nickname:'Anne',height:165
      }
    ]
  }
})

部分运行结果与代码

2.6.4  模板

.wxml

<template name="stu">
  <block wx:for="{{students}}">
    <view>
      <text>姓名：{{item.nickname}}</text>
      <text>体重：{{item.height}}</text>
    </view>
  </block>
</template>

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

.js

Page({
  //页面的初始数据
  data:{
    students:[
      {
        nickname:'Tom',height:180
      },
      {
        nickname:'Anne',height:165
      }
    ]
  }
})

2.7  页面样式文件

wxss常用属性