⑤ 场景应用

1 界面常见的交互反馈

1.1 触摸反馈

• 小程序的 view 容器组件和 button 组件提供了 hover-class 属性，触摸时会往该组件加上对应的 class 改变组件的样式。

/*page.wxss */
.hover{
  background-color: gray;
}

<!--page.wxml -->
<button hover-class="hover"> 点击button </button>
<view hover-class="hover"> 点击view</view>

• 在点击 button 按钮处理更耗时的操作时，也会使用 button 组件的 loading 属性

<!--page.wxml -->
<button loading="{{loading}}" bindtap="tap">操作</button>

//page.js
Page({
  data: { loading: false },
  tap: function() {
    this.setData({
      loading: true
    })
    // 接着做耗时的操作
  }
})

1.2 Toast 和模态对话框

Toast 应用场景：在完成某个操作成功之后，告诉用户这次操作成功并且不打断用户接下来的操作。

Page({
  onLoad: function() {
    wx.showToast({ // 显示Toast
      title: '已发送',
      icon: 'success',
      duration: 1500
    })
    // wx.hideToast() // 隐藏Toast
  }
})

一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示

Page({
  onLoad: function() {
    wx.showModal({
      title: '标题',
      content: '告知当前状态，信息和解决方法',
      confirmText: '主操作',
      cancelText: '次要操作',
      success: function(res) {
        if (res.confirm) {
          console.log('用户点击主操作')
        } else if (res.cancel) {
          console.log('用户点击次要操作')
        }
      }
    })
  }
})

1.3 界面滚动

• 用户往下拉动界面触发下拉刷新操作时，Page 构造器的 onPullDownRefresh 回调会被触发，此时开发者重新拉取新数据进行渲染

//page.json
{"enablePullDownRefresh": true }

//page.js
Page({
  onPullDownRefresh: function() {
    // 用户触发了下拉刷新操作
    // 拉取新数据重新渲染界面
    // wx.stopPullDownRefresh() // 可以停止当前页面的下拉刷新。
  }
})

• 多数的购物小程序会在首页展示一个商品列表，用户滚动到底部的时候，会加载下一页的商品列表渲染到列表的下方，这个交互操作叫为上拉触底。

//page.json
// 界面的下方距离页面底部距离小于onReachBottomDistance像素时触发onReachBottom回调
{"onReachBottomDistance": 100 }

//page.js
Page({
  onReachBottom: function() {
    // 当界面的下方距离页面底部距离小于100像素时触发回调
  }
})

• 只需要页面中某一小块区域可滚动时，就要用到 scroll-view 可滚动视图组件。

2 发起 HTTPS 网络通信

2.1 wx.require() 接口

• wx.require() 的详细参数

参数名	类型	必填	默认值	描述
url	String	是		开发者服务器接口地址
data	Object/String	否		请求的参数
header	Object	否		设置请求的 header
method	String	否	GET（需大写）	有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json
success	Function	否		收到服务成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数

2.2 服务器接口

• wx.request 请求的域名需要在小程序管理平台进行配置

2.3 请求参数

• 通过 wx.request 这个 API，有两种方法把数据传递到服务器：通过 url 上的参数以及通过 data 参数

• url 是有长度限制的，其最大长度是1024字节，同时 url 上的参数需要拼接到字符串里，参数的值还需要做一次 urlEncode

2.4 一般使用技巧

设置超时时间

// app.json
{
  "networkTimeout": {
    "request": 3000 // 3000ms
  }
}

请求前后的状态处理

• 节流

var hasClick = false;
Page({
  tap: function() {
    if (hasClick) {
      return
    }
    hasClick = true
    wx.showLoading()
    wx.request({
      url: 'https://test.com/getinfo',
      method: 'POST',
      success: function (res) {
        if (res.statusCode === 200) {
          console.log(res.data)// 服务器回包内容
        }
      },
      fail: function (res) {
        wx.showToast({ title: '系统错误' })
      },
      complete: function (res) {
        wx.hideLoading()
        hasClick = false
      }
    })
  }
})

3 微信登录

3.1 获取微信登录凭证 code

为什么不直接获取微信用户的 id --> 安全性

• wx.login 是生成一个带有时效性的凭证--微信登录凭证 code，其有效时间仅为5分钟

3.2 发送code到开发者服务器

code 在成功换取一次信息之后也会立即失效，即便凭证 code 生成时间还没过期

• 在 wx.login 的 success 回调中拿到微信登录凭证，紧接着会通过 wx.request 把 code 传到开发者服务器，为了后续可以换取微信用户身份id -- openid

• 如果当前微信用户还没有绑定当前小程序业务的用户身份，那在这次请求应该顺便把用户输入的帐号密码一起传到后台，然后开发者服务器就可以校验账号密码之后再和微信用户id进行绑定

