小程序基础 2.0

第四单元 小程序基础二

一、昨日知识点回顾

1.小程序中的事件
2.wxs
3.列表渲染
4.条件渲染

---

二、本单元知识点概述

（Ⅰ）指定教材

无

（Ⅱ）知识点概述

（Ⅲ）教学时长

---

三、本单元教学目标

（Ⅰ）重点知识目标

1.下拉加载和上拉刷新
2.小程序的页面跳转
3.网络请求

（Ⅱ）能力目标

1.掌握下拉加载和上拉刷新
2.掌握小程序的页面跳转
3.掌握网络请求

---

四、本单元知识详讲

4.1. 下拉刷新

4.1.1 下拉刷新的概念以及场景

• 概念：下拉刷新是移动端更新列表数据的交互行为，用户通过手指在屏幕上自上而下的滑动，可以触发页面的下拉刷新，更新列表数据

• 应用场景：在移动端，数据列表是常见的页面效果，更新列表数据是最基本的页面需求，相比于按钮刷新、定时刷新来说，下拉刷新的用户体验方便友好，已经成为移动端刷新列表数据的最佳解决方案

4.1.2 如何设置下拉刷新

• 方式一：需要在app.json 的 window 选项中或页面配置中开启enablePullDownRefresh。但是，一般情况下，推 荐在页面配置中为需要的页面单独开启下拉刷新行为

• 方式二：可以通过wx.startPullDownRefresh()触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致

• 示例代码：

  通过配置enablePullDownRefresh来为页面开启下拉刷新功能

  {
      "enablePullDownRefresh": true
  }

  通过wx.startPullDownRefresh()来为页面开启下拉刷新功能

  <button bindtap="refresh">点击刷新页面</button>

  Page({
      refresh() {
          console.log(1)
          wx.startPullDownRefresh()
      }
  })

  注意：即使通过startPullDownRefresh方法实现下拉刷新，也要在页面中配置enablePullDownRefresh属性

4.1.3 设置下拉刷新窗口的样式

• 需要在app.json 的 window 选项中或页面配置中修改backgroundColor和backgroundTextStyle选项

  • backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值

  • backgroundTextStyle 用来配置下拉刷新loading的样式，仅支持 dark 和 light

• 示例代码：

  {
      "backgroundColor": "#eee",
      "backgroundTextStyle": "dark"
  }

4.1.4 监听下拉刷新事件

• 为页面添加onPullDownRefresh()函数，可以监听用户在当前页面的下拉刷新事件

• 示例代码：

  // 监听下拉刷新的事件
  onPullDownRefresh() {
      console.log('页面刷新了')
      this.setData({
          arr: [1, 2]
      })
  }

4.1.5 停止下拉刷新

• 当通过startPullDownRefresh方法处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新

• 示例代码：

   <button bindtap="stopRefresh">点击停止刷新页面</button>

  stopRefresh() {
      wx.stopPullDownRefresh()
  }

4.2. 上拉加载

4.2.1 上拉加载的概念以及场景

• 概念：在移动端，随着手指不断向上滑动，当内容将要到达屏幕底部的时候，页面会随之不断的加载后续内容，直到没有新内容为止，我们称之为上拉加载更多。上拉加载更多的本质就是数据的分页加载。

• 应用场景：在移动端，列表数据的分页加载，首选的实现方式就是上拉加载更多。

4.2.2 设置上拉触底的距离

• 可以在app.json的window选项中或页面配置中设置触底距离onReachBottomDistance。单位为px，默认触底距离为 50px

• 演示

• 为页面添加onReachBottom()函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表 数据的效果

• 示例代码：

  <view wx:for="{{ arr }}" wx:key="index">{{ item }}</view>

  // 监听上拉加载事件
  onReachBottom() {
      this.setData({
          page: this.data.page+1
      })
      for(var i = 0; i < 10; i++) {
          this.data.arr.push((this.data.page - 1) * 10 + i)
      }
      this.setData({
          arr: this.data.arr
      })
  }

  {
      "onReachBottomDistance": 100 // 配置上拉触底的距离，默认是50px
  }

4.3. 其他事件

4.3.1 页面滑动事件onPageScroll

• 监听用户滑动页面事件。其中 Object 参数说明如下：

  属性	类型	说明
  scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

4.3.2 分享事件onShareAppMessage

• 监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。其中 Object 参数说明如下

  参数	类型	说明
  from	String	转发事件来源。button：页面内转发按钮；menu：右上角转发菜单
  target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否 则为 undefined
  webViewUrl	String	页面中包含<web-view>组件时，返回当前<web-view>的url

• 示例代码：

  <!-- 点击按钮会触发onShareAppMessage事件 -->
  <button type="primary" open-type="share">分享给朋友</button>

  // 监听用户的分享事件
  // 触发的反方式有两种，一种是点击右上角的分享菜单；另一种是页面被分享按钮
  onShareAppMessage(obj) {
      console.log(obj)
      // 自定义分享内容
      return {
          title: "分享的标题", // 分享的标题
          // 转发显示的图片链接
          imageUrl: "https://pics7.baidu.com/feed/35a85edf8db1cb138bd98e2f1ccfc34693584bfa.jpeg?token=2c3400e29e1abcf2a654c0186785bc72"
      }
  }

4.4. 小程序导航-声明式导航

• 页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：

  • 声明式导航：通过点击 navigator 组件实现页面跳转的方式

  • 编程式导航：通过调用小程序的 API 接口实现跳转的方式

4.4.1 导航到非tabbar页面

• 非 tabBar 页面指的是没有被当作 tabBar 进行切换的页面

• 示例代码：

  <navigator url="/pages/user/user">
    <button>跳转到user页面</button>
  </navigator>

