外网SpringBoot项目迁移到内网无法加载maven依赖

 一，小程序基础知识

1.了解：

2.介绍： 

主体文件 又称小程序全局文件，顾名思义，全局文件能够作用于整个小程序，影响到小程序的每个页面，且主体文件必须放到项目的根目录下，主要由三部分组成：

页面文件 是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，一个页面一个文件夹，每个页面通常由四个文件组成，每个文件只对当前页面有效：  

📌 注意事项：

1. 页面文件，wxss、json 文件能够覆盖主体文件中的样式和配置

2. 强烈建议：页面文件夹名称和页面文件名称要保持一致 感叹号

新建小程序文件和文件夹作用清单 : 

3.如何调试小程序

在进行项目开发的时候，不可避免的需要进行调试，那么如何调试小程序呢 ?

4. 如何新建页面

第一种方式：

1. 在 pages 目录上 点击右键 新建文件夹，输入页面目录的名称，例如：list

2. 在 list 目录上 点击右键 点击 page，输入页面文件的名称，例如：list

第二种方式：

在 app.json 的 pages 选项中，新增页面路径即可

在新增页面目录以后，会自动在 pages 目录下生成页面文件

二，小程序配置文件

1. 配置文件介绍

JSON是一种轻量级的数据格式，常用于前后端数据的交互，但是在小程序中，JSON 扮演的静态配置的角色，用于配置当前页面或组件的属性和行为，每个页面或组件也都可以拥有一个对应的 json 文件。

小程序中常见的配置文件有以下几种：

1. 全局配置文件：app.json ➡ 小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。

2. 局部配置文件：页面.json ➡ 小程序页面配置文件，用于配置当前页面的窗口样式、页面标题等

3. 项目配置文件：project.config.json ➡ 小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置

4. 搜索配置文件：sitemap.json ➡ 配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率

下面我们依次来说明一下它们的用途。

2. 全局配置

小程序 app.json 文件是小程序的全局配置文件，用于配置小程序的一些全局属性和页面路由。

当小程序启动时，会自动读取 app.json 文件中的配置，根据配置生成对应的页面和组件、界面表现、网络超时时间、底部 tab，在小程序运行过程中起着关键的作用。

小程序配置 / 全局配置 (qq.com)

{
  "window": {
    "backgroundTextStyle": "light",
    "backgroundColor": "#eee",
    "navigationBarBackgroundColor": "#f3514f",
    "navigationBarTitleText": "慕尚花坊",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  }
}

注意：widows配置不生效测试出来影响的因素：

tabBar 配置项

List 配置项：list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序，每个项都是一个对象

我们按照下图来配置 tabBar

3. 页面配置

小程序的页面配置，也称局部配置，每一个小程序页面也可以使用自己的 .json 文件来对本页面的窗口表现进行配置

需要注意的是：页面配置文件的属性和 全局配置文件中的 window 属性几乎一致

只不过这里不需要额外指定 window 字段，因此如果出现相同的配置项，页面中配置项 会覆盖全局配置文件中相同的配置项。

4. 项目配置文件

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如 编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

5. 支持使用 sass/less

小程序代码包要求代码文件为 wxml / wxss / js / json / wxs。

如果我们希望使用 sass 或 less 去开发小程序，就需要将 sass / less 文件编译成对应的 wxss 文件。

在 project.config.json 文件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"]，即可开启工具内置的 sass 编译插件。 如需同时开启 typescript 编译插件，可将该字段修改为 ["typescript ", "sass"]。 目前支持三个编译插件：typescript、less、sass

配置好以后，需要将 .wxss 改成 .scss

官方文档：开发辅助，支持以编译插件的形式，扩展编译功能

6. sitemap.json

微信现已开放小程序内搜索，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。语法如下：

常用配置项：

三，常用样式和组件

1. 组件和样式介绍

在开 Web 网站的时候：

页面的结构由 HTML 进行编写，例如：经常会用到 div、p、 span、img、a 等标签

页面的样式由 CSS 进行编写，例如：经常会采用 .class 、#id 、element 等选择器

但在小程序中不能使用 HTML 标签，也就没有 DOM 和 BOM，同时仅仅支持部分 CSS选择器

不过不用担心，小程序中提供了同样的角色：

其中 WXML 充当的就是类似 HTML 的角色，只不过在 WXML 中没有div、p、 span、img、a 等标签，在 WXML 中需要使用 小程序提供的 view、text 、image、navigator 等标签来构建页面结构，小程序提供的这些标签，我们称为 "组件"，开发者可以通过组合这些基础组件进行快速开发。

WXSS 则充当的就是类似 CSS 的角色，WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改，新增了尺寸单位 rpx、提供了全局的样式和局部样式，另外需要注意的是WXSS 仅支持部分 CSS 选择器。

小程序给提供的组件文档：WXML

小程序样式官方文档：WXSS

2. 样式-尺寸单位

随着智能手机的发展，手机设备的宽度也逐渐多元化，这就需要开发者在开发的时候，需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题，微信小程序推出了 rpx 单位

小程序运行在手机移动端，宿主环境是微信，因为手机尺寸的不一致，在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，会采用一些技巧来算像素单位从而实现页面的适配。而 WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可。

rpx: 小程序新增的拓展单位，可以根据屏幕宽度进行自适应，小程序规定任何型号手机：屏幕宽都为 750 rpx。

落地代码：

3. 样式-全局样式和局部样式

在进行网页开发时，我们经常创建 global.css、base.css 或者 reset.css 作为全局样式文件进行重置样式或者样式统一，然后在每个页面或组件中写当前页面或组件的局部样式，小程序中也存在全局样式和局部样式，这一节我们来学习一下小程序中的全局样式和局部样式

知识点：

全局样式：指在 app.wxss中定义的样式规则，作用于每一个页面，例如：设置字号、背景色、宽高等全局样式