Page({
  tapLogin: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          wx.request({
            url: 'https://test.com/login',
            data: {
              username: 'zhangsan', // 用户输入的账号
              password: 'pwd123456', // 用户输入的密码
              code: res.code
            },
            success: function(res) {
              // 登录成功
              if (res.statusCode === 200) {
               console.log(res.data.sessionId)// 服务器回包内容
              }
            }
          })
        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
    });
  }
})

3.3 到微信服务器换取微信用户身份 id

• 微信服务器为了确保拿 code 过来换取身份信息的人就是刚刚对应的小程序开发者，到微信服务器的请求要同时带上 AppId 和 AppSecret

3.4 绑定 openid 和业务用户身份

有了这个绑定信息，小程序在下次需要用户登录的时候就可以不需要输入账号密码，因为通过 wx.login() 获取到 code 之后，可以拿到用户的微信身份 openid，通过绑定信息就可以查出业务侧的用户身份 id，这样静默授权的登录方式显得非常便捷。

3.5 业务登录凭证 SessionId

4 本地数据缓存

利用本地数据缓存来存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态

利用本地缓存一些服务端非实时的数据提高小程序获取数据的速度，在特定的场景下可以提高页面的渲染速度，减少用户的等待时间

4.1 读写本地数据缓存

• wx.getStorage / wx.getStorageSync：读取本地缓存

• wx.setStorage / wx.setStorageSync：写数据到缓存

4.2 缓存限制和隔离

• 不同小程序的本地缓存空间是分开的

• 每个小程序的缓存空间上限为 10MB，如果当前缓存已经达到10MB，再通过 wx.setStorage 写入缓存会触发 fail 回调。

• 对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露

4.3 利用本地缓存提前渲染界面

• 一般在对数据实时性|一致性要求不高的页面可以利用本地缓存来做提前渲染，用以优化小程序体验

Page({
  onLoad: function() {
    var that = this
    var list =wx.getStorageSync("list")
    if (list) { // 本地如果有缓存列表，提前渲染
      that.setData({
        list: list
      })
    }
    wx.request({
      url: 'https://test.com/getproductlist',
      success: function (res) {
        if (res.statusCode === 200) {
          list = res.data.list
          that.setData({ // 再次渲染列表
            list: list
          })
          wx.setStorageSync("list",list) // 覆盖缓存数据
        }
      }
    })
  }
})

4.4 缓存用户登录态 SessionId

通常用户在没有主动退出登录前，用户登录态会一直保持一段时间

• 利用本地缓存持久存储用户登录态 SessionId

//page.js
var app = getApp()
Page({
  onLoad: function() {
    // 调用wx.login获取微信登录凭证
    wx.login({
      success: function(res) {
        // 拿到微信登录凭证之后去自己服务器换取自己的登录凭证
        wx.request({
          url: 'https://test.com/login',
          data: { code: res.code },
          success: function(res) {
            var data = res.data
            // 把 SessionId 和过期时间放在内存中的全局对象和本地缓存里边
            app.globalData.sessionId = data.sessionId
            wx.setStorageSync('SESSIONID',data.sessionId)
            // 假设登录态保持1天
            var expiredTime = + new Date() + 1*24*60*60*1000
            app.globalData.expiredTime =expiredTime
            wx.setStorageSync('EXPIREDTIME',expiredTime)
          }
        })
      }
    })
  }
})

• 利用本地缓存恢复用户登录态 SessionId

//app.js

App({
  onLaunch: function(options) {
    var sessionId =wx.getStorageSync('SESSIONID')
    var expiredTime =wx.getStorageSync('EXPIREDTIME')
    var now = +new Date()
    if (now - expiredTime <=1*24*60*60*1000) {
      this.globalData.sessionId = sessionId
      this.globalData.expiredTime = expiredTime
    }
  },
  globalData: {
    sessionId: null,
    expiredTime: 0
  }
})

5 设备能力

5.1 利用微信扫码能力

• 利用 wx.scanCode 获取二维码的数据

//page.js
Page({
  // 点击“扫码订餐”的按钮，触发tapScan回调
  tapScan: function() {
    // 调用wx.login获取微信登录凭证
    wx.scanCode({
      success: function(res) {
        var num = res.result // 获取到的num就是餐桌的编号
      }
    })
  }
})

5.2 获取网络状态

• 利用 wx.getNetworkType 获取网络状态

//page.js
Page({
  // 点击“预览文档”的按钮，触发tap回调
  tap: function() {
    wx.getNetworkType({
      success: function(res) {
        // networkType字段的有效值：
        // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
        if (res.networkType == 'wifi') {
          // 从网络上下载pdf文档
          wx.downloadFile({
            url:'http://test.com/somefile.pdf',
            success: function (res) {
              // 下载成功之后进行预览文档
              wx.openDocument({
                filePath: res.tempFilePath
              })
            }
          })
        } else {
          wx.showToast({ title: '当前为非Wifi环境' })
        }
      }
    })
  }
})

• 动态监听网络状态变化的接口 wx.onNetworkStatusChange