【小程序开发必备】微信小程序常用API全介绍,附示例代码和使用场景

文章目录

  • 人工智能福利文章
  • 1.网络请求相关API
    • 1.1 wx.request
    • 1.2 wx.uploadFile
    • 1.3 wx.downloadFile
    • 1.4 wx.connectSocket
  • 2.页面跳转相关API
    • 2.1 wx.navigateTo
    • 2.2 wx.redirectTo
    • 2.3 wx.reLaunch
    • 2.4 wx.navigateBack
  • 3.数据缓存相关API
    • 3.1 wx.getStorageSync
    • 3.2 wx.setStorageSync
    • 3.3 wx.clearStorageSync
  • 4.交互反馈相关API
    • 4.1 wx.showToast
    • 4.2 wx.showLoading
    • 4.3 wx.hideToast
    • 4.4 wx.hideLoading
  • 5.设备相关API
    • 5.1 wx.getSystemInfo
    • 5.2 wx.getNetworkType
    • 5.3 wx.getBatteryInfo
    • 5.4 wx.vibrateShort
  • 6.媒体相关API
    • 6.1 wx.chooseImage
    • 6.2 wx.previewImage
    • 6.3 wx.chooseVideo
    • 6.4 wx.createCameraContext
  • 7.界面相关API
    • 7.1 wx.navigateTo
    • 7.2 wx.redirectTo
    • 7.3 wx.switchTab
    • 7.4 wx.navigateBack
  • 8.开放接口相关API
    • 8.1 wx.login
    • 8.2 wx.getUserInfo
    • 8.3 wx.requestPayment
  • 总结
  • 写在最后

在这里插入图片描述

✍创作者:全栈弄潮儿
🏡 个人主页: 全栈弄潮儿的个人主页
🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区
📙 专栏地址:小程序从入门到精通
在这里插入图片描述

人工智能福利文章

  • 【分享几个国内免费可用的ChatGPT镜像】
  • 【10几个类ChatGPT国内AI大模型】
  • 【用《文心一言》1分钟写一篇博客简直yyds】
  • 【用讯飞星火大模型1分钟写一个精美的PPT】

微信小程序提供了丰富的API,以下是全部常用API的介绍、示例代码和使用场景:

1.网络请求相关API

1.1 wx.request

API介绍:发起网络请求,可以用来获取服务器数据。

示例代码:

wx.request({url: 'https://api.example.com/data',success(res) {console.log(res.data)}
})

使用场景:当小程序需要向服务器请求数据时,可以使用该API。

1.2 wx.uploadFile

API介绍:上传文件。

示例代码:

wx.uploadFile({url: 'https://api.example.com/upload',filePath: 'filePath',name: 'file',success(res) {console.log(res.data)}
})

使用场景:当小程序需要上传文件时,可以使用该API。

1.3 wx.downloadFile

API介绍:下载文件。

示例代码:

  url: 'https://example.com/image',success(res) {console.log(res.tempFilePath)}
})

使用场景:当小程序需要下载文件时,可以使用该API。

1.4 wx.connectSocket

API介绍:创建 WebSocket 连接。

示例代码:

wx.connectSocket({url: 'wss://example.com/socket',success() {console.log('WebSocket 连接成功')}
})

使用场景:当小程序需要使用 WebSocket 进行实时通讯时,可以使用该API。

2.页面跳转相关API

2.1 wx.navigateTo

API介绍:用于跳转到应用内的页面。

示例代码:

wx.navigateTo({url: '/pages/detail/detail?id=123'
})

使用场景:当用户点击列表项时,跳转到该项的详情页面。

2.2 wx.redirectTo

API介绍:关闭当前页面,跳转到应用内的某个页面。

示例代码:

  url: '/pages/index/index'
})

使用场景:当用户提交表单后,跳转到成功页面。

2.3 wx.reLaunch

API介绍:关闭所有页面,打开应用内的某个页面。

示例代码:

wx.reLaunch({url: '/pages/index/index'
})

使用场景:当用户点击首页按钮时,关闭所有页面,返回首页。

2.4 wx.navigateBack

API介绍:关闭当前页面,返回上一页面或多级页面。

示例代码:

wx.navigateBack({delta: 1
})

使用场景:当用户点击返回按钮时,返回上一页面。

3.数据缓存相关API

3.1 wx.getStorageSync

API介绍:从本地缓存中获取数据。

示例代码:

let value = wx.getStorageSync('key')

