601 小程序阶段7 系统API：网络请求，展示弹窗，页面分享，登录流程，小程序登录演练，open-type的取值，导航返回，界面跳转过传递数据

网络请求 – 基本使用

---

网络请求 – 代码演练

---

网络请求 – 请求封装

---

home.js

// pages/home/home.js
import request from '../../service/network.js'

Page({
  data: {
  },
  onLoad: function (options) {
    // 1.原生的方式发送网络请求
    this.get_data_origin()

    // 2.使用封装的request发送网络请求
    // Promise最大的好处就是防止出现回调地狱
    request({
      url: 'http://123.207.32.32:8000/recommend'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
  get_data_origin() {
    // 发送网络请求
    // 1.发送最简单的get请求
    // wx.request({
    //   url: 'http://123.207.32.32:8000/recommend',
    //   success: function(res) {
    //     console.log(res)
    //   }
    // })
    // 2.get请求,并且携带参数
    // wx.request({
    //   url: 'http://123.207.32.32:8000/home/data',
    //   data: {
    //     type: 'sell',
    //     page: 1
    //   },
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })
    // 3.post请求,并且携带参数
    // wx.request({
    //   url: 'http://httpbin.org/post',
    //   method: 'post',
    //   data: {
    //     name: 'coderwhy',
    //     age: 18
    //   },
    //   success: function(res) {
    //     console.log(res)
    //   },
    //   fail: function(err) {
    //     console.log(err)
    //   }
    // })
  }
})

---

network.js

export default function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject
    })
  })
}

// export default function request(options) {
//   return new Promise((resolve, reject) => {
//     wx.request({
//       url: options.url,
//       method: options.method || 'get',
//       data: options.data || {},
//       success: function (res) {
//         resolve(res)
//       },
//       fail: function (err) {
//         reject(err)
//       }
//     })
//   })
// }

---

展示弹窗

---

页面分享

---

home.wxml

<!--pages/home/home.wxml-->
<text class='title'>Hello World</text>
<button size='mini'>按钮</button>

<!-- 1.Toast -->
<button size='mini' bind:tap="handleShowToast">showToast</button>

<!-- 2.Modal -->
<button size='mini' bind:tap="handleShowModal">showModal</button>

<!-- 3.Loading -->
<button size='mini' bind:tap="handleShowLoading">showLoading</button>

<!-- 4.actionSheet -->
<button size='mini' bind:tap="handleShowAction">showAction</button>

<!-- 5.分享按钮 -->
<button size='mini' open-type='share'>分享</button>

---

home.js

// pages/home/home.js
Page({
  handleShowToast() {
    wx.showToast({
      title: '加载中ing',
      duration: 3000,
      icon: 'loading',
      // image: "/assets/icon/icon.png"
      mask: true,
      success: function() {
        console.log('展示弹窗成功')
      },
      fail: function() {
        console.log('展示弹窗失败')
      },
      complete: function() {
        console.log('完成函数的调用')
      }
    })
  },
  handleShowModal() {
    wx.showModal({
      title: '我是标题',
      content: '我是内容,哈哈哈',
      // showCancel: false, // 是否顯示取消按鈕
      cancelText: '退出', // 取消按钮的文本
      cancelColor: 'red', // 取消按钮的文本顏色
      success: function(res) {
        console.log(res)
        // 判断用戶点击了取消按钮
        if (res.cancel) {
          console.log('用户点击了取消按钮')
        }
        if (res.confirm) {
          console.log('用户点击了确定按钮')
        }
      }
    })
  },
  handleShowLoading() {
    wx.showLoading({
      title: '加载ing',
      mask: true
    })

    setTimeout(() => {
      // 必须手动调用hideLoading才会让loading消失
      wx.hideLoading()
    }, 1000)
  },
  handleShowAction() {
    wx.showActionSheet({
      itemList: ['相册', '拍照'],
      itemColor: 'red', // 文本颜色
      success: function(res) {
        console.log(res)
      }
    })
  },
  onShareAppMessage: function(options) {
    return {
      title: '你好啊, 哈哈',
      // 用户点击分享的小程序，进入到的页面
      path: '/pages/about/about', 
      // 分享的小程序显示的图片，不写就显示当前页面的截图
      imageUrl: 'http://s3.mogucdn.com/mlcdn/c45406/170915_0a93207ci28kelh617k4hh62l65lb_640x960.jpg'
    }
  }
})

---

登录流程

---

小程序登录演练

---

app.js

const TOKEN = 'token'

