小程序系统API 调用

提拉米苏爱拿铁

已于 2023-03-24 17:31:58 修改

阅读量2.2k

点赞数

文章标签：小程序

于 2023-03-24 16:02:33 首次发布

本文链接： https://blog.csdn.net/m0_50789696/article/details/129744217

版权

一、网络请求API 和封装 wx.request (Object object)

RequestTask | 微信开放文档

1.1 API 参数

1.2 API 使用

1.3 网络请求--API 封装

使用 promise 包装成函数

export function MyRequest(options) {
  return new Promise((resolve, reject) => {
    wx.request({ 
      ...options, 
      success: (res) => {
        resolve(res.data)
      },
      fail: reject
    })
  })
}

封装成类，再实例化（封装 baseURL 、get、post

class MyRequest {
  constructor(baseURL) {
    this.baseURL = baseURL
  }
  request(options) {
    const { url } = options
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        url: this.baseURL + url,
        success: (res) => {
          resolve(res.data)
        },
        fail: (err) => {
          console.log("err:", err);
        }
      })
    })
  }
  get(options) {
    return this.request({ ...options, method: "get" })
  }
  post(options) {
    return this.request({ ...options, method: "post" })
  }
}

export const myReqInstance = new MyRequest("http://codercba.com:1888/api")

使用封装的函数和类

import { myRequest, myReqInstance } from "../../service/index"

Page({
  data: {
    allCities: {},
    houselist: [],
    currentPage: 1
  },
  async onLoad() {
    // 1.网络请求基本使用
    // wx.request({
    //   url: "http://codercba.com:1888/api/city/all",
    //   success: (res) => {
    //     const data = res.data.data
    //     this.setData({ allCities: data })
    //   },
    //   fail: (err) => {
    //     console.log("err:", err);
    //   }
    // })

    // wx.request({
    //   url: 'http://codercba.com:1888/api/home/houselist',
    //   data: {
    //     page: 1
    //   },
    //   success: (res) => {
    //     const data = res.data.data
    //     this.setData({ houselist: data })
    //   }
    // })

    // 2.使用封装的函数
    // myRequest({ 
    //   url: "http://codercba.com:1888/api/city/all" 
    // }).then(res => {
    //   this.setData({ allCities: res.data })
    // })

    // myRequest({
    //   url: "http://codercba.com:1888/api/home/houselist",
    //   data: {
    //     page: 1
    //   }
    // }).then(res => {
    //   this.setData({ houselist: res.data })
    // })

    // 3.await/async 书写方便，但性能不高，会阻塞后面的网络请求
    // const cityRes = await myRequest({ 
    //   url: "http://codercba.com:1888/api/city/all" 
    // })
    // this.setData({ allCities: cityRes.data })

    // const houseRes = await myRequest({
    //   url: "http://codercba.com:1888/api/home/houselist",
    //   data: { page: 1 }
    // })
    // this.setData({ houselist: houseRes.data })

    // 4.将请求封装到一个单独函数中(推荐) 异步函数执行不会阻塞后面的运行
    this.getCityData()
    this.getHouselistData()

    // 5.使用类的实例发送请求
    myReqInstance.get({
      url: "/city/all"
    }).then(res => {
      console.log(res);
    })
  },

  async getCityData() {
    const cityRes = await myRequest({ 
      url: "http://codercba.com:1888/api/city/all" 
    })
    this.setData({ allCities: cityRes.data })
  },
  async getHouselistData() {
    const houseRes = await myRequest({
      url: "http://codercba.com:1888/api/home/houselist",
      data: { page: this.data.currentPage }
    })
    const finalHouseList = [...this.data.houselist, ...houseRes.data]
    this.setData({ houselist: finalHouseList })
    // 思考: 为什么这里不需要setData?
    // 修改currentPage数据，并不需要页面刷新
    this.data.currentPage++
  },
//上拉加载更多
  onReachBottom() {
    this.getHouselistData()
  }
})

二、展示弹窗和页面分享

2.1 展示弹窗

showToast 显示消息提示框

wx.showToast(Object object) | 微信开放文档

showModal 显示模态对话框

wx.showModal(Object object) | 微信开放文档

showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 关闭提示框

wx.showLoading(Object object) | 微信开放文档

showActionSheet 显示操作菜单

wx.showActionSheet(Object object) | 微信开放文档

注意

wx.showLoading 和 wx.showToast 同时只能显示一个
wx.showToast 应与 wx.hideToast 配对使用

2.2 页面分享

  onShareAppMessage() {
    return {
      title: "旅途的内容",
      path: "/pages/favor/favor",
      imageUrl: "/assets/nhlt.jpg"
    }
  },

三、设备信息和位置信息

3.1 获取设备信息 wx.getSystemInfo(Object object) | 微信开放文档

