小程序系统API调用

news2025/1/19 20:40:41

目录:

1 网络请求API和封装

2 展示弹窗和页面分享

3 设备信息和位置信息

4 小程序Storage存储

5 页面跳转和数据传递

6 小程序登录流程演练

小程序的网络请求,不管是post还是get的请求的数据都是写在data里面的。

网络请求一般写在onLoad()的页面生命周期里面。

网络请求原生的写法是使用回调函数获取的数据,会有回调地狱,所以我们需要使用promise的写法。

回调地狱就是下图,回调里面有很多回调

注意:微信小程序在进行网络请求的时候,在测试阶段我们可以在详情的本地设置开启不校验合法域名和web-view。。。的选项就可以直接访问网址内容了。

但是需要上线小程序的时候,我们需要把这个获取data的网址在微信小程序登录后台-》开发管理-》开发设置-》服务器域名  才能正常使用网络请求。原因是小程序需要验证该网址是否发送的是合法的数据。具体配置方法最下方ppt有

 在使用网络请求之前,我们可以封装好request的代码,步骤是创建个server文件,在index.js里面写入我们需要的代码。

// 封装成函数
export function hyRequest(options) {
  return new Promise((resolve, reject) => {
    wx.request({ 
      ...options, 
      success: (res) => {
        resolve(res.data)
      },
      fail: reject
    })
  })
}

// 封装成类 -> 实例
class HYRequest {
  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 hyReqInstance = new HYRequest("http://codercba.com:1888/api")
export const hyLoginReqInstance = new HYRequest("http://123.207.32.32:3000")

如果使用的是await/acyna的方法来写网络请求,那么在await之后的js代码都不会运行。建议还是使用promise方法写网络请求。就是在生命周期onLoad里面写网络请求。

还可以使用异步函数的方法写请求,即在onLoad生命周期之外写await/acyna的网络请求。在onload生命周期里面直接调用该异步函数不会影响后续代码运行。

网络请求封装成类,扩展性更强。

使用网络请求的页面js逻辑:

// pages/09_learn_api/index.js
import { hyRequest, hyReqInstance } 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.使用封装的函数
    // hyRequest({ 
    //   url: "http://codercba.com:1888/api/city/all" 
    // }).then(res => {
    //   this.setData({ allCities: res.data })
    // })

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

    // 3.await/async
    // const cityRes = await hyRequest({ 
    //   url: "http://codercba.com:1888/api/city/all" 
    // })
    // this.setData({ allCities: cityRes.data })

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

    // 4.将请求封装到一个单独函数中(推荐)
    this.getCityData()
    this.getHouselistData()

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