局部样式：指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

案例：

在 app.wxss 中定义全局样式，设置 text 组件的颜色以及字号大小，这段样式将会作用于任意页面的 text 组件

然后在 cate.wxss 中定义局部样式，设置 text 组件的颜色以及字号大小，会发现局部样式将全局样式进行了覆盖

4. 划分页面结构-view 组件

使用小程序常用的组件实现项目首页的效果，会使用以下组件：

分析页面结构，使用 view 组件将页面拆分成 4 个区域

view 是小程序提供的组件，是容器组件，类似于 div，也是一个块级元素，占据一行

5. 首页轮播图区域-swiper 组件

在前面我们已经介绍了小程序的组件应该怎么使用，又学习了小程序中的样式，接下来带着大家使用小程序提供的组件，完成小程序的基本结构，通过这个案例我们能够学习到小程序常用的组件以及一些布局技巧。

知识点：

在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML 、CSS 实现轮播图的样式结构，然后使用 JS 控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多。

在小程序中，提供了 swiper 和 swiper-item 组件实现轮播图：

1. swiper：滑块视图容器，常用来实现轮播图，其中只可放置 swiper-item 组件，否则会导致未定义的行为

2. swiper-item：仅可放置在swiper组件中，宽高自动设置为100%，代表 swiper 中的每一项

我们可以使用 swiper 组件提供的属性，实现轮播图的订制，常见属性如下：

落地代码：

➡️ pages/index/index.wxml  

<!-- 轮播图区域 -->
<view class="swiper">
  <!-- swiper 组件实现轮播图区域的绘制 -->
  <!-- swiper 组件，滑块视图容器 -->
  <swiper
    circular
    autoplay
    indicator-dots
    interval="2000"
    indicator-color="#efefef"
    indicator-active-color="#ccc"
  >
    <!-- swiper 组件内部不能写其他组件或内容 -->
    <!-- 在 swiper 组件内部只能写 swiper-item 组件 -->
    <!-- swiper-item 组件只能放到 swiper 组件中，宽高自动设置为 100% -->
    <swiper-item>
      第一张轮播图
    </swiper-item>

    <swiper-item>
      第二张轮播图
    </swiper-item>

    <swiper-item>
      第三张轮播图
    </swiper-item>
  </swiper>
</view>

 ➡️ pages/index/index.scss

page {
  height: 100vh;
  background-color: #efefef !important;
}

swiper {
  swiper-item {

    // 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器
    // 下面这段代码在编译以后，生成的代码是 swiper-item:first-child
    &:first-child {
      background-color: skyblue;
    }

    &:nth-child(2) {
      background-color: lightcoral;
    }

    &:last-child {
      background-color: lightseagreen;
    }
  }
}

6. 首页轮播图区域-image 组件

在这一节中，我们开始来学习小程序中的image组件，通过学习该组件掌握组件的学习方法和使用技巧

在小程序中没有 img 标签，添加图片需要使用小程序提供的image组件，image组件的语法如下：

落地代码

➡️ pages/index/index.wxml

<!-- 轮播图区域 -->
<view class="swiper">
  <swiper
    circular
    autoplay
    indicator-dots
    interval="2000"
    indicator-color="#efefef"
    indicator-active-color="#ccc"
  >
    <swiper-item>
      <!-- 在小程序中图片不能使用 img 标签，使用后不会生效 -->
      <!-- <img src="../../assets/banner/banner-1.png" alt=""/> -->
​
      <!-- 需要使用 images 组件 -->
      <!-- image 组件不给 src 属性设置默认值，也占据宽和高 -->
      <!-- image 默认具有宽度，宽是 320px 高度是 240px -->
​
      <!-- mode 属性：用来设置图片的裁切模式、纵横比例、显示的位置 -->
      <!-- show-menu-by-longpress 属性：长按转发给朋友、收藏、保存图片 -->
      <image src="../../assets/banner/banner-1.png" mode="aspectFill" show-menu-by-longpress />
    </swiper-item>
​
    <swiper-item>
      <image src="../../assets/banner/banner-2.png" />
    </swiper-item>
​
    <swiper-item>
      <image src="../../assets/banner/banner-3.png" />
    </swiper-item>
  </swiper>
</view>

➡️ pages/index/index.scss

/** index.wxss **/
page {
  height: 100vh;
  background-color: #efefef !important;
}
​
swiper {
  height: 360rpx;
​
  swiper-item {
    image {
      width: 100%;
      height: 100%;
    }
​
    // 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器
    // 下面这段代码在编译以后，生成的代码是 swiper-item:first-child
    // &:first-child {
    //   background-color: skyblue;
    // }
​
    // &:nth-child(2) {
    //   background-color: lightcoral;
    // }
​
    // &:last-child {
    //   background-color: lightseagreen;
    // }
  }
}

7. 公司宣传语区域-text 组件

落地代码：  

➡️ pages/index/index.wxml

<!-- 公司相关信息 -->
<view class="info">
  <!-- text 是文本组件，类似于 span，是行内元素 -->

  <!-- user-select：文本是否可选 -->
  <!-- space：是否连续展示空格 -->
  <!-- <text user-select space="ensp">同城        配送</text> -->

  <text>同城配送</text>
  <text>行业龙头</text>
  <text>半小时送达</text>
  <text>100% 好评</text>
</view>

 ➡️ pages/index/index.scss

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16rpx 0rpx;
  padding: 20rpx;
  font-size: 24rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

8. 商品导航的区域-组件结合使用

到目前为止我们已经学习了 view 、text、image 以及 swiper 和 swiper-item组件的使用

接下来我们继续来使用小程序提供的组件实现首页的功能，这节我们需要实现的是商品导航区域的结构

在网页开发中，实现该布局非常简单，使用 div 嵌套 或者 ul 包裹住 li，li 在包裹住 img 就能够实现该效果