wx.getSystemInfo({
  success (res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})

3.2 获取位置信息 wx.getLocation(Object object) | 微信开放文档

获取用户授权全局配置 | 微信开放文档

四、小程序Storage 存储

encrypt Boolean 默认值false 非必填

是否开启加密存储。只有异步的 setStorage 接口支持开启加密存储。开启后，将会对 data 使用 AES128 加密，接口回调耗时将会增加。若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true。此外，由于加密后的数据会比原始数据膨胀1.4倍，因此开启 encrypt 的情况下，单个 key 允许存储的最大数据长度为 0.7MB，所有数据存储上限为 7.1MB

五、页面跳转和数据传递

5.1 页面跳转

5.1.1 navigator 组件 navigator | 微信开放文档

5.1.2 wx 的 API

路由跳转API	功能描述
wx.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch	关闭所有页面，打开到应用内的某个页面
wx.redirectTo	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

5.2 数据传递

给上一级页面传递数据

1. 获取到上一个页面的实例，通过setData给上一个页面设置数据

将返回上一级页面的数据传递过程写在 onUnload() 中，可以将小程序自带的返回导航功能重写实现参数传递
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
不要尝试修改页面栈，会导致路由以及页面状态错误。
getCurrentPages 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页

2. 回调events的函数 EventChannel | 微信开放文档

给下一级页面传递数据

通过 url 中的query字段进行页面间传参，在下一级 Page 的onLoad 的参数options 中获取打开当前页面路径中的参数
events 参数 EventChannel.on(string eventName, EventCallback fn)

Page({
  data: {
    name: "kobe",
    age: 30,
    message: "哈哈哈"
  },
  onNavTap() {
    const name = this.data.name
    const age = this.data.age

    // 页面导航操作
    wx.navigateTo({
      // 跳转的过程, 传递一些参数过去
      url: `/pages2/detail/detail?name=${name}&age=${age}`,
      events: {
        backEvent(data) {
          console.log("back:", data);
        },
        coderwhy(data) {
          console.log("why:", data);
        }
      }
    })
  }
})

Page({
  data: {
    name: "",
    age: 0
  },
 // onLoad 的参数中获取打开当前页面路径中的参数。
  onLoad(options) {
    console.log(options);
    const name = options.name
    const age = options.age
    this.setData({ name, age })

    // const eventChannel = this.getOpenerEventChannel()
  },

  onBackTap() {
    // 1.返回导航
    wx.navigateBack()

    // 2.方式一: 给上一级的页面传递数据
    // 2.1. 获取到上一个页面的实例
    // const pages = getCurrentPages()
    // const prePage = pages[pages.length-2]

    // // 2.2.通过setData给上一个页面设置数据
    // prePage.setData({ message: "呵呵呵" })

    // 3.方式二: 回调events的函数
    // 3.1. 拿到eventChannel
    const eventChannel = this.getOpenerEventChannel()

    // 3.2. 通过eventChannel回调函数
    eventChannel.emit("backEvent", { name: "back", age: 111 })
    eventChannel.emit("coderwhy", { name: "why", age: 10 })
  },
  onUnload() {
    // // 2.1. 获取到上一个页面的实例
    // const pages = getCurrentPages()
    // const prePage = pages[pages.length-2]

    // // 2.2.通过setData给上一个页面设置数据
    // prePage.setData({ message: "呵呵呵" })
  }
})

六. 小程序登录流程演练

小程序登录流程 :

1.通过wx.login()获取code

2.将这个code发送给后端，后端会返回一个token，这个token将作为身份的唯一标识

3.将token通过 wx.setStorageSync() 保存在本地存储

4.用户下次进入页面时，会先通过wx.getStorageSync() 方法判断token是否有值且未过期，如果有值且未过期，则可以请求其它数据，如果没有值或者token失效，则进行登录操作

Page({
  // onLoad登录的流程
  async onLoad() {
    // 1.获取token, 判断token是否有值
    const token = wx.getStorageSync('token') || ""

    // 2.判断token是否过期
    const res = await myLoginReqInstance.post({
      url: "/auth",
      header: {
        token: token
      }
    })
    // console.log(res);

    // 2.如果token有值
    if (token && res.message === "已登录") {
      console.log("请求其他的数据");
    } else {
      this.handleLogin()
    }
  },

  async handleLogin() {
    // 1.获取code
    const code = await getCode()

    // 2.使用code换取token
    const res = await myLoginReqInstance.post({
      url: "/login",
      data: { code }
    })

    // 3.保存token
    wx.setStorageSync('token', res.token)
  }

  // handleLogin() {
  //   // 1.获取code
  //   wx.login({
  //     success: (res) => {
  //       const code = res.code

  //       // 2.将这个code发送自己的服务器(后端)
  //       wx.request({
  //         url: "http://123.207.32.32:3000/login",
  //         data: {
  //           code
  //         },
  //         method: "post",
  //         success: (res) => {
  //           const token = res.data.token
  //           wx.setStorageSync('token', token)
  //         }
  //       })
  //     }
  //   })
  // }
})

封装 getCode

 //  /service/login.js
export function getCode() {
  return new Promise((resolve, reject) => {
    wx.login({
      success: (res) => {
        resolve(res.code)
      },
      fail: reject
    })
  })
}