第二章总结

#微信小程序开发基础

2.1 小程序的基本目录结构

        我们以第1章新建的系统默认示例项目为参考，了解微信小程序项目的基本目录结构。   
        在微信小程序的基本目录结构中，项目主目录下有2个 index Js index.js子目录(pages和utils)和4个文件(app.js、app.json，app.wxss 和project.config. json )。  
         在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。    
         project. config. json文件是项目配置文件，包含项目名称、AppID 等相关信息，开发工具项目详情的可视文件，其目的和功能 与projeet.config,json文件的目的和功能是一样的。

2.1.1 主体文件

• app.js        小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面逻辑文件打包成一个javascript文件。该文件在项目中不可缺少。
• app.json    小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少  
• app.wxss   小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.1.2页面文件 

• .js文件         页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
• .wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML 页面中的.html 文件。该文件在页面中不可缺少。
• .wxss文件 页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用 app.wxss中指定的样式规则。该文件在页面中不可缺少。
• .json 文件 页面配置文件。该文件在页面中不可缺少。

2.2    小程序的开发框架 

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

小程序NINA框架示意图

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

        视图层(View)由框架设计的标签语言WXML(WeiXinMarkup Language)和用于描述WXML组件样式的WXSS (WeiXin Style Sheets)组成，它们的关系就像HTML和 CSS的关系。

        逻辑层(App Service)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。

MINA框架中的逻辑层使用JavaScript来编写交互逻辑、网络请求、数据处理，但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。

MINA框架为页面组件提供了bindtap、bindtouchstart等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于系统层(Native)的组件承载。所以，小程序 MINA 框架有着接近原生App 的运行速度，对Android端和iOS端能呈现得高度一致，并为开发者准备了完备的开发和调试工具。

2.2.1 视图层

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

2.2.2 逻辑层

       逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
       微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括:
         (1) 增加app( ) 和 Page()方法，进行程序和页面的注册。

         (2)提供丰富的API，如扫一扫、支付等微信特有的能力。

         (3)每个页面有独立的作用域，并提供模块化能力。
         逻辑层就是通过各个页面的.js脚本文件来实现的。由于小程序并非运行在浏览器中，所以JavaScript在Web中的一些功能在小程序中无法使用，如document、window等。开发者开发编写的所有代码最终会被打包成独立的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. redirectTo原窗口打开页面。

2.3创建小程序页面

      启动微信开发工具，创建新的项目demo2，此处不勾选“创建QuickStart项目”复选项，单击“确定”按钮后，可以看到开发工具编，谓载小程序小程序项目中的“目录结构”界面只显示项目配置文件( project. config. json)，同时系统提示错误信息，将在 2.1.1小节中提到的3个主体文件(app.js、app.json和app.wxss)在项目的主目录下建立，小程序依然提示错误信息。

2.3.1创建第一个页面文件

       继续在项目主目录下新建一个pages目录，在pages目录下新建一个index目录，并在index目录下新建index.js,index.json,index.wxml和index.wxss空文件。       此时，系统仍然提示错误信息。假设，我们的目的是页面能显示“欢迎学习小程序，实现大梦想”。首先，打开index.wxml文件，输入“欢迎学习小程序，实现大梦想”。然后，告诉系统这个文件的名称及所处路径。因此，打开项目配置文件app.json，输入如下代码:

//app.json
{
"pages":[
"pages/index/index"
         ]
}

       这段代码将index页面注册到小程序中，这个对象的第一属性pages接受了一个数组，该数组的每一项是一个字符串，该字符串由“路径”+“文件名”组成，不包含扩展名。pages 属性用来指定这个项目由哪些页面组成，多个页面之间用“,”分隔。
       接下来，打开index.json文件，输入如下代码:

//index.json
{
}

在index.json文件中，只需加入一对空“{}”即可。

打开 index.js文件，输入如下代码:

//index.js
Page({
})

只需引入Page()方法，保证index.js文件不为空即可。
将这4个文件保存后进行编译，在模拟器中即可得到所需的结果。各文件的代码内容如表所示。