但在小程序中没有 HTML 中的 div、ul、li 标签，所以绘制导航区域需要使用小程序提供的的组件，我们先来学习小程序的两个组件：

1. view：视图容器组件，相当于 HTML 中的 div，是一个块级元素，独占一行

2. text：文本组件，相当于 span，是一个行内元素

落地代码：

➡️ pages/index/index.wxml

<!-- view：视图容器，作用类似于 div，是一个块级元素，独占一行 -->
<view class="navs">
  <view>
    <!-- text：文本组件，类似于 span，是一个行内元素 -->
    <image src="/assets/cate-1.png" alt=""/>
    <text>爱礼精选</text>
  </view>
  <view>
    <image src="/assets/cate-2.png" alt=""/>
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="/assets/cate-3.png" alt=""/>
    <text>永生玫瑰</text>
  </view>
  <view>
    <image src="/assets/cate-4.png" alt=""/>
    <text>玫瑰珠宝</text>
  </view>
  <view>
    <image src="/assets/cate-5.png" alt=""/>
    <text>香水护体</text>
  </view>
</view>

 ➡️ pages/index/index.wxss

// 商品导航区域
.good-nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
    }

    text {
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
}

9. 跳转到商品列表页面-navigator

知识点：

点击商品导航区域，需要跳转到商品列表界面，在网页开发中，如果想实现页面的跳转需要使用 a 标签，在小程序中如果想实现页面的跳转则需要使用 navigator 组件，语法如下：

在小程序中，如果需要进行跳转，需要使用 navigation 组件，常用的属性有 2 个：

1. url ：当前小程序内的跳转链接

2. open-type ：跳转方式

   • navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

   • redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面

   • switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

   • reLaunch：关闭所有页面，打开到应用内的某个页面

   • navigateBack：关闭当前页面，返回上一页面或多级页面

落地代码：

➡️ pages/index/index.wxml ： 调整 view 为 navigator

<!-- view：视图容器，作用类似于 div，是一个块级元素，独占一行 -->
<view class="navs">
  <navigator url="/pages/list/list">
    <!-- text：文本组件，类似于 span，是一个行内元素 -->
    <image src="/assets/cate-1.png" alt=""/>
    <text>爱礼精选</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-2.png" alt=""/>
    <text>鲜花玫瑰</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-3.png" alt=""/>
    <text>永生玫瑰</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-4.png" alt=""/>
    <text>玫瑰珠宝</text>
  </navigator>
  <navigator url="/pages/list/list">
    <image src="/assets/cate-5.png" alt=""/>
    <text>香水护体</text>
  </navigator>
</view>

 ➡️ pages/index/index.wxss：

// 商品导航区域
.good-nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
+    navigator {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }

    image {
      width: 80rpx;
      height: 80rpx;
    }

    text {
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
}

10. 商品推荐区域-scroll-view

可滚动视图区域，适用于需要滚动展示内的场景，它可以在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容，scroll-view 组件可以设置滚动方向、滚动条样式、滚动到顶部或底部时的回调函数等属性，可以根据实际需求进行灵活配置。

3.10.1 scroll-view 横向滚动

知识点：

使用横向滚动时，需要添加 scroll-x 属性，然后通过 css 进行结构绘制，实现页面横向滚动

落地代码：

➡️ pages/index/index.wxml：  

<!-- 商品推荐区域 -->
<view class="hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

➡️ pages/index/index.wxss：  

.hot {
  margin-top: 16rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;
    background-color: lightblue;

    view{
      display: inline-block;
      width: 50%;
      height: 80rpx;

      &:last-child{
        background-color: lightseagreen;
      }

      &:first-child{
        background-color: lightpink;
      }
    } 
  }
}

3.10.2 scroll-view 纵向滚动

知识点：

使用竖向滚动时，需要给scroll-view一个固定高度，同时添加 scroll-y 属性，实现页面纵向滚动

落地代码：

➡️ pages/index/index.wxml：

<!-- 商品推荐区域 -->
<view class="hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>

  <scroll-view class="scroll-y" scroll-y>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

➡️ pages/index/index.wxss：

.hot {
  margin-top: 16rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;
    background-color: lightblue;

    view{
      display: inline-block;
      width: 50%;
      height: 80rpx;

      &:last-child{
        background-color: lightseagreen;
      }

      &:first-child{
        background-color: lightcoral;
      }
    } 
  }

+  .scroll-y {
+    height: 400rpx;
+    background-color: lightsalmon;
+    margin-top: 60rpx;
+
+    view {
+      height: 400rpx;
+
+      &:nth-child(odd) {
+        background-color: lightseagreen;
+      }
+
+      &:nth-child(even) {
+        background-color: lightcoral;
+      }
+    }  
+  }
}

3.10.3 实现商品推荐区域横向滚动

落地代码

➡️ pages/index/index.wxml：

<!-- 推荐商品 -->
<view class="good-hot">
  <scroll-view scroll-x class="scroll-x">
    
    <view>
      <view class="good-item">
        <image src="../../assets/floor/1.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>66</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/2.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>77</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/3.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>88</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/4.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>99</text>
      </view>
    </view>

    <view>
      <view class="good-item">
        <image src="../../assets/floor/5.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>100</text>
      </view>
    </view>

  </scroll-view>
</view>

 ➡️ pages/index/index.wxss：