  async getCityData() {
    const cityRes = await hyRequest({ 
      url: "http://codercba.com:1888/api/city/all" 
    })
    this.setData({ allCities: cityRes.data })
  },
  // 下面的函数是下拉加载更多。
  async getHouselistData() {
    const houseRes = await hyRequest({
      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?
    // 因为这里的数据不需要浏览器来响应式更新
    this.data.currentPage++
  },

  //触底时触发函数
  onReachBottom() {
    this.getHouselistData()
  }
})

wxml:

<!--pages/09_learn_api/index.wxml-->
<view class="house-list">
  <block wx:for="{{houselist}}" wx:key="abc">
    <view class="item">
      <image src="{{item.data.image.url}}"></image>
      <view class="title">{{item.data.houseName}}</view>
    </view>
  </block>
</view>

4种常见弹窗,文档最下方PPT有具体的参数配置。

wx.showToast(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.htmlwx.showModal(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.htmlwx.showActionSheet(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html

关于分享功能的配置:

获取用户设备信息:

设备信息里面有用户屏幕大小信息,

获取用户的位置:

1、先调用api

wx.getLocation(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

这里需要用户授权才能获取。

2、获取用户授权的提示需要在app.json里面配置permission

全局配置 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission

 数据缓存:

分为同步和异步两种,同步的就是必须执行完一行才能在执行下下一行的代码;异步是不会影响后续代码执行,可以先执行后续的内容。

存储数据的时候可以设置加密选项,在取数据的时候也相应的需要使用加密选项才能解密获取具体数据。加密是有基础库最低版本限制,

wx.setStorageSync(string key, any data) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html上述api的使用示例:

js文件:

// pages/10_learn_api/index.js
Page({
  // 1.弹窗相关的API
  onShowToast() {
    wx.showToast({
      title: '购买失败!',
      icon: "error",
      duration: 5000,
      mask: true,
      success: (res) => {
        console.log("res:", res);
      },
      fail: (err) => {
        console.log("err:", err);
      }
    })

    // wx.showLoading({
    //   title: "加载中ing"
    // })
  },
  onShowModal() {
    wx.showModal({
      title: "确定购买吗?",
      content: "确定购买的话, 请确定您的微信有钱!",
      confirmColor: "#f00",
      cancelColor: "#0f0",
      success: (res) => {
        if (res.cancel) {
          console.log("用户点击取消");
        } else if (res.confirm) {
          console.log("用户点击了确定");
        }
      }
    })
  },
  onShowAction() {
    wx.showActionSheet({
      itemList: ["衣服", "裤子", "鞋子"],
      success: (res) => {
        console.log(res.tapIndex);
      },
      fail: (err) => {
        console.log("err:", err);
      }
    })
  },

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

  // 3.获取用户的设备信息
  onGetSystemInfo() {
    // 1.获取手机的基本信息
    // wx.getSystemInfo({
    //   success: (res) => {
    //     console.log(res);
    //   }
    // })

    // 2.获取当前的位置信息
    wx.getLocation({
      success: (res) => {
        console.log("res:", res);
      }
    })
  },

  // 4.本地存储方式
  onLocalStorage() {
    // 1.存储一些键值对
    // wx.setStorageSync('name', "why")
    // wx.setStorageSync('age', 18)
    // wx.setStorageSync('friends', ["abc", "cba", "nba"])

    // 2.获取storage中内容
    // const name = wx.getStorageSync('name')
    // const age = wx.getStorageSync('age')
    // const friends = wx.getStorageSync('friends')
    // console.log(name, age, friends);

    // 3.删除storage中内容
    // wx.removeStorageSync('name')

    // 4.清空storage中内容
    // wx.clearStorageSync()

    // 异步操作
    wx.setStorage({
      key: "books",
      data: "哈哈哈",
      // 加密操作
      encrypt: true,
      success: (res) => {
        wx.getStorage({
          key: "books",
          encrypt: true,
          success: (res) => {
            console.log(res);
          }
        })
      }
    })

    console.log("-------");
  }
})

wxml:

<!--pages/10_learn_api/index.wxml-->
<text>pages/10_learn_api/index.wxml</text>

<!-- 1.展示弹窗 -->
<view>
  <button size="mini" bindtap="onShowToast">showToast</button>
  <button size="mini" bindtap="onShowModal">showModal</button>
  <button size="mini" bindtap="onShowAction">showAction</button>
</view>


<!-- 3.设备信息 -->
<button bindtap="onGetSystemInfo">设备信息</button>

<!-- 4.本地存储 -->
<button bindtap="onLocalStorage">本地存储</button>

 页面跳转:

页面跳转需要传递参数和跳转到的页面需要接收数据;返回之前页面的方法,返回之前页面并且传递参数过去。

 难点:返回之前页面并且传递参数过去。

第一种方法是通过页面栈的方法获取上一个页面的实例,然后取修改data里面的参数即可。这个代码是可以写在页面被卸载的时候执行的。因为如果你只通过按钮 返回 才能返回上一个页面和执行传递参数,页面导航的箭头 < 也是返回上一个页面,但是不会执行传递参数的代码。这时候把返回上一个页面并传递参数的方法写在生命周期卸载页面时执行最好。

第二种方法是通过给跳转之前的页面写一个事件频道event,跳转到的页面需要传递参数回跳转之前的页面需要通过获取事件event来传递。具体看下图:

跳转之前的页面js:

// pages/11_learn_nav/index.js
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);
        }
      }
    })
  }
})

跳转之前的页面wxml:

<!--pages/11_learn_nav/index.wxml-->
<button bindtap="onNavTap">跳转</button>
<navigator class="nav" url="/pages2/detail/detail?name=why&age=18">跳转</navigator>

<view>{{message}}</view>

跳转到的页面js:

// pages2/detail/detail.js
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: "呵呵呵" })
  }
})

跳转到的页面wxml:

<!--pages2/detail/detail.wxml-->
<text>pages2/detail/detail.wxml</text>
<view>name: {{name}}, age: {{age}}</view>
<button size="mini" type="primary" bindtap="onBackTap">返回</button>
<navigator open-type="navigateBack">返回</navigator>

小程序的登录解析:

静默登录:

由于小程序是在微信上的,所以没有账号密码的登录过程。

这里是通过openID来知道用户即使是使用不同的手机进行登录小程序也是同一个人。但是现在小程序不提供这个了。

unionID是用来判断不同微信产品之间用户是同一个人。

前端的任务就是通过api login获取code,等后端发token然后保存起来,在之后操作中发送token就好了。