使用场景:当小程序需要从本地缓存中获取数据时,可以使用该API。

3.2 wx.setStorageSync

API介绍:将数据存储到本地缓存中。

示例代码:

wx.setStorageSync('key', 'value')

使用场景:当小程序需要将数据存储到本地缓存中时,可以使用该API。

3.3 wx.clearStorageSync

API介绍:清空本地缓存。

示例代码:

wx.clearStorageSync()

使用场景:当小程序需要清空本地缓存时,可以使用该API。

4.交互反馈相关API

4.1 wx.showToast

API介绍:显示消息提示框。

示例代码:

wx.showToast({title: '操作成功',icon: 'success'
})

使用场景:当小程序需要在操作成功后给用户提示时,可以使用该API。

4.2 wx.showLoading

API介绍:显示 loading 提示框。

示例代码:

wx.showLoading({title: '加载中'
})

使用场景:当小程序需要在加载数据时给用户提示时,可以使用该API。

4.3 wx.hideToast

API介绍:隐藏消息提示框。

示例代码:

wx.hideToast()

使用场景:当小程序需要隐藏消息提示框时,可以使用该API。

4.4 wx.hideLoading

API介绍:隐藏 loading 提示框。

示例代码:

wx.hideLoading()

使用场景:当小程序需要隐藏 loading 提示框时,可以使用该API。

5.设备相关API

5.1 wx.getSystemInfo

API介绍:获取系统信息。

示例代码:

wx.getSystemInfo({success(res) {console.log(res.platform)}
})

使用场景:当小程序需要获取系统信息时,可以使用该API。

5.2 wx.getNetworkType

API介绍:获取网络类型。

示例代码:

wx.getNetworkType({success(res) {console.log(res.networkType)}
})

使用场景:当小程序需要获取当前网络类型时,可以使用该API。

5.3 wx.getBatteryInfo

API介绍:获取设备电量信息。

示例代码:

wx.getBatteryInfo({success(res) {console.log(res.level)}
})

使用场景:当小程序需要获取设备电量信息时,可以使用该API。

5.4 wx.vibrateShort

API介绍:使手机振动。

示例代码:

wx.vibrateShort()

使用场景:当小程序需要在用户操作时给出震动反馈时,可以使用该API。

6.媒体相关API

6.1 wx.chooseImage

API介绍:从相册或相机中选择图片或视频。

示例代码:

wx.chooseImage({count: 1,success(res) {console.log(res.tempFilePaths)}
})

使用场景:当小程序需要获取用户选择的图片或视频时,可以使用该API。

6.2 wx.previewImage

API介绍:预览图片。

示例代码:

wx.previewImage({urls: ['https://example.com/image.jpg']
})

使用场景:当小程序需要预览图片时,可以使用该API。

6.3 wx.chooseVideo

API介绍:从相册或相机中选择视频。

示例代码:

wx.chooseVideo({sourceType: ['album', 'camera'],success(res) {console.log(res.tempFilePath)}
})

使用场景:当小程序需要获取用户选择的视频时,可以使用该API。

6.4 wx.createCameraContext

API介绍:创建 camera 上下文 CameraContext 对象。

示例代码:

const cameraContext = wx.createCameraContext()cameraContext.takePhoto({success(res) {console.log(res.tempImagePath)}
})

使用场景:当小程序需要在页面上显示相机组件并进行拍照时,可以使用该API。

7.界面相关API

7.1 wx.navigateTo

API介绍:保留当前页面,跳转到应用内的某个页面。

示例代码:

wx.navigateTo({url: '/pages/detail/detail'
})

使用场景:当小程序需要跳转到其他页面时,可以使用该API。

7.2 wx.redirectTo

API介绍:关闭当前页面,跳转到应用内的某个页面。

示例代码:

wx.redirectTo({url: '/pages/index/index'
})

使用场景:当小程序需要关闭当前页面并跳转到其他页面时,可以使用该API。

7.3 wx.switchTab

API介绍:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

示例代码:

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

使用场景:当小程序需要跳转到 tabBar 页面时,可以使用该API。

7.4 wx.navigateBack

API介绍:关闭当前页面,返回上一页面或多级页面。

示例代码:

wx.navigateBack({delta: 1
})

使用场景:当小程序需要返回上一页面或多级页面时,可以使用该API。

8.开放接口相关API

8.1 wx.login

API介绍:调用接口获取登录凭证(code)。

示例代码:

wx.login({success(res) {console.log(res.code)}
})

使用场景:当小程序需要获取用户登录凭证时,可以使用该API。

8.2 wx.getUserInfo

API介绍:获取用户信息。

示例代码:

wx.getUserInfo({success(res) {console.log(res.userInfo)}
})

使用场景:当小程序需要获取用户信息时,可以使用该API。

8.3 wx.requestPayment

API介绍:发起微信支付。

示例代码:

wx.requestPayment({timeStamp: '',nonceStr: '',package: '',signType: 'MD5',paySign: '',success(res) { },fail(res) { }
})

使用场景:当小程序需要发起微信支付时,可以使用该API。

总结

以上是微信小程序常用API的介绍和示例代码,这些API包括网络请求、数据缓存、交互反馈、设备、媒体、界面、开放接口等方面,可以帮助开发者快速实现各种功能和交互效果。当然,实际开发中,开发者还需要根据具体需求选择合适的API来使用。

希望本文对初学者有所帮助,如果有任何问题或建议,欢迎留言讨论。

写在最后

✨原创不易,希望各位大佬多多支持。

👍点赞,你的认可是我创作的动力。

⭐️收藏,感谢你对本文的喜欢。

✏️评论,你的反馈是我进步的财富。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【小程序云开发】30分钟搭建个人相册小程序

文章目录 人工智能福利文章前言最终效果准备工作小程序架构创建小程序云开发环境创建数据库搭建个人相册写在最后 ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈…

【轻松开发微信小程序】实现用户增删改查功能

文章目录 人工智能福利文章前言创建微信小程序项目创建项目目录结构编写首页页面编写编辑页面实现增删改查功能展示最终效果总结写在最后 ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你…

【ChatGLM】记录一次Windows部署ChatGLM-6B流程及遇到的问题

文章目录 部署环境文件下载项目文件模型配置文件模型文件 运行demo遇到的问题 部署环境 系统版本:Windows 10 企业版 版本号:20H2 系统类型:64 位操作系统, 基于 x64 的处理器 处理器:Intel Core™ i7-8700 CPU 3.20GHz 3.19 GH…

微软将推出Win12 没想到吧?

👇👇关注后回复 “进群” ,拉你进程序员交流群👇👇 来源丨程序员软件库 https://mp.weixin.qq.com/s/0QIEVgIvKUXu3E3PhDazyA 据知名编辑 扎克•鲍登 发布的最新消息,微软内部已经着手更新 Windows 路线图&…

使用Windbg过程中两个使用细节分享

我们在使用工具的过程中,一般都会遇到一些使用上的细节或者技巧,今天就来给大家分享一下最近使用Windbg过程中遇到的两个问题,以供参考。 VC++常用功能开发汇总(专栏文章列表,欢迎订阅,持续更新...)https://blog.csdn.net/chenlycly/article/details/124272585<

Instant-ngp 在 window10 上的部署

一、环境部署 1、Visual Studio 2019 安装 Visual Studio 2019 预览版发行说明 | Microsoft Docs 从上述链接下载Community 2019版并安装&#xff0c;界面如下 选择C选项&#xff0c;右侧复选框默认&#xff0c;点击安装。安装完成后重启系统。 2、CUDA-Toolkit 安装 输入…

正式向Win12过渡,微软为Win11开启一大波功能更新

距离 Win 11 正式发布已过去接近两年时间&#xff0c;为了让大家放弃老系统升级 Win 11&#xff0c;微软没少下功夫。 除了各种强制弹窗通知提醒升级外&#xff0c;微软还大刀阔斧砍掉 Win 10 功能更新&#xff0c;并已宣布其最后死期——2025 年 10 月。 然而这一套组合拳下…

Windows 12 新界面曝光:透明玻璃欲回归,任务栏大变!

作为Windows 8.x的继任者&#xff0c;Windows 10选择了“扁平化”的UI风格&#xff0c;放弃了对圆角窗口的支持&#xff0c;而在Windows 11上&#xff0c;这些因素又全部回来了。 按照之前的说法&#xff0c;下一版Windows主要更新将引入类似Windows 7 Aero效果的新体验&#…

Windows10下ChatGLM2-6B模型本地化安装部署教程图解

随着人工智能技术的不断发展&#xff0c;自然语言处理模型在研究和应用领域备受瞩目。ChatGLM2-6B模型作为其中的一员&#xff0c;以其强大的聊天和问答能力备受关注&#xff0c;并且最突出的优点是性能出色且轻量化。然而&#xff0c;通过云GPU部署安装模型可能需要支付相应的…