// 推荐商品区域
.good-hot {
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;

    view {
      display: inline-block;
      width: 320rpx;
      height: 440rpx;
      margin-right: 16rpx;

      .good-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        text {
          &:nth-of-type(1) {
            font-weight: bold;
          }
        }
      }

      image {
        width: 100%;
        height: 320rpx;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

11. 字体图标的使用

在项目中使用到的小图标，一般由公司设计师进行设计，如果如果自行设计这些图标会比较麻烦且耗费时间，这时候我们就可以使用到阿里巴巴矢量图库，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。

阿里巴巴矢量图库是阿里巴巴集团推出的一个免费的矢量图标库和图标管理工具。它汇集了大量的精美图标资源，包括品牌图标和各种主题和分类的图标。用户可以在阿里巴巴矢量图库中搜索和浏览所需的图标，也可以上传和管理自己的图标资源。

小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。

首先我们先找到所需的图标，加入到项目库，进入项目库中生成链接。也快将字体图标库下载到本地

点击链接，会将生成的 CSS 在新的链接页面进行打开，ctrl + s，将该文件重命名为.wxss 后缀名，然后保存到项目根目录下的static 文件夹下。  

在全局样式文件app.wxss中导入fonts.wxss字体图标文件，然后获取到图标类名，在项目中使用即可，应用于页面

落地代码：

➡️ app.wxss：

 ➡️ pages/index/index.wxml：

➡️ pages/index/index.wxss：  

12. 背景图片的使用

当编写小程序的样式文件时，我们可以使用 background-image 属性来设置一个元素的背景图像，但是小程序的 background-image 不支持本地路径。  

如图，在使用了本地资源图片以后，微信开发者工具提供的提示：

本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签

四，事件处理

一个应用仅仅只有界面展示是不够的，还需要和用户做交互，例如：响应用户的点击、获取用户输入的值等等，在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作

1. 事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过 on 的方式绑定事件，也没有 click 等事件，小程序中绑定事件使用 bind 方法，click 事件也需要使用 tap 事件来进行代替，绑定事件的方式有两种：

第一种方式：bind:事件名，bind 后面需要跟上冒号，冒号后面跟上事件名

第二种方式：bind事件名，bind 后面直接跟上事件名

 事件处理函数需要写到 .js 文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数。例如：

// pages/home/home.js
Page({
  // 页面的初始数据
  data: {},

  // 事件处理程序
  handler () {
    console.log('我被执行啦~~~')
  }
    
  // 其他 coding...
})

 当组件触发事件时，绑定的事件的处理函数会收到一个事件对象，用来记录事件发生时的相关信息。在触发事件时，事件处理程序会主动的给我们传入一个参数 —— event（事件对象）

// pages/home/home.js
Page({
  // 页面的初始数据
  data: {},

  // 事件处理程序
  handler (event) {
    // console.log('我被触发了~~~')
    console.log(event)
  }
    
  // 其他 coding...
})

2. 绑定并阻止事件冒泡

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。

<view bindtap="parentHandler">
  <!-- 使用 bind 绑定的事件，会产生事件冒泡 -->
  <!-- <button bindtap="handler">按钮</button> -->

  <!-- 使用 catcht 绑定的事件，会阻止事件冒泡 -->
  <button catchtap="handler">按钮</button>
</view>

Page({
  // 页面的初始数据
  data: {},

  // 事件处理程序
  handler (event) {
    console.log('我是子绑定的事件 ~~~')
  },
  
  parentHandler () {
    console.log('我是父绑定的事件 ~~~')
  }
    
  // 其他 coding...
})

WXML 中冒泡事件列表如下表：

3. 事件传参-data-*自定义数据

在小程序中，可以通过事件传参的方式，将数据传递给事件处理函数。常见的事件包括点击事件、输入事件等。

在组件节点中可以通过 data- 的方式传递一些自定义数据，传递的数据可以通过事件对象的方式进行获取

在 wxml 文件中，使用 data-* 属性将数据传递给事件处理函数。例如：

在 js 文件中，可以通过 event.currentTarget.dataset 获取传递的数据  

// cate.js
Page({

  // 按钮触发的事件处理函数
  btnHandler (event) {
    // currentTarget 事件绑定者，也就是指：哪个组件绑定了当前事件处理函数
    // target 事件触发者，也就是指：哪个组件触发了当前事件处理函数
    // currentTarget 和 target 都是指按钮，因为是按钮绑定的事件处理函数，同时点击按钮触发事件处理函数
    // 这时候通过谁来获取数据都可以
    console.log(event.currentTarget.dataset.id)
    console.log(event.target.dataset.name)
  },


  // view 绑定的事件处理函数
  parentHandler (event) {
    // 点击蓝色区域(不点击按钮)
    // currentTarget 事件绑定者：view
    // target 事件触发者：view
    // currentTarget 和 target 都是指 view，如果想获取 view 身上的数据，使用谁都可以

    // 点击按钮(不点击蓝色区域)
    // currentTarget 事件绑定者：view
    // target 事件触发者：按钮
    // 如果想获取 view 身上的数据，就必须使用 currentTarget 才可以
    // 如果想获取的是事件触发者本身的数据，就需要使用 target
    console.log(event)

    // 在传递参数的时候，如果自定义属性是多个单词，单词与单词直接使用中划线 - 进行连接
    // 在事件对象中会被转换为小托峰写法
    console.log(event.currentTarget.dataset.parentId)

    // 在传递参数的时候，如果自定义属性是多个单词，单词如果使用的是小托峰写法
    // 在事件对象中会被转为全部小写的
    console.log(event.currentTarget.dataset.parentname)
  }

})

4. 事件传参-mark 自定义数据

小程序进行事件传参的时候，除了使用 data-* 属性传递参数外，还可以使用 mark 标记传递参数

mark是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据（类似于 dataset ）

mark 和 dataset 很相似，主要区别在于：

mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值 (事件委托的)

dataset 仅包含触发事件那一个节点的 data- 属性值。

在 wxml 文件中，使用 mark:自定义属性 的方式将数据传递给事件处理函数  

// cart.js
Page({

  // 按钮绑定的事件处理函数
  btnHandler (event) {
    console.log(event.mark.id)
    console.log(event.mark.name)
  },

  // view 绑定的事件处理函数
  parentHandler (event) {
    // 先点击蓝色区域 (不点击按钮)
    // 通过事件对象获取的是 view 身上绑定的数据

    // 先点击按钮 (不点击蓝色区域)
    // 通过事件对象获取到的是 触发事件的节点 已经 父节点身上所有的 mark 数据
    console.log(event)
  }

})

五，模板语法

1. 声明和绑定数据

小程序页面中使用的数据均需要在 Page() 方法的 data 对象中进行声明定义

在将数据声明好以后，需要在 WXML 中绑定数据，数据绑定最简单的方式是使用 Mustache 语法（双大括号）将变量包起来。

在 {{ }} 内部可以做一些简单的运算，支持如下几种方式：

1. 算数运算

2. 三元运算

3. 逻辑判断

4. 其他… 

定义数据：  

使用数据：

➡️ pages/index/index.wxml

<!-- 如果需要展示数据，在 wxml 中需要使用双大括号写法将变量进行包裹 -->

<!-- 展示内容 -->
<view>{{ school }}</view>
<view>{{ obj.name }}</view>

<!-- 绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹 -->
<view id="{{ id }}">绑定属性值</view>

<!-- 如果属性值是布尔值，也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}" />

<!-- 算术运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view>

<!-- 三元运算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view>

<!-- 逻辑判断 -->
<view>{{ id === 1 }}</view>

<!-- 在双大括号写法内部，只能写表达式，不能写语句，也不能调用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
<!-- <view>{{ for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{{ obj.name.toUpperCase() }}</view>

 ➡️ pages/index/index.js

// index.js
Page({

  // 在小程序页面中所需要使用的数据均来自于 data 对象
  data: {
    id: 1,
    isChecked: false,
    school: '尚硅谷',
    obj: {
      name: 'tom'
    }
  }

})
     

2. 声明和修改数据

  小程序中修改数据并不能直接进行赋值，而是要通过调用 this.setData 方法才能实现

将需要修改的数据以 key:value 的形式传给 this.setData 方法。

this.setData 方法有两个作用：

Page({
  // 页面的初始数据
  data: {
    num: 1
  },

  updateNum() {
    this.setData({
      // key 是需要修改的数据
      // value 是最新值
      num: this.data.num + 1
    })
  }
 
  // coding...
}

3. setData-修改对象类型数据

在实际开发中，我们经常会在 data 中声明对象类型的数据，小程序中通过调用 setData 方法可以修改页面的数据，包括对象类型的数据。下面是修改对象类型数据的方法：

1）定义一个对象

Page({
  // 定义页面中使用的数据
  data: {
    userInfo: {
      name: 'Tom',
      age: 10,
      gender: '男'
    }
  }
}

2） 修改对象中的单个属性：

this.setData({
  'userInfo.name': 'Jerry'
})

3） 修改对象中的多个属性

// 修改对象中的多个属性
this.setData({
  'userInfo.name': 'Jerry',
  'userInfo.age': 100
})

4）使用 ES6 的展开运算符

在修改对象类型的数据时，可以使用 ES6 的展开运算符先复制对象，然后利用新值对旧值覆盖的方式修改

const userInfo = {
  ...this.data.userInfo,
  name: 'Jerry',
  age: 100
}

// 修改对象中的多个属性
this.setData({
  userInfo
})

 5）使用解构赋值修改对象属性

在修改对象类型的数据时，可以使用解构赋值来修改对象属性

// 将 userInfo 从 data 中进行解构
const { userInfo } = this.data
// 产生一份新数据
const newUserInfo = {
  ...userInfo,
  name: 'Jerry',
  age: 100
}
// 修改对象中的多个属性
this.setData({
  userInfo: newUserInfo
})

 6）使用 Object.assign 方法合并对象

在修改对象类型的数据时，可以使用 Object.assign 方法将多个对象合并为一个对象

// 使用 Object.assign 方法将多个对象合并为一个对象
const userInfo = Object.assign(
  this.data.userInfo, 
  { name: 'Jerry' },
  { age: 100 }
)

// 修改对象中的多个属性
this.setData({
  userInfo
})

 7）删除对象中的属性

在删除对象中的属性时，不能使用 delete 操作符，因为小程序的数据绑定机制不支持监听 del

// 使用展开运算符拷贝一份数据，产生一个新对象
const newUser = { ...this.data.userInfo }
// 使用 delete 删除新对象中的属性
delete newUser.age

this.setData({
  // 将新的对象进行赋值
  userInfo: newUser
})

4. setData-修改数组类型数据

数组类型数据也是经常会使用的数据格式之一，下面是修改数组类型数据的方法：

1. 定义一个数组

2.3.使用数组的 concat 方法合并数组

在修改数组类型的数据时，可以使用数组的 concat 方法来合并数组

3.使用数组的 push 方法新增属性

在修改数组类型的数据时，可以使用数组的 push 方法来添加元素

4.使用 ES6 的展开运算符

在数组类型的数据时，可以使用 ES6 的展开运算符先复制数组，然后进行合并

5.修改数组中某个元素的值：

利用索引的方式进行修改，但必须使用 wx:for 来进行渲染数组，否则会出现错误

6.使用数组的 filter 方法删除元素

在修改数组类型的数据时，可以使用数组的 filter 方法来删除元素

5. 数据绑定-简易双向绑定

在 WXML 中，普通属性的绑定是单向的，例如：

如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。但如果用户修改了输入框里的值，却不会同时改变 data 中的 num 。

如果需要在用户输入的同时也将 data 中的数据修改 ，需要借助简易双向绑定机制。此时可以在对应项目之前加入 model: 前缀即可，例如：

如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。

如果输入框的值被改变了， data 的数据也会随着改变。

同时， WXML 中所有绑定了数据的位置也会被一同更新

落地代码：  

6. 列表渲染-基本使用

基本使用

列表渲染：就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上

只需要在组件上使用 wx:for 属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件

在使用 wx:for 对数组进行遍历的时候，建议加上 wx:key 属性，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。

wx:key 的值以两种形式提供：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且 提高列表渲染时的效率 。

 落地代码：

<!-- 如果需要进行列表渲染，需要使用 wx:for 属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是 item -->
<!-- 每一项下标（索引）的变量名默认是 index -->

<!-- 如果渲染的是数组，item：数组的每一项，index：下标 -->
<!-- <view wx:for="{{ numList }}">{{ item }} - {{ index }}</view> -->

<!-- 如果渲染的是对象，item：对象属性的值，index：对象属性 -->
<!-- <view wx:for="{{ obj }}">{{ item }} - {{ index }}</view> -->

<!-- ------------------------ 关于 Key --------------------------------- -->

<!-- wx:key 提升性能 -->
<!-- wx:key 的属性值不需要使用双大括号进行包裹，直接写遍历的数组 中 item 的某个属性 -->

<!-- wx:key 属性值有两种添加形式 -->
<!-- 字符串，需要是遍历的数组 中 item 的某个属性，要求该属性是列表中唯一的字符串或者数字，不能进行动态改变 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view>

<!-- 保留关键字 *this，*this 代表的是 item 本身，item 本身是唯一的字符串或者数字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>

7. 列表渲染-使用进阶

修改默认下标和变量名：

如果需要对默认的下标和变量名进行修改，可以使用 wx:for-item 和 wx:for-index

渲染多节点结构块：

如果需要渲染一个包含多节点的结构块，可以使用一个 <block/> 标签将多个组件包装起来

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。  

8. 条件渲染

知识点：

条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

wx:if 和 hidden 二者的区别：

 落地代码：

<!-- 使用 wx:if、wx:elif、wx:else 属性组控制元素的隐藏和控制 -->
<view wx:if="{{ num === 1 }}">num 等于 {{ num }}</view>
<view wx:elif="{{ num === 2 }}">num 等于 {{ num }}</view>
<view wx:else>大于 2</view>

<view hidden="{{ num !== 1 && num !== 2 && num !== 3 && num < 3}}">
  {{ num < 3 ? 'num 等于' + num : '大于 2' }}
</view>

<button type="primary" bindtap="updateNum">修改数据</button>

六，生命周期

1. 小程序运行机制

冷启动与热启动：

小程序启动可以分为两种情况，一种是冷启动，一种是热启动

冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动

热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态

前台 以及 后台状态：

小程序启动后，界面被展示给用户，此时小程序处于「前台」状态。

当用户「关闭」小程序时，小程序并没有真正被关闭，而是进入了「后台」状态，当用户再次进入微信并打开小程序，小程序又会重新进入「前台」状态

切后台的方式包括但不限于以下几种：

挂起：

小程序进入「后台」状态一段时间后（5 秒），微信停止小程序 JS 线程执行，小程序进入「挂起」状态，当开发者使用了后台播放音乐、后台地理位置等能力时，小程序可以在后台持续运行，不会进入到挂起状态

销毁：

如果用户很久没有使用小程序，或者系统资源紧张，小程序会被销毁，即完全终止运行。

当小程序进入后台并被「挂起」后，如果很长时间（目前是 30 分钟）都未再次进入前台，小程序会被销毁

当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。

2. 小程序更新机制

在访问小程序时，微信会将小程序代码包缓存到本地。

开发者在发布了新的小程序版本以后，微信客户端会检查本地缓存的小程序有没有新版本，并进行小程序代码包的更新。

小程序的更新机制有两种：启动时同步更新 和 启动时异步更新

启动时异步更新

启动时同步更新：微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。如果 用户长时间未使用小程序时，会强制同步检查版本更新

启动时异步更新

启动时异步更新：在启动前没有发现更新，小程序每次 冷启动 时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动进行使用，当前访问使用的依然是本地的旧版本代码

在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
   
  onLaunch: function () {
    const updateManager = wx.getUpdateManager()

    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      console.log(res.hasUpdate)
    })

    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success(res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
          }
        }
      })
    })

    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
    })
  }
  
})

 落地代码：  

