第二章总结

一：认识小程序的目录结构

在目录结构中我们分为有两个子目录，分别为pages和utils

二：pages和utils目录的解读

pages目录中包含有着两个子目录，分别为index和logs，分别包含着一个相关的页面，且一个页面通常包含4个扩扩展名（wxml,wxss,js,json）的文件，  分别用于表示页面结构文件，页面逻辑文件，页面样式文件和页面配置文件且同一个页面的配置文件必须拥有相同的路劲和文件名

utils目录通常用来存放一些公共的。js文件，当需要使用utils。js函数时，可以直接引入使用

三：主题文件和页面文件的解读

主题文件的解读：

微信小程序的主体部分有三个文件组成，分别是挨批评。就是app.js app.json和app.wxss且他们的名称是固定的，他们的作用分别为

app.js:小程序的逻辑文件，用于注册小程序全局实列，该文件在项目中不可缺少

app.json：小程序的公共设置文件，配置全局设置，不可缺少、

app.wxss:小程序的主样式表文件类似html的css文件，不是必须的文件

页面文件的解读：

小程序的页面文件通常由多个页面组成，美国页面包含4个文件 4个文件必须具有相同的路径和文件名，当小程序呗启动或进行跳转时，会根据设置的路径找到相应的资源进行数据绑定

.js文件  页面逻辑文件该文件在每个小程序中不可缺少

.wxml文件 页面结构文件，用于页面结构布局，数据绑定等，该文件在小程序中不可缺少

.wxss文件 页面样式表文件，用于定义页面中用到的各类样式表，该文件在小程序中不可缺少

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

四：小程序的开发框架

小程序的开发框架如图所示：

一共分为三个部分即：视图层，逻辑层和系统层

一：视图层的概念    ：MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构:wxss 文件用于描述页面的样式。
微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的

二：逻辑层的概念   ：逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括:
逻鞠层2.2. 2
(1)增加#Pp()和Page()方法，进行程序和页面的注册
this.
你
(2)提供丰富的 API，如扫一扫、支付等微信特有的能力
(3)每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的,js脚本文件来实现的。由于小程序并非运行在浏览器中所以JavaSenpt在Web中的一些功能在小程序中无法使用，如document、window等
开发者开发编写的所有代码最终会被打包成独立的JavaSeip文件，并在小程序启动的时候运行，直到小程序被销毁

三：系统层的概念：数据层在逻辑上包括页面临时数据或缓存，本地存储和网络储存与调用

五：创建小程序页面的步骤

在开发者工具中创建一个新的项目，在主目录下创建一个新的pages目录，在pages下创建一个news目录，并新建news.js news.json news.wxml news.wxss四个空文件

在各个文件夹中输入所需代码

二：完成文件的配置

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

2.3.1 创建一个页面文件
一、在项目主目录新建pages目录下新建一个index目录。并在index目录下新建 .js、.jsom、.wxml、和 .wxss空文件。

目录如下：

 二、打开index.wxml文件，输入想要输出的文字然后把文件所在名称及路径复制

三、打开App.json文件在pages里面把复制的路径及文件名输入进去（“这段代码是将页面注册到小程序中”）

四、打开index.json文件，输入代码（只需加一对“ {  } ”即可）

五、打开index.js文件输入代码（“只需引用Page方法，保证index.js不为空即可。”）

项目中各文件的代码内容如下：
文件名    代码内容
app.js    空
app.json    {“pages”:[“pages/index/index”]}
app.wxss    空
index.js    page({     })
index.json    {     }
index.wxml

 

配置全局文章

可用来配置文件的路径、设置窗口表现、设定网络请求API的超时时间值以及配置多个切换页等。

下列是各全局配置项的相关描述：

全局配置文件内容结构如下：

//设置页面路径；

{
"pages"：[  ],

//设置默认页面窗口表现

"Window"：[  ],

设置底部tab的表现

"tabBar"：{   },

//设置网络请求API的超时时间值”

"networkTimeout "：{  }，

//设置是否开启debug模式

"debug "：false

二：Window配置项

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

Window配置参考表：

三：tabBar配置项 

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

tabBar配置参考表如下：

其中list（列表）接收数组值，数组中每个项都是一个对象

说明如下：

四： networkTimeout配置文项

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

networkTimeout配置参考表如下：

运行代码如图：

{
  "pages": [
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "小程序window功能演示",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
"tabBar": {
  "color": "#666666",
  "selectedColor": "#ff0000",
  "borderStyle":"black",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/logs/logs",
      "iconPath": "images/news1.png",
      "selectedIconPath": "images/news2.png",
      "text": "首页"
    },
    {
      "pagePath": "pages/news/news",
      "iconPath": "images/news1.png",
      "selectedIconPath": "images/news2.png",
      "text": "新闻"
    }
  ]
},
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

运行结果如图

六：页面逻辑文件

页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等，每个页面都有一个相对应的逻辑文件，是运行在JavaScript引擎中

其参数表如图所示：

一：设置初始数据：
1.设置初始数据设置初始数据是对页面的第一次数据绑定。对象 data将会以JSON(Javaseript Objeet Notaton，1s对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过WXML对数据进行绑定。
数据初始、数据绑定及运行效果如图2-12所示
2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad 页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。
该函数的参数可以获取 wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互，
onHide 页面隐藏函数。当页面隐藏时及当navigateTo 或小程序底部进行 tab 切换时调用该函数。
onUnload 页面卸载函数。当页面卸载、进行 navigateBack或redirectTo 操作时，调用该函数。

代码如图所示：

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

代码的运行结果如图所示：

七：页面的结构文件

页面的结构文件（WXML）是框架设计的一套类似HTML的标签语言，其具有数据绑定，条件数据绑定，列表数据绑定，模板，引用页面文件，页面事件德国能力

一：小程序的数据绑定使用Mustache语法将变量或运算规则包裹起来

1. 简单绑定用双大括号（{{}}）将变量包裹起来

演示代码如下：

2. 运算

在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符仓daygSqr以运算规则

运算规则如图所示：

二 ：条件数据的绑定

条件数据绑定就是根据绑定表达式的逻辑值拉判断是否数据绑定当前组件

1.wx:if条件数据绑定

所需的代码为

<view wx:if = "{{x>0}}">1</view>
<view wx:elif = "{{x==0}}">0</view>
<view wx:else>-1</view>

运行代码结果图为

二：列表数据绑定

在组建上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组3.

3.模板

在小程序中，如果通常想要使用几个组件的组合，通常把这几个组件定义为一个模板，以后可直接使用这个模板

定义模板的格式为：<template name ="模板名">

八：页面样式文件

页面样式文件的格式如图所示：

九：第二章总结完成