App({
  // 对象: 小程序关闭掉
  globalData: {
    token: ''
  },
  onLaunch: function () {
    // 1.先从缓冲中取出token
    const token = wx.getStorageSync(TOKEN)

    // 2.判断token是否有值
    if (token && token.length !== 0) { 
      this.check_token(token) // 已经有token,验证token是否过期
    } else { 
      this.login() // 没有token, 进行登录操作
    }
  },
  check_token(token) {
    console.log('执行了验证token操作')
    wx.request({
      url: 'http://123.207.32.32:3000/auth',
      method: 'post',
      header: {
        token
      },
      success: (res) => {
        if (!res.data.errCode) {
          console.log('token有效')
          this.globalData.token = token;
        } else {
          this.login()
        }
      },
      fail: function(err) {
        console.log(err)
      }
    })
  },
  login() {
    console.log('执行了登录操作')
    wx.login({
      // code只有5分钟的有效期
      success: (res) => {
        // 1.获取code
        const code = res.code;

        // 2.将code发送给我们的服务器
        wx.request({
          url: 'http://123.207.32.32:3000/login',
          method: 'post',
          data: {
            code
          },
          success: (res) => {
            // 1.取出token
            const token = res.data.token;

            // 2.将token保存在globalData中
            this.globalData.token = token;

            // 3.进行本地存储
            wx.setStorageSync(TOKEN, token)
          }
        })
      }
    })
  }
})

---

界面跳转

---

open-type的取值

---

◼ redirect：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面，并且不能返回。（不是一个压栈）
◼ switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。（需要在tabBar中定义的）
◼ reLaunch：关闭所有的页面，打开应用中某个页面。（直接展示某个页面，并且可以跳转到tabBar页面）

---

导航返回

---

数据传递 – 传递方式分析

---

数据传递 – 传递过程

---

代码演练

---

代码的跳转和返回

---

home.wxml

<!--pages/home/home.wxml-->
<text class='title'>Hello World</text>
<button size='mini'>按钮</button>

<!-- 1.navigator页面跳转 -->
<!-- 【左上角有后退箭头的后退按钮】 -->
<navigator url='/pages/detail/detail'>跳到详情页</navigator>

<!-- 2.navigator属性: open-type -->
<!-- 【open-type='redirect' ：左上角有向上箭头的后退按钮】 -->
<navigator url='/pages/detail/detail' open-type='redirect'>
  跳到详情页(redirect)
</navigator>

<!-- 【open-type='switchTab' ： 没有后退按钮】 -->
<navigator url='/pages/about/about' open-type='switchTab'>
  跳到关于页(switchTab)
</navigator>

<!-- 【open-type='reLaunch' ：左上角有向上箭头的后退按钮】 -->
<navigator url='/pages/detail/detail' open-type='reLaunch'>
  跳到详情页(reLaunch)
</navigator>

<!-- 3.跳转过程中数据的传递 -->
<!-- 【】在跳转到的页面的js文件中的 onLoad方法的形参options里，保存了传递的数据 -->
<navigator url='/pages/detail/detail?name=why&age=18&height=1.88'>跳到详情页</navigator>
<view>{{title}}</view>

<!-- 4.通过代码进行页面跳转 -->
<button size='mini' bind:tap="handlePushDetail">跳到详情页</button>

---

home.js

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: '哈哈哈'
  },
  handlePushDetail() {
    wx.navigateTo({
      url: '/pages/detail/detail?title=你好啊',
    })

    // 如果open-type='redirect'，那么就是 wx.redirectTo。也就是说，每一个open-type，都会有对应的api
    // wx.redirectTo({
    //   url: '',
    // })
  }
})

---

detail.wxml

<!--pages/detail/detail.wxml-->
<text>pages/detail/detail.wxml</text>

<navigator url='/pages/comment/comment'>跳到评论页</navigator>

<!-- 【点击，返回上一级页面。】 -->
<navigator open-type='navigateBack'>返回</navigator>

<button size='mini' bind:tap="handleBackHome">返回</button>

---

detail.js

// pages/detail/detail.js
Page({
  // 【options里，保存了传递过来的数据】
  onLoad: function (options) {
    console.log(options)
  },
  // 在 onUnload方法里，修改home页面的数据
  onUnload() {
    // 1.获取首页的页面对象
    // getCurrentPages当前所有栈的页面
    const pages = getCurrentPages()
    const home = pages[pages.length - 2]

    // 2.调用页面对象的setData
    home.setData({
      title: '呵呵呵'
    })
  },
  // 返回home页面
  handleBackHome() {
    // 此时不能用 navigateTo，用navigateTo必须写url
    wx.navigateBack({
      delta: 1
    })
  }
})

---