// app.js
App({
  
  // onLaunch 是小程序的钩子函数，这个钩子函数在冷启动时肯定会执行到
  // 当小程序冷启动时，会自动微信后台请求新版本的信息，如果有新版本，会立即进行下载
  onLaunch () {
    // 使用 wx.getUpdateManager 方法监听下载的状态
    const updateManager = wx.getUpdateManager()

    // 当下载完成新版本以后，会触发 onUpdateReady 回调函数
    updateManager.onUpdateReady(function () {
      // 在回调函数中给用户提示，
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success(res) {
          if (res.confirm) {
            // 强制当前小程序使用新版本并且会重启当前小程序
            updateManager.applyUpdate()
          }
        }
      })
    })
  }

})

3. 生命周期介绍

应用生命周期是指应用程序进程从创建到消亡的整个过程

小程序的生命周期指的是 小程序从启动到销毁的整个过程

在打开一个小程序应用的时候都需要经历一系列的初始化步骤，比如页面是否加载完成、页面是否初次渲染完成等等。

在此过程中，小程序也会运行被称为生命周期钩子的函数，这些函数由小程序框架本身提供，被称为生命周期函数，生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑。让开发者有机会在特定阶段运行自己的代码。

小程序的生命周期分类三类：应用级别、页面级别和组件级别 3 种类型，我们先学习应用级别和页面级别的生命周期