登录页面的js:

import { getCode } from "../../service/login";
import { hyLoginReqInstance } from "../../service/index"

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

    // 2.判断token是否过期
    const res = await hyLoginReqInstance.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 hyLoginReqInstance.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)
  //         }
  //       })
  //     }
  //   })
  // }
})

login.js文件内容:


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

server文件夹下的index.js内容:

// 封装成函数
export function hyRequest(options) {
  return new Promise((resolve, reject) => {
    wx.request({ 
      ...options, 
      success: (res) => {
        resolve(res.data)
      },
      fail: reject
    })
  })
}

// 封装成类 -> 实例
class HYRequest {
  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 hyReqInstance = new HYRequest("http://codercba.com:1888/api")
export const hyLoginReqInstance = new HYRequest("http://123.207.32.32:3000")

 

 

 

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/427831.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

debian部署docker(傻瓜式)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 debian10部署dockerdebian10部署docker&#xff08;傻瓜式&#xff09;一、准备工作二、**使用 APT 安装&#xff0c;注意要先配置apt网络源**1.配置网络源2.官方下载三、安装…

复旦微ZYNQ7020全国产替代方案设计

现在国产化进度赶人&#xff0c;进口的芯片只做了个功能验证&#xff0c;马上就要换上国产的。国内现在已经做出来zynq的只有复旦微一家&#xff0c;已经在研制的有上海安路&#xff0c;还有成都华微&#xff08;不排除深圳国威也在做&#xff0c;毕竟这个市场潜力很大&#xf…

尚硅谷大数据技术Hadoop教程-笔记03【Hadoop-HDFS】

视频地址&#xff1a;尚硅谷大数据Hadoop教程&#xff08;Hadoop 3.x安装搭建到集群调优&#xff09; 尚硅谷大数据技术Hadoop教程-笔记01【大数据概论】尚硅谷大数据技术Hadoop教程-笔记02【Hadoop-入门】尚硅谷大数据技术Hadoop教程-笔记03【Hadoop-HDFS】尚硅谷大数据技术Ha…

代码优雅化进阶学习(三)

代码优雅化进阶学习&#xff08;三&#xff09; 文章目录代码优雅化进阶学习&#xff08;三&#xff09;需求详情难点最佳实现效果实现优点需求详情 如下图&#xff1a; 实现类似结构&#xff0c;首先按照 status 状态的值&#xff0c;分为全部 已实现 和 未实现&#xff1b;再…

Spring Cloud之一:注册与发现-Eureka工程的创建

系列目录&#xff08;持续更新。。。&#xff09; Spring Cloud&#xff1a;什么是微服务 Spring Cloud之一&#xff1a;注册与发现-Eureka工程的创建 Spring Cloud之二&#xff1a;服务提供者注册到Eureka Server Spring Cloud之三&#xff1a;Eureka Server添加认证 Spr…

FPGA采集AD7606数据UDP网络传输 提供工程源码和技术支持 附带上位机接收软件

目录1、前言2、我这里已有的UDP方案3、AD7606采集详解4、UDP设计方案5、AD7606 UDP传输详细设计方案UDP应用的设计思路获取FPGA网卡信息获取数据UDP发送数据组包UDP发送流程6、vivado工程详解7、上板调试验证并演示8、福利&#xff1a;工程代码的获取1、前言 目前网上的fpga实…

如何将音频文件转换为MP3格式?

音频文件有很多种格式&#xff0c;如 WAV、FLAC、AAC 等&#xff0c;其中 MP3 是最为常见的一种格式&#xff0c;因为它具有压缩比高、音质损失少、兼容性强等优点&#xff0c;适合在各种设备上播放。如果你想将一个音频文件转换为 MP3 格式&#xff0c;可以采用以下几种方法&a…

实现mini智能助理—模型训练

背景 距离上篇打带你实现自己迷你chatgpt文章&#xff0c;到现在已经过去快两个月。自制mini chatgpt文章一直没有更新&#xff0c;原因有二&#xff1a;1.一直在找合适体量表现不错模型 2.公司内部太卷了&#xff0c;没太多时间好好梳理文章。这篇文章会给大家介绍一些大模型…

踩坑:IDEA中Junit、Test模块无法使用Scanner

今天在做作业&#xff0c;在一个测试功能需要输入数据&#xff0c;于是想起了Scanner&#xff0c;运行之后发现控制台无法输入。 然后打开我心爱的浏览器&#xff0c;开始搜索&#xff0c;网上很多关于“IDEA中Test模块无法使用Scanner”的解决方法&#xff0c;基本上都是修改I…

Pandas入门实践2 -数据处理

为了准备数据进行分析&#xff0c;我们需要执行数据处理。在本节中&#xff0c;我们将学习如何清理和重新格式化数据&#xff08;例如&#xff0c;重命名列和修复数据类型不匹配&#xff09;、对其进行重构/整形&#xff0c;以及对其进行丰富&#xff08;例如&#xff0c;离散化…

rebar3安装-windows篇

rebar3是erlang的包管理工具&#xff0c;虽然不是官方出品&#xff0c;但它已经成为事实上的官方包管理工具了&#xff0c;github地址如下&#xff1a; https://github.com/erlang/rebar3 已经不难看出它的地位了。 rebar官网地址是http://rebar3.org/&#xff0c;上面有安装…

使用Socks5代理加强爬虫的网络安全

网络爬虫是获取互联网上数据的重要手段&#xff0c;但也会因为访问频率过高或其他不当行为&#xff0c;导致被网站封禁或IP被屏蔽。此时&#xff0c;使用代理服务器是解决这一问题的常用方法。本文介绍了Socks5代理的使用方式&#xff0c;以及如何将其应用到爬虫中&#xff0c;…

记录:解决with invalid types() or values()...问题【亲测有效】

&#x1f468;‍&#x1f393;作者&#xff1a;bug菌✏️博客&#xff1a;CSDN、掘金、infoQ、51CTO等&#x1f389;简介&#xff1a;CSDN博客专家&#xff0c;C站历届博客之星Top50&#xff0c;掘金/InfoQ/51CTO等社区优质创作者&#xff0c;全网粉丝合计10w&#xff0c;对一切…

红黑树(C++实现)

文章目录红黑树的概念红黑树的性质红黑树结点的定义红黑树的插入红黑树的查找红黑树的验证检测是否满足二叉搜索树检测是否满足红黑树的性质红黑树与AVL树的比较包含上述功能的红黑树代码红黑树的概念 红黑树,是一棵二叉搜索树,但在每一个结点上增加一个存储位表示结点的颜色,可…

《Netty》从零开始学netty源码(三十五)之DefaultChannelPromise

DefaultChannelPromise 在分析Unsafe或者ChannelPipeline的方法时经常出现Promise类&#xff0c;它用来保存channel的状态值&#xff0c;默认使用的是DefaultChannelPromise&#xff0c;接下来分析这个类。 类结构图 属性值 DefaultChannelPromise中有一个属性result&#xf…

Python之测试框架搭建【一】(毛坯框架)

前言一、框架基础&#xff08;从最小步骤入手_毛坯框架&#xff09; 1&#xff09;首先我们自己建立一个项目&#xff0c;这个项目里面有testcases文件夹&#xff0c;testdatas文件夹2&#xff09;在testdatas里面放测试数据3&#xff09;建立一个main文件4&#xff09;输出测试…

ASP.NET 记录 HttpRequest HttpResponse HttpServerUtility

纯属个人记录,会有错误 HttpRequest Browser是获取客户端浏览器的信息 Cookies是获取客户端的Cookies QueryString是获取客户端提交的数据 ServerVariables是获取服务器端或客户端的环境变量信息 Browser 语法格式: Request.Browser[“浏览器特性名”] 常见的特性名 名称说…

【grafana】使用多级变量解决Granfana模板变量中的大小限制

前言 最近对公司的Kafka 集群集成了 exporter prometheus granfana 服务&#xff0c;我们将 topic 变量抽象成模板变量&#xff0c;此时发现 granfana 变量有 10k 的个数限制。导致我们显示 topic 名称不全。 效果如下&#xff1a;全选后只有 10k 个变量。 解决 一番百度…

【Python】【进阶篇】二十二、Python爬虫的BS4解析库

目录二十二、Python爬虫的BS4解析库22.1 BS4下载安装22.2 BS4解析对象22.3 BS4常用语法1) Tag节点22.4 遍历节点22.5 find_all()与find()1) find_all()2) find()22.6 CSS选择器二十二、Python爬虫的BS4解析库 Beautiful Soup 简称 BS4&#xff08;其中 4 表示版本号&#xff0…

C语言函数大全-- k 开头的函数

C语言函数大全 本篇介绍 C语言函数大全-- k 开头的函数 1. kcalloc 1.1 函数说明 函数声明函数功能void *kcalloc(size_t n, size_t size, gfp_t flags);它是 Linux 内核中的一个函数&#xff0c;用于在内核空间分配一块连续的指定大小的内存&#xff0c;它与标准库函数 ca…