第二章微信小程序开发基础

小程序的基本目录结构

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

pages 目录中有2个子目录，分别是 index 和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4 个不同扩展名 (.wxml、.wxss、.js 和json) 的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，同一个页面的4个文件必须具有相同的路径与文件名。
utils 目录用来存放一些公共的js 文件，当某个页面需要用到 utils.js 函数时，可以将其引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

主体文件

微信小程序的主体部分由3 个文件组成，这3 个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。最料
app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js 文件会和其他页面的逻辑文件打包成一个 JavaSeript 文件。该文件在项目中不可缺少。app.json 小程序公共设置文件配置小程序全局设置。该文件在项目中不可缺少app.wxss小程序主样式表文件，类似HTML的Scss文件。在主样式表文件中设置
的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

页面文件

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

小程序的开发框架

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

小程序 MINA 框架将整个系统划分为视图层和逻辑层。视图层 (View) 由框架设计的标签语言WXML ( WeiXin Markup Language) 和用于描述 WXML组件样式的 WXSS(WeiXinStyle Sheets)组成，它们的关系就像 HTML和 CSS 的关系。逻辑层(App Service) 是 MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA 框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理，但不能使用JavaScript 中的 DOM 操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。
MINA框架为页面组件提供了 bindtap、bindtouchstart 等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA 框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能(如 page 切换、tab 切换、多媒体、网络连接等) 上使用接近于系统层 (Native) 的组件承载。所以小程序 MINA 框架有着接近原生 App 的运行速度，对 Android 端和ioS端能现得高度一致并为开发者准备了完备的开发和调试工具。
小程序MINA框架示意如图所示。

视图层

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

逻辑层

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

数据层

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

页面临时数据或缓存

• 在Page()中，使用 setData 函数将数据从逻辑层发送到视图层，同时改变对应的this.data 的值。
• setData() 函数的参数接收一个对象，以 (key,value) 的形式表示将 key 在 this.data 中对应的值改变成 value。

文件存储（本地存储）

使用数据API接口，如下:

• wxgetStorage 获取本地数据缓存。
• wxsetStorage设置本地数据缓存。
• wxclearStorage清理本地数据缓存。

 网络存储与调用

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

• wxrequest发起网络请求。
• wxuploadFile 上传文件。
• wxdownloadFile 下载文件。

 调用URL的API接口，如下：

• wxnavigateTo 新窗口打开页面。
• wx.redirectTo 原窗口打开页面。

创建小程序页面

在在pages目录下新建一个 index 目录，并在 index 目录下新建 nb.js、nb.json、nb.wxml和nb.wxss 空文件。

实验目的是页面能显示“欢迎学习小程序开发”

首先，打开nb.wxml文件，输人“欢迎学习小程序”。然后告诉系统这个文件的名称及所处路径。因此，打开项目配置文件 app.json，输人如下代码:

{
  "pages":[
    "pages/nb/nb",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#da7c0c",
    "navigationBarTitleText": "简易计算器",
    "navigationBarTextStyle":"white"
  }
}

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

接下来，打开nb.json 文件，输人如下代码:

{
  
}

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

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

Page({
  
})

 运行结果

 配置文件

全局配置文件

小程序的全局配置保存在全局配置文件 (app.json) 中，使用全局配置文件来配置页面文件 (pages)的路径、设置窗口 (window) 表现、设定网络请求 API 的超时时间值(networkTimeout) 以及配置多个切换页 (tabBar) 等。如图所示列出了各全局配置项的相关描述。

 pages配置项

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

winndow配置项

window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。window配置项可以配置的对象参考表。

tabBar配置项

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

 其中，list (列表) 接受数组值，数组中的每一项也都是一个对象。对象的数据值说明如表所示。

 networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过 networkTimeout 配置项进行统一设置不能在API中单独设置。networkTimeout 可以配置的属性如表所示。

debug配置项

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

页面配置文件

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

逻辑层文件

项目逻辑文件

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

 当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法，然后通过app.json 的 pages 属性注册相应的页面，最后根据默认路径加载首页;当用户单击左上角的“关闭”按钮或单击设备的 Home 键离开微信时，小程序没有被直接销毁，而是进人后台这两种情况都会触发onHide方法;当用户再次进人微信或再次打开小程序时，小程序会从后台进人前台，这时会触发onShow方法。只有当小程序进人后台一段时间(或者系统资源占用过高)时，小程序才会被销毁。

我们在app.js加入代码，如下所示

App(
    {
    onLaunch() {
      console.log("小程序初始化完成")
      // 展示本地存储能力
      const logs = wx.getStorageSync('logs') || []
      logs.unshift(Date.now())
      wx.setStorageSync('logs', logs)
  
      // 登录
      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
        }
      })
    },
    globalData: {
      userInfo: null
    },
    onShow:function(options){
  console.log("小程序显示")
  console.log(this.Date);
  console.log(this.fun())
    },
    onHide:function(){
  console.log("小程序径路后台")
    },
    onError:function(msg){
  
    },
  
  fun:function(){
    console.log("在app.js中定义的方法")
  
  },
    }
  )
  