4. 应用级别生命周期

知识点：

应用生命周期通常是指一个小程序从 启动 → 运行 → 销毁的整个过程

应用生命周期伴随着一些函数，我们称为 应用生命周期函数，应用生命周期函数需要 在 app.js 文件的 App() 方法中定义

当整个小程序应用运行到某个时机的时候，我们需要做一些事情。例如：当小程序启动成功之后，我们要获取小程序的一些信息，就可以在小程序启动成功时的钩子函数中写代码获取我们想要的信息。

小程序启动后，后台会首先完成小程序的初始化，该过程只会触发一次；之后会完成显示的工作，用户可以操作小程序从前台进入后台以及从后台回复到前台显示；小程序在后台运行一段时间，当系统资源不足时会被注销。

落地代码：

➡️ app.js

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    // 监听小程序初始化
    console.log('onLaunch: 当小程序初始化完成时，会触发 onLaunch')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    // 监听小程序的显示
    console.log('onShow: 当小程序启动，或从后台进入前台显示')
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    // 监听小程序的隐藏
    console.log('onHide: 小程序从前台进入后台')
  }
})

5. 页面级别生命周期

知识点：

页面生命周期就是指小程序页面从 加载 → 运行 → 销毁的整个过程

当某个页面运行到某个时机的时候，我们需要做一些事情，例如: 当某个页面加载完毕之后，需要发请求获取当前页面所需的数据，就可以在对应的页面加载完成后的钩子函数中执行发送请求的代码。