2.3.2创建另一个页面文件 

        在2.3.1小节中，我们采用逐步创建目录录及4个文件的方式成功创建了一个页面文件。在本节中，我们采用另一种方式来创建另一个个页面文件news。
        打开app.json 文件，输入以下代码:

//app.json
{
"pages":[
"pages /news /news",
"pages/index/index"
]
}

将文件保存后，我们发现系统在目录结构中自动添加了相应的目录和文件，系统还自动补全了每个页面文件中必需的基本代码，而且没有出现错误提示。

2.4配置文件

小程序的配置文件按其作用范围可以分为全局配置文件（app.json）和页面配置文件(*.json)

2.4.1全局配置文件

全局配置文件内容的整体结构如下:

{
//设置页面路径
"pages":[ ]，
//设置默认页面的窗口表现
"window":{},
//设置底部 tab 的表现
"tabBar":{},
//设置网络请求API的超时时间值
"networkTimeout":{},
//设置是否开启debug模式
"debug":false
}

1.pages 配置项

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

{
"pages":[
"pages/news/news",
"pages/index/index"
]}

2.window配置项

window配置项负责设置小程序状态栏，导航栏，标题，窗口背景色等系统样式。

在app.json中设置如下window配置项

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "weixin",
    "navigationBarBackgroundColor": "#fff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  }

 

 3.tabBar配置项 

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

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

在app.jss文件中设置如下tabBar配置

{"tabBar": {
"corlor":"#666666",
"selectedColor":"#ffoooo",
"borderStyle":"black",
"backgroundColor":"ffffff",
  "list":[{
      "pagePath":"pages/index/index",
      "iconPath":"images/wx1.jpg",
      "selectedIconPath":"images/ws.jpg",
      "text":"首页"
  },
  {
    "pagePath":"pages/news/news",
      "iconPath":"images/news1.jpg",
      "selectedIconPath":"images/news2.jpg",
      "text":"新闻"
      
  }]
}
}

 

 4.networkTimeout配置项

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

 5.debug 配置项

        debug 配置项用于开启开发者工具的    周试模式，默认为false。开启后，页面的注册、路    
由、数据更新、事件触发等调试信息将以 info 的形式输出到Console(控制台)面板上。

2.4.2 页面配置文件    

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

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

"navigationBarBackgroundColor": "#ffffff"
"navigationBarTextstyle": "black",
"navigationBarTitleText":"页面window 配置演示"，
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"

2.5逻辑层文件

      小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。

2.5.1 项目逻辑文件

        项目逻辑文件app.js 中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
App()函数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、月户自定义属性和方法

var app =getApp();
Console.log(app.data);

 

2.5.2页面逻辑文件 

       页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的牛寺有对象(document、window)及通过操作 DOM 改变页面，只能采用数据绑定和事件响应来实现。
       在逻辑层，Page()方法用来注册一个页面，    并且每个页面有且仅有一个 。

 1.设置初始数据

 在index.js文件中输入以下代码

Page({
  data:{
    name:'lwk',//字符串
    age:24,//数字
    birthday:[{year: 2000},{moth:4},{date:14}],//数组
    object:{hobby:'computer'}//对象
  }
})

在index.wxml文件中输入以下代码

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

结果如下 

 2.定义当前页面的生命周期函数

// index.js
Page({
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{ date:18 }],//数组object:{hobby:'computer'}//对象
  }
})

 

// logs.js
const util = require('../../utils/util.js')
 
Page({
  data: {
    logs: []
  },
  onLoad() {
   console.log("logs onLoad ......"),
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  },
// 生命周期函数--监听页面加载 
 
      //生周期函数--监听页面初次渲染完成 
      onReady: function (){
        console.log("logs onReady......")},
      // 生命周期函数--监听页面显示 
      onShow: function () {
        console.log("logs onShow ......")},
      //*生命周期函数--监听页面隐藏 
      onHide: function () {
        console.log("logs onHide ......")
      },
      //生命周期函数--监听页面卸载
       onUnload: function (){
        console.log("logs onUnload......")
       }
})

//app.json
{
  "pages": [
    "pages/ti/ti",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/logs.jpg",
      "selectedIconPath": "images/logs.jpg"
    },{
      "pagePath": "pages/one/one",
      "text": "主页",
      "iconPath": "images/weixin.jpg",
      "selectedIconPath": "images/weixin.jpg"
    }]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

 