Win11下VS2022的emguCV4.6安装配置方法

本人做图像处理处理很多年了&#xff0c;最开始是用VC6&#xff0c;尽管有一些源码例子&#xff0c;但好多库还得自己创建&#xff0c;什么都得自己写&#xff0c;工作量巨大。VS是从2003版本开始入门的&#xff0c;这也是VS的第一个版本&#xff0c;这个版本其实是个测试版&am…

你认为微软 Win12 可以在哪些方面改进?

众所周知&#xff0c;微软正在努力开发 Windows 的下一个版本&#xff0c;为了方便理解下文就叫它“Win12”了。新版本的内部代号为“Next Valley”&#xff0c;目前仍处于早期规划和工程阶段&#xff0c;目标是在 2024 年年底上线。 距离“Win12”发布还有 2 年多时间&#xf…

windows,win10安装微调chat,alpaca.cpp,并且成功运行(保姆级别教导)

win10下安装aplaca.cpp 1.下载alpaca-cpp源码 ​ https://github.com/antimatter15/alpaca.cpp 2.下载基础模型 下载 ggml-alpaca-7b-q4.bin并将其放在与chatzip 文件中的可执行文件相同的文件夹中。 从最新版本下载与您的操作系统对应的 zip 文件。在 Windows 上下载alpa…

ChatGLM-6B的windows本地部署使用

ChartGPT最近特别火&#xff0c;但是收费&#xff0c;而且国内访问不太方便&#xff0c;所以找了个类似的进行学习使用 ChatGLM-6B&#xff0c;开源支持中英文的对话大模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有62亿参数&#xff0c;简单说非常…

ChatGLM环境配置

【目的】 ChatGPT令人震撼的冲击下&#xff0c;笔者转向NLM的Transformer模型&#xff0c;ChatGLM作为清华开源的大语言模型&#xff0c;笔者尝试了其环境配置&#xff0c;为相关理论学习奠定基础。本文用于备忘与学习&#xff0c;无商业用途。 【参考】 ChatGLM的源码下载链…

马斯克最新访谈全文,信息量极大,远见令人震撼

"建设太空文明和成为多星球物种是重要的&#xff0c;如果将来发生了第三次世界大战或者类似的事情&#xff0c;或者发生了全球性热核战争&#xff0c;那个时候可能地球上所有的文明都将被毁于一旦&#xff0c;但它至少能够继续在别的地方存在。" 作者 | 六毛 来源 | …

NER实战:(命名实体识别/文本标注/Doccano工具使用/关键信息抽取/Token分类/源码解读/代码逐行解读)

精读这篇文章你就能知道什么是NER&#xff0c;并且可以学会在开发任务中使用NER 目录 1、chatGPT对NER的解释 2、NER任务 3、NER标注工具Doccano 1、chatGPT对NER的解释 命名实体识别&#xff08;Named Entity Recognition&#xff0c;NER&#xff09;是自然语言处理领域的…

Ubuntu 18.04 LTS 更换国内源(镜像)

中科大源官方帮助 官方还有其它发行版的帮助&#xff0c;在 Ubuntu 18.04 LTS 上打开软件列表可以看到“软件和更新”。

Ubuntu22.04更换国内镜像源(阿里、网易163、清华、中科大)

更换方法 Ubuntu采用apt作为软件安装工具&#xff0c;其镜像源列表记录在/etc/apt/source.list文件中。 首先将source.list复制为source.list.bak备份&#xff0c;然后将source.list内容改为需要的镜像源列表即可。 修改完成后保存source.list文件&#xff0c;执行&#xff…

比较两幅图像的相似度

现在以图搜图的功能比较火热&#xff0c;很好奇其原理。 简单的搜索学习得知&#xff0c;实现相似图片搜索的关键技术是“感知哈希算法”&#xff0c;作用是对每一张图片按照某种规律生成一个对应的指纹字符串。比较不同图片之间的指纹字符串&#xff0c;结果越接近&#xff0…

比较两个模拟信号的相似度

转载自微信公众号 原创 逸珺 嵌入式客栈 #include <stdio.h> #include <math.h>/* 返回值在区间&#xff1a; [-1,1] */ /* 如返回-10&#xff0c;则证明输入参数无效 */ #define delta 0.0001f double calculate_corss_correlation(double *s1, doub…