• 提示：url 属性指定要跳转到的页面路径；其中，页面路径应该以 / 开头，且路径必须提前在 app.json 的 pages 节点下声明，才能实现正常的跳转

4.4.2 导航到tabbar页面

• tabBar页面指的是被当作 tabBar 进行切换的页面。如果 navigator 组件单纯使用 url 属性，无法导航到 tabBar页面，需要结合open-type属性进行导航

• 示例代码：

  <navigator url="/pages/index/index" open-type="switchTab">
    <button>跳转到首页</button>
  </navigator>

• navigator组件的更多用法

4.4.3 后退导航

• 如果要后退到上一页面或多级页面，需要把open-type设置为navigateBack，同时使用delta属性指定后退的层数

• 示例代码：

  <navigator open-type="navigateBack" delta="1">
      <button>后退一级</button>
  </navigator>

4.5. 小程序导航-编程式导航

4.5.1 导航到非tabbar页面

• 通过wx.navigateTo(Object object) 方法，可以跳转到应用内的某个页面。但是不能跳到tabbar页面

• Object参数对象的属性配置如下表：

  属性	类型	是否必填	说明
  url	string	是	需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数 与路径之间使用 ?分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
  success	function	否	接口调用成功的回调函数
  fail	function	否	接口调用失败的回调函数
  complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

• 示例代码：

  <button bindtap="goUser">跳转到user页面</button>

  goUser() {
      // 跳转到非tabBar页面
      wx.navigateTo({
          url: '/pages/user/user',
      })
  }

4.5.2 导航到tabbar页面

• 通过wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

• Object参数对象的属性配置如下表：

  属性	类型	是否必填	说明
  url	string	是	需要跳转的 tabBar 页面的路径（需在app.json的tabBar字段定义的页面），路径后不能带参数。
  success	function	否	接口调用成功的回调函数
  fail	function	否	接口调用失败的回调函数
  complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

• 示例代码：

  <button bindtap="goHome">跳转到首页</button>

  goHome() {
      // 跳转到非tabBar页面
      wx.switchTab({
          url: '/pages/index/index',
      })
  }

4.5.3 后退导航

• 通过wx.navigateBack(Object object) 方法，关闭当前页面，返回上一页面或多级页面

• Object参数对象的属性配置如下表：

  属性	类型	是否必填	说明
  delta	number	是	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
  success	function	否	接口调用成功的回调函数
  fail	function	否	接口调用失败的回调函数
  complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

• 示例代码：

  <button bindtap="goBack">后退一级</button>

  goBack() {
      wx.navigateBack({
          delta: 1,
      })
  }

4.6. 小程序导航-导航传参

4.6.1 声明式导航传参

• navigator组件的url属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

• 示例代码：

  <navigator url="/pages/user/user?id=0&username=zhangsan">跳转到用户</navigator>

• 注：？前面是路径，后面是参数

4.6.2 编程式导航传参

• wx.navigateTo(Object object) 方法的 object 参数中，url 属性用来指定需要跳转的应用内非 tabBar 的页面的 路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

• 示例代码：

  wx.navigateTo({
  	url: '/pages/user/user?id=0&username=zhangsan'
  })

4.6.3 接收传递的参数

• 不论是声明式导航还是编程式导航，最终导航到的页面可以在onLoad 生命周期函数中接收传递过来的参数

• 示例代码：

  onLoad(opts) {
      // opts:就是导航传递过来的参数
      console.log(opts)
  }

4.6.4 导航栏自定义编译模式快速传参

• 步骤

  1. 单击工具栏上的“普通编译”下拉菜单

  2. 单击下拉菜单中的“添加编译模式”选项

  3. 在弹出的“自定义编译条件窗口”，按需添加模式名称、启用页面、启动参数、进入场景等

4.7. 网络数据请求

• 在小程序中请求数据的限制

  • 每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名进行网络通信

  • 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议

  • 域名不能使用 IP 地址或 localhost

  • 域名必须经过 ICP 备案

  • 服务器域名一个月内可申请50次修改

4.7.1 小程序后台配置

步骤：登录微信小程序的管理后台--->开发--->开发管理--->开发设置--->服务器域名--->点击开始配置

4.7.2 跳过域名校验

微信开发工具当中--->右上角详情--->本地设置--->勾选不校验合法域名

注意：在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配 置正确。

4.7.3 小程序发送get与post请求

• 在小程序中要请求数据，可以调用小程序的wx.request()方法发起请求

• get请求

  wx.request({
  	url: "", // 请求的URL地址，必须基于HTTPS协议
      method: "GET", // 请求的类型。默认是GET
      data: { // 请求时像服务器传递的数据
          
      },
      success: function(data) { // 请求成功的回调函数
          // data: 服务器返回的数据
      },
      fail(err) { // 请求失败的回调函数
          // err: 错误信息
      }
  })

• post请求

  wx.request({
  	url: "", // 请求的URL地址，必须基于HTTPS协议
      method: "POST", // 请求的类型。默认是GET
      data: { // 请求时像服务器传递的数据
          
      },
      success: function(data) { // 请求成功的回调函数
          // data: 服务器返回的数据
      },
      fail(err) { // 请求失败的回调函数
          // err: 错误信息
      }
  })

4.7.4 小程序中没有跨域限制

• 在普通网站开发中，由于浏览器的同源策略限制，存在数据的跨域请求问题，从而衍生出了JSONP 和 CORS 两种主流的跨域问题解决方案。但是，小程序的内部运行机制与网页不同，小程序中的代码并不运行在浏览器中，因此小程序开发中，不存在数据的跨域请求限制问题

五、本单元知识总结

1.明白下单的流程

---

六、作业安排