3定义事件处理函数

开发者在Page() 中自定义的函数称为事件处理函数。 视图层可以在组件中加入事件绑定, 当达到触发事件时, 小程序就会执行Page() 中定义的事件处理函数。

/index.wxml
<view bindtap="myclick">单击执行逻辑层事件<view>
//index.js
Page({
myclick:function(){
console.log("点击了view">}
}
});

 

4使用setData 更新数据

小程序在Page对象中封装了一个名为setData() 的函数, 用来更新data中的数据。

 

2.6 页面结构文件 

 

       页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
       WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

2.6.1 数据绑定

     小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或运算规则包起来。

 

１.简单绑定

简单绑定是指使用双大括号({{}})将变量包起来, 在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。

注意：简单绑定作用于组件属性、控制属性等，双大括号外应该添加双引号。

示例代码

//wxml
<!--作为内容 -->
<view >{{name|| </view >
<!--作为组件属性 -->
<imagesrc ="{{img}|"> < /image >
<!--作为控制属性 -->
<view wx:if ="{{sex}}">男 </view >
//js 
Page({
//页面的初始数据 data: {
name: '/wk',
img:'/images/news2.png',
 sex: true
},
}]

 

2.运算

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

示例代码如下：

//wxml
<!--算术运算 --->
<view>{{num1|| +{{num2}|={{num1 +n1um2 }} </view >
<!---逻辑运算 -->
<view >{{num1 +num2 == num1 +num2 }} </view >
<!---三元运算 -->
<view >{{num1 >num2? 'num1 >num2':'nun m1 <num2'} } < /view >
<!---字符串运算 -->
<view>{{Hello + name}} < /view >
<!--- 数据路径运算 -->
<view>{{object.hobby}} < /view >
<view>{{birthday[0]}}</view >
//js 
Page({
//页面的初始数据 
data:{
name: 'lwk', 
       num1:2， 
       num2 :3，
       num3 :10，
       object:{hobby:'computer'} ,
       birthday:[1988,11,18]
},})

2.6.2条件数字绑定

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

2.6.3列表数组绑定

列表数据绑定用于将列表中的各项数据进行重复数据绑定。

2.6.4模板

       在小程序中，如果要经常使用几个组牛的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板。

1. 定义模板

模板代码由 wxml 组成，因此其定义也是在wxml 文件中，定义模板的格式为:
<template name ="模板名">
相关组件代码为:
</template >

其中，<template >为模板标签，name属性用于定义模板的名称。

2. 调用模板

       将模板定义后，就可以对其进行调用了。调用模板的格式为:
<template is="模板名称"data == "{{传入的数据}}"/>
       其中，<template >为模板标签;is属性用于指定要调用的模板名称;data属性定义要入的数据，如果模板中不需要传入数据，data属性可以省略。

2.6.5引用页面文件

       在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提了两种方式来引用其他页面文件。

1. import 方式

     如果在要引用的文件中定义了模木板代码，则需要用import方式引用。例如，在a.wxml文件中定义一个 item 模板.

2. include 方式

     include 方式可以将源文件中除模板之外的其他代码全部引入，相当于将源文件中的代码复制到include 所在位置。

2.6.6页面事件

       简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
      要实现这种机制，需要定义事件函数和调用事件。
       定义事件函数     在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
       调用事件            调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value”形式出现，key(属性名)以 bind 或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。

    在小程序中，事件分为冒泡事件和非冒泡事件两大类型。

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

2.7页面样式文件

        页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。wxss 具有css的大部分特性，小程序对wxsS做了一些扩充和修改。
1.尺寸单位
         由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx( respnesive pixel)。WXSS规定屏幕宽度为750rpx，在系统数据绑定过程中会按比例转化为px。

2.样式导入

为了管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可。

3.选择器

目前WXSS仅支持CSS中常用的选择器，如，class，#id，element，before，aftert等。

4.WXSS常用属性

   WXSS文件与css文件有大部分属性名及属性值相同

 

2.8本章小结

       本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深
刻理解和熟练掌握，并勤写代码多加练习，    为后续的学习打下扎实的基础。