微信小程序API(详细 教程)

您所在的位置:网站首页 药剂api是什么意思 微信小程序API(详细 教程)

微信小程序API(详细 教程)

2024-07-10 03:34| 来源: 网络整理| 查看: 265

微信内置api

小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。

API 使用说明

小程序提供了很多实用的方法供开发者使用

小程序全局对象是: wx

所有的 API 都保存在 wx 对象中 在这里插入图片描述

一,界面交互 显示消息提示框: wx.showToast() wx.showToast({ title: '成功', icon: 'success', duration: 2000 })

在这里插入图片描述

显示消息加载框: wx.showLoading()

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

wx.showLoading({ title: '加载中', }) setTimeout(function () { wx.hideLoading() }, 2000)

显示模态对话框 wx.showModal wx.showModal({ title: '提示', content: '这是一个模态弹窗', success (res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } })

在这里插入图片描述

二,网络请求 1,接口请求 wx.request 1.1,配置合法域名

小程序请求的接口需要https和域名,并且需要在微信小程序管理后台中加入指定域名

在这里插入图片描述 在这里插入图片描述

1.2,请求示例 wx.request({ url: '', data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } }) 1.3,文件下载 wx.downloadFile

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为 200MB

同样也要配置下载合法域名

wx.downloadFile({ url: '', success (res) { // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容 if (res.statusCode === 200) { wx.playVoice({ filePath: res.tempFilePath }) } } }) 1.3,文件上传 wx.uploadFile

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data 同样也要配置下载合法域名

wx.uploadFile({ url: '', filePath: tempFilePaths[0], name: 'file', formData: { 'user': 'test' }, success (res){ const data = res.data //do something } }) 1.4,分享朋友圈 onShareTimeline

监听右上角菜单“分享到朋友圈”按钮的行为,并自定义分享内容 注意:只有定义了此事件处理函数,右上角菜单才会显示“分享到朋友圈”按钮

Page({ /** * 生命周期函数--监听页面加载 */ onLoad() { // 用户点击右上角分享给好友,要先在分享好友这里设置menus的两个参数,才可以分享朋友圈 wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] //shareAppMessage必须得有 }) }, //用户点击右上角分享朋友圈 onShareTimeline() { return { title: '自定义分享标题', query: "id=110101&name=heyzqt", imageUrl: "" } } })

在这里插入图片描述

三 ,获取系统信息 wx.getSystemInfo 功能描述

异步获取系统信息。需要一定的微信客户端版本支持,在不支持的客户端上,会使用同步实现来返回。

参数

Object object 在这里插入图片描述 object.success 回调函数

参数

Object res 在这里插入图片描述

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) } })

输出结果: 在这里插入图片描述

四,获取用户信息 wx.getUserProfile 获取用户信息的接口变化历史:

1,直接用wx.getUserInfo获取用户信息,后来被限制。 2,使用button按钮的open-type=“getUserInfo”,通过bindgetuserinfo事件获取用户信息,现在叒限制。 3,使用API:getUserProFile获取用户信息

小程序发了篇公告小程序登录、用户信息相关接口调整说明

在这里插入图片描述

将授权登陆获取用户信息的接口调整了,新增了一个wx.getUserProfile。特说明一下授权登陆的注意事项:

1,原授权登陆流程不变,依旧是 在这里插入图片描述 2,只是获取用户信息的地方发生改变了,获取用户信息必须通过wx.getUserProfile获取

3,wx.getUserProfile这个API必须写在事件的最上面在这里插入代码片

示例代码:

wxml:

登陆

JS:

login() { wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写 success: (file) => { console.log(file) wx.login({ success: (res) => { console.log(res); wx.request({ url: 'code获取openid的接口', data: { code: res.code }, success: (open) => { console.log(open.data); wx.request({ url: '授权登陆接口', data: { openid: open.data.openid, NickName: file.userInfo.nickName, HeadUrl: file.userInfo.avatarUrl }, success(data) { console.log(data.data); } }) } }) } }) } }) },


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3