2021-07-27

前言

养成良好的交互设计习惯
能够熟练的使用本地存储。
实现小程序HTTP的封装
实现登录状态的维护和持久化
掌握小程序中的界面跳转以及传参

1、Toast和模态对话框

1）在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失。

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

2）特别要注意，对于错误信息我们不应该用Toast进行提示，因为错误提示需要明确告知用户具体原因，因此不适合用这种一闪而过的Toast弹出式提示。一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示，同时附带下一步操作的指引。

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

2、本地存储

1）写入本地数据
小程序提供了读写本地数据缓存的接口，通过wx.setStorage写数据到缓存，在小程序中几乎所有接口都是异步的，这里存储数据也是一个异步操作，如果希望进行同步存储需要调用wx.setStorageSync。

异步存储

    wx.setStorage({
      data: {name:"天亮教育",age:4},//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
      key: 'list',//本地缓存中指定的 key
})

同步存储

wx.setStorageSync('list1', {name:"尚云科技",age:5})

2）读取本地数据
在小程序中可以通过wx.getStorage/wx.getStorageSync将数据存储到本地。

异步操作

    wx.getStorage({
      key: 'list',
      success(res){
        console.log(res);
      }
    })

同步操作

const list = wx.getStorageSync('list')

限制：小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB。

3、小程序的界面跳转

1） wx.navigateTo

保留当前页面，只能打开非 tabBar 页面。

wx.navigateTo({
  url: 'test?id=1',
})

2）wx.redirectTo

关闭卸载当前页面，只能打开非 tabBar 页面。

wx.redirectTo({
  url: 'test?id=1'
})

3）wx.switchTab

关闭所有非tabbar页面， 只能打开 tabBar 页面。

wx.switchTab({
  url: '/index'
})

4）wx.reLaunch

关闭卸载所有页面，可以打开任意页面。

wx.reLaunch({
  url: 'test?id=1'
})

5）wx.navigateBack

返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去

wx.navigateBack({
  delta: 2  //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})

6）路由跳转传参

路由跳转传参可以通过？的方式拼接参数。跳转到指定界面之后，可以在该页面的onLoad方法中的options参数（本身是个对象）拿到路由跳转的参数。

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

4、HTTP

url: 开发者服务器接口地址。注意这里需要配置域名
data: 请求的参数
header: 设置请求的 header，header 中不能设置 Referer，默认header[‘content-type’] = ‘application/json’
method（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType json： 回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析
success： 收到开发者服务成功返回的回调函数。
fai：接口调用失败的回调函数
complete： 接口调用结束的回调函数（调用成功、失败都会执行）

http的封装

我们会发现，由于我们后台请求接口的数据格式都是表单格式的，每次发送请求会很麻烦，都需要指定请求头，另外我们这里回调函数的方式解决异步问题，写起来也可能会出现回调地域的问题。在这里我们如果想解决这些问题，就涉及到了http请求的封装。

作用：
添加统一的请求配置
可以添加请求拦截器和响应拦截器，在请求和响应之前加一些通用的处理。

function request(options) {
  // 请求拦截器
  //  ...
  // 1. 加一些统一的参数，或者配置
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme.myhope365.com" + options.url
  }
	// 默认的请求头
  let header = {
    "content-type": "application/x-www-form-urlencoded",
  };
  if (options.header) {
    header = {
      ...header,
      ...options.header
    }
  }

  return new Promise((reslove, reject) => {
    // 调用接口
    wx.request({
      // 默认的配置
      // 加载传入的配置
      ...options,
      header,
      success(res) {
        // 响应拦截器，所有接口获取数据之前，都会先执行这里
        //  1. 统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常，请联系管理员',
          })
        }

        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}

export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}

5、登录功能

使用步骤：

1、npm init 初始化npm
2、npm i @vant/weapp -S --production
3、在小程序 package.json 所在的目录中执行命令安装 npm 包：
npm install
4、构建npm模块

5、修改app.json
将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

在这里，当我们输入正确的账号和密码之后，后台提示我们登录成功，但是当我们在登录成功之后在调用，获取用户信息的方法的时候，发现提示还是当前用户未登录。这是为什么呢？

这里我们后端采用的登录鉴权方式是通过cookie的方式进行的鉴权，即登录成功之后，后端会给我们cookie上增加一个JSESSIONID，这个JESSIONID就标识了当前登录用户的身份。

在浏览器中，我们每次发送请求都会携带cookie，所以说在浏览器中我们登录成功之后就可以直接调用登录之后才能访问的接口。但是在小程序端，小程序默认不会帮我们在发送请求的时候带上cookie，这个时候就需要我们手动添加请求cookie了。

 const cookie = res.cookies.join(";");
	// 判断包含JESSIONID之后进行持久化存储
        if(cookie.includes("JSESSIONID")){
          // 需要把cookie

之后，在每次发送请求的时候，在请求头中添加上cookie属性。这里由于我们进行了封装，所以每次发送请求都会执行我们封装好的request方法，我们可以在这里给所有的接口加上cookie

let header = {
// 加上统一的cookie
"cookie": wx.getStorageSync("cookie") || ""
}

6、判断登录状态

由于在多个页面中都要判断登录状态，所以在全局App.js中调用接口最合适不过了，把获取到的数据放在全局对象globalData属性中，别的页面可以通过getApp().globalData使用判断即可。

先在globalData自定义一个isLogin属性，当为true是登录成功，false是为未登录。再自定义一个user属性，放置用户的信息。globalPromise属性是为了解决异步问题。

globalData: {
    userInfo: null,
    isLogin:false,
    user:null,
    globalPromise:null
 }