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

小程序的基本目录结构

如图： 

项目主目录有2个子目录（pages和utils）和 4个文件（app.js，app.json，app.wxss,和project.config.json)。

①    pages 用来存放所有小程序的页面    
②    utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)    
③    app.js 小程序项目的入口文件    
④    app.json 小程序项目的全局配置文件    
⑤    app.wxss 小程序项目的全局样式文件    
⑥    project.config.json项目的配置文件    
sitemap.json 用来配置小程序及其页面是否允许被微信索引

其中，每个页面由4个基本文件组成，它们分别是:
① .js文件(页面的脚本文件，存放页面的数据、事件处理函数等)
②
.json 文件(当前页面的配置文件，配置窗口的外观、表现等)③.wxml 文件(页面的模板结构文件)
④    .wxss 文件(当前页面的样式表文件)

小程序的开发框架 

小程序MINA框架示意图

视图层：MINA框架的视图由WXML和WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合；.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

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

在JavaScript的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括：

（1）增加app（）和page（）方法，进行程序和页面的注册。

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

（3）每个页面有独立的作用域，并提供模块化的能力。

数据层 

创建小程序页面 

创建第一个页面文件

1.在项目主目录下新建一个pages目录，在pages目录下新建一个su目录，并在Y目录下新建su.js,su.josn,su.wxml,su.wxss文件。如图

2.打开su.wxml文件，输入“<text>欢迎加入学习课程</text> ”。然后，打开app.json输入如下、

、代码：

{
  "pages": [
    "pages/su/su"
    
  ]

3.再打开su.json文件，输入代码

{
}

 4.完成以上之后，再打开su.js,文件输入代码

Page({

})

 运行结果：

配置文件 

全局配置文件

 

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

window配置项

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

tabBar配置项 

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

tabBar中list选项

 networkTimeout配置项

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

{
  "pages": [
    "pages/su/su",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序window功能演示",
    "navigationBarTextStyle": "black",
    "backgroundTextStyle":"light"
  },

  "style": "v2",
    "componentFramework": "glass-easel",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents",
  
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ffffff",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/ia.png",
        "selectedIconPath": "images/ie.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/su/su",
        "iconPath": "images/io.png",
        "selectedIconPath": "images/iu.png",
        "text": "新闻"
      }
    ]
  }
}
  

运行结果：

 

 

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

2.4.2 页面配置文件

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

 2.5逻辑层文件

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

2.5.1 项目逻辑文件

项目逻辑文件app.js中可以通过App（）函数注册小程序生命周期函数，全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp（）获取。

2.5.2页面逻辑文件

主要功能有：设置初始数据；定义当前页面的生命周期；定义事件处理函数等。

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，如图所示：

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

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

.onLoad   页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和 wx.redirectTo及<navigator/>中的query。
.onShow   页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
.onReady  页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
.onHide  页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。
.onUnload  页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调用该函数。
3.定义事件处理函数
 开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行Page（）中定义的事件处理函数。代码如下：   

//index.wxml
<view bind:tap="myclick">单击执行逻辑层事件</view>
 
//index1.ls
myclick:function(){
    console.log("你点击了view")
  }

4.使用setData更新数据

 配置运行：

su.js代码

Page({
  
    data:{
      name:'苏',  
      age:3,      
      birthday:[{year:2024},{month:3},{date:9}],
      object:{hobby:'csdn'} ,
      num:100
    }
  })

su.wxml代码

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

 运行结果：

 

 2.6页面结构文件

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

2.6.1数据绑定

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

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

注意

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

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

//wxml
<!--算术运算 --->
<view>{{numl}} +{{num2}}={{num1 +num2}} </view ><!---逻辑运算 -->
<view>{{num1+num2 ==numl+num2 }} </view ><!---三元运算 -->
<view>{{numl>num2? 'numl >num2':'num1 <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 条件数据绑定 

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

1.wx.if条件数据绑定

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

2.block wx：if条件数据绑定

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

2.6.3列表数据绑定

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

1.wx.for

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

2.block  wx：for

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

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

1.定义模板

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

2.调用模板

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

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

1.  import方式

如果在要引用的文件中定义了模板代码，则需要用import方式引用。

2.  include方式

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

页面事件
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。要实现这种机制，需要定义事件函数和调用事件。

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。

调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以"key =value" 形式出现，key (属性名)以 bind 或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。

小程序中，事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父
级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

2.7页面样式文件 

页面样式文件(WxSS)是基于Css拓展的样式语言，用于描述WXML，的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对Wxss做了一些扩充和修改。

1尺寸单位

由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx (respnesive pixel)。WXSS规定屏幕宽度为750 rpx,在系统数据绑定过程中rpx会按比例转化为px。

2样式导入

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

3选择器

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

4WXSS常用属性

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

 

2.8本章小结

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