小程序中的一个页面都需要在对应页面的 .js 文件中调用 Page() 方法来注册。Page() 接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

 落地代码：

// pages/home/home.js
Page({
   
  // coding...
    
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    console.log('页面加载完毕')
  },

  // 生命周期函数--监听页面显示
  onShow: function () {
    console.log('监听页面显示，此时页面处于显示状态')
  },

  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    console.log('页面初次渲染已经完成')
  },

  // 生命周期函数--监听页面隐藏
  onHide: function () {
    console.log('当前页面处于隐藏状态')
  },

  // 生命周期函数--监听页面卸载
  onUnload: function () {
    console.log('页面卸载时触发')
  }
})

6. 生命周期两个细节补充说明

1. tabBar 页面之间相互切换，页面不会被销毁

2. 点击左上角，返回上一个页面，会销毁当前页面(被打开页面)

七，微信原生 API

1. API 基础

小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等，几乎所有小程序的 API 都挂载在 wx 对象底下，例如：wx.chooseMedia()、wx.request(), wx 对象实际上就是小程序的宿主环境微信所提供的全局对象

通常，在小程序 API 有以下几种类型：

1. 事件监听 API：约定以 on 开头 API 用来监听某个事件是否触发，例如：wx.onThemeChange()

2. 同步 API：约定以 Sync 结尾的 API 都是同步 API，例如：wx.setStorageSync()

3. 异步 API：大多数 API 都是异步 API，例如：wx.setStorage()

异步 API 支持 callback & Promise 两种调用方式：

1. 当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 Promise

2. 部分接口如 request, uploadFile 本身就有返回值，因此不支持 Promise 风格的调用方式，它们的 promisify 需要开发者自行封装。

小程序 API 介绍

微信小程序 API 文档

2. 网络请求

知识点：

在微信小程序中，如果需要发起 HTTPS 网络请求需要使用：wx.request()，语法如下：

wx.request({
  // 接口地址，仅为示例，并非真实的接口地址
  url: 'example.php',
  // 请求的参数
  data: { x: '' },
  // 请求方式
  method: 'GET|POST|PUT|DELETE',
  success (res) {
    console.log(res.data)
  },
  fail(err) {
    console.log(err)
  }
})

 注意：wx.request() 请求的域名需要在小程序管理平台进行配置，如果小程序正式版使用wx.request请求未配置的域名，在控制台会有相应的报错。

这时候就需要在小程序管理后台进行设置请求的域名，打开微信公众后台：点击左侧 开发 → 开发管理 → 开发设置 → 服务器域名。域名只支持 https 而且要求已备案

但一般我们在开发阶段时，处于开发阶段的服务器接口可能还没部署到对应的域名下，经常会通过另一个域名来进行开发调试，考虑到这一点，为了方便开发者进行开发调试，开发者工具、小程序的开发版和小程序的体验版在某些情况下允许 wx.request 请求任意域名 (只适用于开发环境，只能在小程序开发者工具中生效)，在开发工具中设置步骤如下：

 将 不校验合法域名、web-view (业务域名)、TLS版本以及HTTPS证书 勾选上：

 落地代码：

