微信小程序学习（第二章总结）

微信小程序开发基础：

2.1 基本目录结构：

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

在主目录中3个以“app”开头的文件是微信下程序框架的主描述文件，是应用程序级别的文件

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

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

2.1.1 主体文件：

app.js：小程序逻辑文件

app.json：小程序公共设置文件

app.wxss：小程序主样式表文件

2.1.2 页面文件：

.js：页面逻辑文件

.wxml：页面结构文件

.wxss：页面样式文件

.json：页面配置文件

2.2 小程序开发框架：

小程序MINA框架将整个系统划分为视图层、逻辑层和（数据层）

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

视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构wxss 文件用于描述页面的样式

2.2.2 逻辑层：逻辑层用于处理事务逻辑（采用JavaScript编写）

1.增加app()和Page()方法，进行程序和页面的注册

2.提供丰富的 API,如扫一扫、支付等微信特有的能力

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

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 创建小程序页面：

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

1.

2.

3.

注意！！！：Page的P一定要大写，不然模拟器界面就显示不出来

4.

5.

6.

运行结果：

2.4配置文件

        小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容

2.4.1全局配置文件

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

1.配置项

        pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项

设置 pages 配置项时，应注意以下3点:
        （1）数组的第一项用于设定小程序的初始页面

        （2）在小程序中新增或减少页面时，都需要对数组进行修改

        （3）文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、wxml 和wxss 文件进行整合数据绑定

2.window配置项

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

3.tabBar配置项

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

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

代码：

"tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/test1/test1",
      "iconPath": "img/屏幕截图 2024-03-08 083355.png",
      "selectedIconPath": "img/屏幕截图 2024-03-08 083457.png",
      "text": "首页"
    },{
      "pagePath": "pages/a1/a1",
      "iconPath": "img/屏幕截图 2024-03-08 083405.png",
      "selectedIconPath": "img/屏幕截图 2024-03-08 083457.png",
      "text": "新闻"
    }]
  }

运行效果：

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

4.networkTimeout配置项

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

5.debug配置项

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

2.4.2页面配置文件

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

 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信",
    "navigationBarBackgroundColor": "#ffffff"
  },

2.5逻辑层文件

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

2.5.1项目逻辑文件

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

        App()函数用于注册一个小程序，参数为 0bject，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如表所示

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

案例demo代码：

  onShow: function(options){
    console.log("小程序显示");
  },
  onHide: function(){
    console.log("小程序进入后台");
  },

运行效果：

2.5.2页面逻辑文件

        页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件

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

1.设置初始数据

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

        视图层可以通过 WXML对数据进行绑定

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

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

        （1）onLoad：页面加载函数

        （2）onShow：页面显示函数

        （3）onReady：页面数据绑定函数

        （4）onHide：页面隐藏函数

        （5）onUnload：页面卸载函数

demo数据初始、数据绑定与运行效果：

代码：

test1.js文件

Page({
data:{
  name:"蔡徐坤",//字符串
  age:30,//数字
  birthday:[{year:1999},{month:8},{date:24}],//数组
  object:{hobby:"computer"}//对象
},

test1.wxml文件

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

运行效果：

demo练习：

代码：

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

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

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

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

运行结果：

控制台就会输出onLoad（页面加载）、onShow（页面显示）、onReady（页面初次渲染完成）

2.6页面结构文件

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

2.6.1数据绑定

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

1.简单绑定

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

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

示例代码如下：

test1.js文件

data:{
  name:"蔡徐坤",//字符串
  age:30,//数字
  birthday:[{year:1999},{month:8},{date:24}],//数组
  object:{hobby:"computer"},//对象
  num:100,
  student:[
    {name:"Tom",age:"15",hobby:"game"},
    {name:"Make",age:"14",hobby:"game"}
  ]
},

test1.wxml文件

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

运行效果：

2.运算

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

示例代码如下：

<view>爱好:{{object.hobby}}</view>
<view>算术运算:{{age+num}}</view>
<view>逻辑运算:{{age!=num}}</view>
<view>三元运算:{{age==1?num:30}}</view>

运行效果：

2.6.2条件数据绑定

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

1.wx：if条件数据绑定

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

        当需要添加多个分支块时，可以使用wx:elif、wx:else 属性。当控制表达式为tue 时数据穿定一个分支:当控制表达式为false时，数据绑定另一个分支

<view wx:if="{{age==30}}">1</view>
<view wx:elif="age>num">错</view>
<view wx:else>对</view>

效果：

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

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

<block wx:if ="{{true}}"
<view >viewl</iew >
<view >view2 </view >
</block>

2.6.3列表数据绑定

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

1.wx:for

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

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

        在上面的代码中，items为一个数组，数组当前项的下标变量名默认为index，数组当前项的变量名默认为item，示例代码如下:

test1.js文件：

 student:[
    {name:"Tom",age:"15",hobby:"game"},
    {name:"Make",age:"14",hobby:"game"}
  ]

test1.wxml文件

<view wx:for="{{student}}">
  <text>{{index}}姓名：{{item.name}}年龄：{{item.age}}</text>
</view>

2.block wx:for

        与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定例如，上面的代码可以被修改为以下形式，效果不变：

<block wx:for ="{{istudent}}">
    <view>
        <text >{{index}} </text>
        <text >{{item. name}}</text >
        <text >{{iitem.age}}< /text >
        <text >{{iitem.hobby}} </text >
    </view>
</block >

2.6.4模版

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

1.定义模版

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

<template name="模版名">

2.调用模版

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

页面事件

冒泡事件：

2.7页面样式

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

1.尺寸单位

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

2.样式导入

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

3.选择器

        目前，WXSS 仅支持 CSS 中常用的选择器

4.WXSS常用属性

        WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如表所示