保存并编译后，Console面板的显示效果如图所示

页面逻辑文件

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

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示。

 设置初始数据

设置初始数据是对页面的第一次数据绑定。对象data将会以JSON(Javascript Object Notation，Js 对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON 的格式(字符串、数字、布尔值、对象、数组)。
1.设置初始数据
视图层可以通过 WXML对数据进行绑定。

数据初始，数据绑定及运行效果如图所示以及两个运行代码。

Page({
  data: {
    name:'lwk',
    age:30,
    birthday:[{year:1988},{month:11},{date:18}],
    object:{hobby:'computer'}
  }
  })

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

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

在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。

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

例如，在index.js和news.js文件中加入一下所示的代码。

  Page({
//生命周期函数--监听页面加载
  onLoad:function(options) {
    console.log("index onLoad.....")
  },
  //生周期函数--监听页面初次渲染完成
  onReady:function() {
    console.log("index onReady....")
  },
  //生命周期函数--监听页面显示
  onShow:function(){
    console.log("index onShow....")
  },
  //生命周期函数--监听页面隐藏
  onHide:function(){
    console.log("index onHide....")
  },
  //生命周期函数--监听页面卸载
  onUnload:function(){
    console.log("index onUnload....")
  }
})

Page({
  //生命周期函数--监听页面加载
    onLoad:function(options) {
      console.log("news onLoad.....")
    },
    //生周期函数--监听页面初次渲染完成
    onReady:function() {
      console.log("news onReady....")
    },
    //生命周期函数--监听页面显示
    onShow:function(){
      console.log("news onShow....")
    },
    //生命周期函数--监听页面隐藏
    onHide:function(){
      console.log("news onHide....")
    },
    //生命周期函数--监听页面卸载
    onUnload:function(){
      console.log("news onUnload....")
    }
  })

保存并编译后，Console面板出现了如图所示的效果。

使用setData更新数据

小程序在 Page 对象中封装了一个名为 setDaa()的函数，用来更新 data中的数据。函对的形式表示将 this.data 中的 key 对应的值修改为 value。数参数为 Object，以“key:value示例代码所示。

 setData文件代码

Page({
  //页面的初始数据
  data:{
    name:'los', //字符串
    age:3,      //数字
    birthday:[{year:2021},{month:1},{date:12}], //数组
    object:{hobby:'下棋，听歌，打羽毛球'} //对象
  },
  chtext:function() {
    this.setData({
      name:'李火旺'
    });
  },
  chage:function() {
    this.setData({
      age:-1
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2030},{month:6},{date:23}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'下棋，听歌，打羽毛球'
    });
  },
  adddata:function() {
    this.setData({
      'address':'睡觉觉'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },
});

setData文件代码

<view>姓名：{{name}}</view>
<button bind:tap="chtext">修改姓名</button>
<view>年龄：{{age}}</view>
<button bind:tap="chage">修改年龄</button>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日             
</view>
<button bind:tap="charray">修改出生日期</button>
<view>爱好：{{object.hobby}}</view>
<button bind:tap="chobject">修改爱好</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>
<view bind:tap="myclick">单击执行逻辑层事件</view>

运行结果

页面结构文件

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

数据绑定

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

简单绑定

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

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

运算

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

示例代码如下

nb.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:4}}</view> 

nb.js代码如下

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

运行结果

条件数据绑定

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

wx:if条件数据绑定

wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。

block wx:if条件数据绑定

当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加 wx:if属性即可。

列表数据绑定

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

1.wx.for

在组件上，可以使用 wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数裤绑定到该组件，格式如下:

<view wx.for="{{items}}">
{{index}}:{{item}}
</view>

2.block wx:for

与 block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定.

模板

定义模板

模板代码由wxml组成，因此其定义也是在wxml文件中，定义模板的格式为:

< template ＝ "模板名" >

相关组件代码为: </template> 其中, < template> 为模板标签, name 属性用于定义模板的名称。 

调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为:

< template is＝ "模板名称" data == "{{传入的数据}}" />

其中，<template>为模板标签;is属性用于指定要调用的模板名称;data属性定义要传人的数据，如果模板中不需要传人数据，data属性可以省略。

引用页面文件

1. import方式
2. include方式

页面事件 

• 定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
• 调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。
• 冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，级元素再向其父级元素传递，一直到页面的顶级元素。
• 非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个，如表所示。

 除了表2-9列出的6个冒泡事件以外，其他组件自定义的事件也属于冒泡事件。例如<form/>中的 submit 事件，<input>中的imput 事件。

页面样式文件

1. 尺寸单位
2. 样式导入
3. 选择器
4. WXSS常用属性

WXSS的常用属性及属性值如表所示

 

本章的讲解已经完毕了，我们下一章再见，感谢浏览