微信小程序基础-08-小程序系统API

一、网络请求 —— 基本使用

• 微信提供了专属的 API 接口 用于网络请求 : wx.request(Object object)
  
• complete类似于finally
• 比较关键的几个属性解析
• url: 必传 , 不然请求什么
• data: 请求参数
• method: 请求的方式
• success: 成功时的回调
• fail: 失败时的回调

二、网络请求 —— 代码演练

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送网络请求
    //1.发送最简单的get请求
    wx.request({
      url: 'http://162.136.185.210:8000/api/recommend',
      success:(res)=>{
        console.log(res);
      }
    }),

    //2.get请求，并且携带参数
    wx.request({
      url: 'http://162.136.185.210:8000/api/home/data',
      data:{
        type:'sell',
        page:1
      },
      success:(res)=>{
        console.log(res);
      }
    }),

    //3.post请求，并且携带参数
    wx.request({
      url: 'https://httpbin.org/post',
      method:'post',
      data:{
        name:'张三',
        age:18
      },
      fail:err=>{
        console.log(err);
      }
    })
  }

三、网络请求 —— 请求封装

分析：

• 目前我们采用的网络请求是非常古老的请求方式 , 我们将它封装成 Promise 的方式：
  
  代码示例：创建一个service目录，在目录下创建network.js文件

//简洁写法
export default function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      //resolve, reject 本身就是回调函数
      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: res => {
//         resolve(res);
//       },
//       fail: err => {
//         reject(err);
//       }
//     })
//   })
// }

调用：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送网络请求
    //1.原生的方式发送网络请求
    //this.get_data_origin();

    //2.使用封装的request发送网络请求
    //Promise最大的好处就是防止出现回调地狱
    request({
      url:'http://162.136.185.210:8000/api/6recommend'
    }).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
  },

  get_data_origin() {
    //1.发送最简单的get请求
    wx.request({
        url: 'http://162.136.185.210:8000/api/recommend',
        success: (res) => {
          console.log(res);
        }
      }),

      //2.get请求，并且携带参数
      wx.request({
        url: 'http://162.136.185.210:8000/api/home/data',
        data: {
          type: 'sell',
          page: 1
        },
        success: (res) => {
          console.log(res);
        }
      }),

      //3.post请求，并且携带参数
      wx.request({
        url: 'https://httpbin.org/post',
        method: 'post',
        data: {
          name: '张三',
          age: 18
        },
        fail: err => {
          console.log(err);
        }
      })
  }

四、展示弹窗

• 小程序中展示弹窗有四种方式 : showToast 、 showModal 、showLoading 、 showActionSheet
• 代码示例：

<!-- 1.Toast -->
<button size="mini" bindtap="handleShowToast">showToast</button>

<!-- 2.Modal -->
<button size="mini" bindtap="handleShowModel">showModal</button>

<!-- 3.Loading -->
<button size="mini" bindtap="handleShowLoading">showLoading</button>

<!-- 4.actionSheet：底部展示弹窗 -->
<button size="mini" bindtap="handleShowAction">showAction</button>

  handleShowToast(){
    wx.showToast({
      title: "加载中...",
      duration:3000,
      icon:"loading"
    })
  },

  handleShowModel(){
    wx.showModal({
      title: "我是标题",
      content:"我是内容",
      //showCancel:false,//不显示取消按钮
      cancelText:"退出",
      cancelColor:"red",
      success:res=>{
        if(res.cancel){
          console.log("用户点击了取消按钮");
        }
        if(res.confirm){
          console.log("用户点击了确定按钮");
        }
      }
    })
  },

  //通常用于网络请求中
  handleShowLoading(){
    wx.showLoading({
      title: '加载ing',
      mask:true   //蒙版
    });

    setTimeout(()=>{
      //必须手动调用hideLoading才会让loading消失
      wx.hideLoading({
        complete: (res) => {},
      })
    },3000)
  },

  handleShowAction(){
    wx.showActionSheet({
      itemList: ["相册","拍照"],
      itemColor:"red",
      success:res=>{
        //console.log(res)
        switch(res.tapIndex){
          case 1:
            console.log("点击了拍照")
        }
      }
    })
  }

五、页面分享