Page({
  // 页面的初始数据
  data: {},

  // 获取数据
  getPostInfo() {
    wx.request({
      url: 'https://jsonplaceholder.typicode.com/posts/1',
      method: 'GET',
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    })
  },
    
  // coding...
}

3. 界面交互

小程序还提供了一些用于界面交互的 API，如消息提示框、模态对话框、 loading 提示框等等

3.1 loading 提示框

知识点：

小程序提供了一些用于界面交互的 API，例如： loading 提示框、消息提示框、模态对话框等 API。

loading 提示框常配合网络请求来使用，用于增加用户体验，对应的 API 有两个：

1. wx.showLoading 显示加载提示框

2. wx.hideLoading 隐藏加载提示框

语法如下：  

官方文档：

wx.showLoading 官方文档

wx.hideLoading 官方文档

落地代码：

Page({

  data: {
    list: []
  },

  // 获取数据
  getData () {

+     // 显示 loading 提示框
+     wx.showLoading({
+       // 用来显示提示的内容
+       // 提示的内容不会自动换行，如果提示的内容比较多，因为在同一行展示
+       // 多出来的内容就会被隐藏
+       title: '数据加载中...',
+       // 是否展示透明蒙层，防止触摸穿透
+       mask: true
+     })

    // 如果需要发起网络请求，需要使用 wx.request API
    wx.request({
      // 接口地址
      url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
      // 请求方式
      method: 'GET',
      // 请求参数
      data: {},
      // 请求头
      header: {},
      // API 调用成功以后，执行的回调
      success: (res) => {
        // console.log(res)
        if (res.data.code === 200) {
          this.setData({
            list: res.data.data
          })
        }
      },
      // API 调用失败以后，执行的回调
      fail: (err) => {
        console.log(err)
      },
      // API 不管调用成功还是失败以后，执行的回调
      complete: (res) => {
        // console.log(res)

+         // 关掉 loading 提示框
+         // hideLoading 和 showLoading 必须结合、配对使用才可以
+         wx.hideLoading()
      }
    })

  }

})

3.2 模态对话框以及消息提示框

知识点：

wx.showToast()：消息提示框用来根据用户的某些操作来告知操作的结果，如退出成功给用户提示，提示删除成功等，语法如下：

wx.showModal() 模态对话框也是在项目中频繁使用的一个小程序 API，通常用于向用户询问是否执行一些操作，例如：点击退出登录，显示模态对话框，询问用户是否真的需要退出等等  

官方文档：

wx.showToast 官方文档

wx.showModal 官方文档

落地代码：

Page({
  // coding...
  
  // 删除商品
  async delHandler () {

    // showModal 显示模态对话框
    const { confirm } = await wx.showModal({
      title: '提示',
      content: '是否删除该商品 ?'
    })

    if (confirm) {
      // showToast 消息提示框
      wx.showToast({
        title: '删除成功',
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.showToast({
        title: '取消删除',
        icon: 'error',
        duration: 2000
      })
    }

  }
   
  // coding...

})

4. 本地存储

小程序中也能够像网页一样支持本地数据缓存，本地数据缓存是小程序存储在当前设备上硬盘上的数据，本地数据缓存有非常多的用途，我们可以利用本地数据缓存来存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。我们还可以利用本地缓存一些服务端非实时的数据提高小程序获取数据的速度，在特定的场景下可以提高页面的渲染速度，减少用户的等待时间。其包含以下 8个主要的 API

异步方式的 API，在调用的时候都需要传入对象类型的参数

同步方式执行的 API 在使用时简洁比较好，缺点是同步会阻塞程序执行，执行效率上相较异步版本要差一些。

落地代码：  

<button type="primary" bindtap="handler" size="mini" plain bindtap="setData">
  存储数据
</button>

<button type="primary" bindtap="handler" size="mini" plain bindtap="getData">
  获取数据
</button>

<button type="warn" bindtap="handler" size="mini" plain bindtap="delData">
  删除数据
</button>

<button type="warn" bindtap="handler" size="mini" plain bindtap="clearData">
  移除数据
</button>

Page({

  // 将数据存储到本地
  setStorage () {

    // 第一个参数：本地存储中指定的 key
    // 第二个参数：需要存储的数据
    // wx.setStorageSync('num', 1)

    // 在小程序中
    // 如果存储的是对象类型数据，不需要使用 JSON.stringify 和 JSON.parse 进行转换
    // 直接进行存储和获取即可
    // wx.setStorageSync('obj', { name: 'tom', age: 10 })

    // ------------------- 异步 API -------------------
 
    wx.setStorage({
      key: 'num',
      data: 1
    })

    wx.setStorage({
      key: 'obj',
      data: { name: 'jerry', age: 18 }
    })

  },

  // 获取本地存储的数据
  async getStorage () {

    // 从本地存储的数据中获取指定 key 的数据、内容
    // const num = wx.getStorageSync('num')
    // const obj = wx.getStorageSync('obj')

    // console.log(num)
    // console.log(obj)

    // ------------------- 异步 API -------------------

    const { data } = await wx.getStorage({
      key: 'obj'
    })

    console.log(data)

  },

  // 删除本地存储的数据
  removeStorage () {

    // 从本地移除指定 key 的数据、内容
    // wx.removeStorageSync('num')

    // ------------------- 异步 API -------------------

    wx.removeStorage({
      key: 'num'
    })

  },

  // 清空本地存储的全部数据
  clearStorage () {
    // wx.clearStorageSync()
      
    // ------------------- 异步 API -------------------

    wx.clearStorage()
  },

})

5. 路由与通信

知识点：

在小程序中实现页面的跳转，有两种方式：

1. 声明式导航：navigator 组件

2. 编程式导航：使用小程序提供的 API

   • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

   • wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

   • wx.switchTab()：跳转到 tabBar 页面，路径后不能带参数

   • wx.navigateBack()：关闭当前页面，返回上一页面或多级页面

3. 路径后可以带参数，参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收

   • 参数与路径之间使用 ? 分隔

   • 参数键与参数值用 = 相连

   • 不同参数用 & 分隔

   • 例如 path?key=value&key2=value2

落地代码：

Page({


  navigateTo() {

    // 保留当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面
    wx.navigateTo({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate'
    })

  },

  redirectTo() {

    // 关闭(销毁)当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面
    wx.redirectTo({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate'
    })

  },

  switchTab() {

    // 跳转到 tabBar 页面，不能跳转到 非 tabBar 页面，路径后面不能传递参数
    wx.switchTab({
      // url: '/pages/list/list'
      url: '/pages/cate/cate?id=1&name=tom'
    })

  },

  reLaunch() {

    // 关闭所有的页面，然后跳转到应用中某一个页面
    wx.reLaunch({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate?id=1&name=tom'
    })

  }

})

// list.js
Page({

  navigateBack() {

    // 关闭当前页面，返回上一页或者返回多级页面
    // 默认返回上一页
    wx.navigateBack({
      delta: 1
    })

  },

  onLoad(options) {
    console.log(options)
  }

})

6. 事件监听-上拉加载更多

上拉加载是小程序中常见的一种加载方式，当用户滑动页面到底部时，会自动加载更多的内容，以便用户继续浏览

小程序中实现上拉加载的方式：

1.在 app.json 或者 page.json 中配置距离页面底部距离： onReachBottomDistance；默认 50px

2.在 页面.js 中定义 onReachBottom 事件监听用户上拉加载

落地代码：