• 分享是小程序扩散的一种重要方式，小程序中有两种分享方式：
• 点击右上角的 菜单 按钮，之后点击 转发
• 点击某一个按钮，直接转发
• 当我们转发给好友一个小程序时，通常小程序中会显示一些信息：
• 如何决定这些信息的展示呢？通过 onShareAppMessage
  

  onShareAppMessage(options){
    return{
      title:"你好，哈哈哈",
      //分享后进入的页面
      path:"/pages/about/about",
      imageUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592227979978&di=bd2559f5df93f91df2f457b79272ab2a&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1510754013%2C2158552347%26fm%3D214%26gp%3D0.jpg"
    }
  }

分享按钮：

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

六、小程序的登录流程

• 我们先来查看一下官方给出的小程序登录流程图：

1. 调用 wx.login 获取 code
2. 调用 wx.request 发送 code 到我们自己的服务器（我们自己的服务器会返回一个登录态的标识，比如token
3. 将登录态的标识 token 进行存储，以便下次使用
4. 请求需要登录态标识的接口时，携带 token
   

七、小程序登录演练

• 代码示例：

const TOKEN = "token"

App({

  //对象：小程序关闭后会被回收，再次访问需要重新登录，需要进行本地存储
  globalData() {
    token: ""
  },
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    //登录操作

    //1.先从缓存中取出token
    const token = wx.getStorageSync(TOKEN)

    //2.判断token是否有值
    if (token && token.length !== 0) { //已经有token，验证token是否过期
      //验证token是否过期
      this.check_token(token)
    } else { //没有token，进行登录操作
      this.login();
    }
  },
  check_token(token) {
    wx.request({
      url: 'http://152.136.185.210:3000/auth',
      method: 'post',
      header: {
        token
      },
      success: res => {
        if (!res.data.errCode == null) {
          this.globalData.token = token
        } else {
          this.login();
        }
      },
      fail: err => {

      }
    })
  },

  login() {
    //code只有5分钟的有效期
    wx.login({
      success: (res) => {
        //1.获取code
        const code = res.code;

        //2.将code发送给服务器
        wx.request({
          url: 'http://152.136.185.210: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)
          }
        })
      },
    })
  },
})

八、界面跳转

• 界面的跳转有两种方式： 通过 navigator 组件 和 通过 wx 的 API 跳转

• navigator 组件主要就是用于界面的跳转的：
  

九、open-type 的取值

• open-type 有如下取值：
  

• redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面，并且不能返回。（不是一个压栈）

• switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。（需要在 tabBar 中定义的）

• reLaunch 关闭所有的页面，打开应用中某个页面。（直接展示某个页面，并且可以跳转到 tabBar 页面）

十、导航返回

• 导航返回有两个属性来起作用：

• open type navigateBack （表示该 navigator 组件用于返回）
• delta ：返回的层级（指定返回的层级 open type 必须是 navigateBack 才生效）
  

十一、数据传递 —— 传递方式分析

• 如何在界面跳转过程中我们需要相互传递一些数据，应该如何完成呢？

• 首页 --> 详情页：使用 URL 中的 query 字段
• 详情页 --> 首页：在详情页内部拿到首页的页面对象，直接修改数据
  

十二、数据传递 —— 传递过程

• 首页 --> 详情页：

• 通过修改 URL 传递参数

• 详情页 --> 首页：

• 返回时携带数据有两个问题需要考虑

• 问题一 : 在什么地方修改数据

• 如果你是监听按钮或者 navigator 的点击来返回时 , 可以通过 bindtap 来映射到某个函数 , 在函数中完成
• 但是这种方式不能监听左上角返回按钮的点击
• 所以我们选择在 onUnload 中修改数据

• 问题二 : 如何修改数据

• 小程序并没有提供直接修改数据的方法
• 但是可以通过 getCurrentPages 来获取所有的页面 , 然后使用页面对象的 setData({}) 函数来修改

十三、代码演练

十四、代码的跳转和返回

• 很多情况下，我们并不喜欢使用 navigator 组件来进行跳转：

• 可能我们希望用户点击了某个 button 或者 view 时，对该 button 或者 view 进行监听
• 之后，通过相关的代码逻辑实现跳转

• 对此，微信也提供了对应的 API 接口：

• wx.navigateTo(url[, ])
• wx.navigateBack([delta])