🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 微信小程序--API 目录结构 [toc] --- ## API导读 <table> <tr> <td>一级分类</td> <td>二级分类</td> <td>API</td> <td>描述</td> </tr> <tr> <td rowspan="27">基础</td> <td rowspan="3"></td> <td>wx.canIUse</td> <td>判断小程序的API,回调,参数,组件等是否在当前版本可用</td> </tr> <tr> <td>wx.base64ToArrayBuffer</td> <td>将 Base64 字符串转成 ArrayBuffer 对象</td> </tr> <tr> <td>wx.arrayBufferToBase64</td> <td>将 ArrayBuffer 对象转成 Base64 字符串</td> </tr> <tr> <td rowspan="2">系统</td> <td>wx.getSystemInfo</td> <td>获取系统信息</td> </tr> <tr> <td>wx.getSystemInfoSync</td> <td>wx.getSystemInfo 的同步版本</td> </tr> <tr> <td>更新</td> <td>wx.getUpdateManager</td> <td>获取全局唯一的版本更新管理器,用于管理小程序更新</td> </tr> <tr> <td>小程序-生命周期</td> <td>wx.getLaunchOptionsSync</td> <td>获取小程序启动时的参数</td> </tr> <tr> <td rowspan="12">小程序-应用级事件</td> <td>wx.onPageNotFound</td> <td>监听小程序要打开的页面不存在事件</td> </tr> <tr> <td>wx.onError</td> <td>监听小程序错误事件。如脚本错误或 API 调用报错等</td> </tr> <tr> <td>wx.onAudioInterruptionEnd</td> <td>监听音频中断结束事件</td> </tr> <tr> <td>wx.onAudioInterruptionBegin</td> <td>监听音频因为受到系统占用而被中断开始事件</td> </tr> <tr> <td>wx.onAppShow</td> <td>监听小程序切前台事件</td> </tr> <tr> <td>wx.onAppHide</td> <td>监听小程序切后台事件</td> </tr> <tr> <td>wx.offPageNotFound</td> <td>取消监听小程序要打开的页面不存在事件</td> </tr> <tr> <td>wx.offError</td> <td>取消监听小程序错误事件</td> </tr> <tr> <td>wx.offAudioInterruptionEnd</td> <td>取消监听音频中断结束事件</td> </tr> <tr> <td>wx.offAudioInterruptionBegin</td> <td>取消监听音频因为受到系统占用而被中断开始事件</td> </tr> <tr> <td>wx.offAppShow</td> <td>取消监听小程序切前台事件</td> </tr> <tr> <td>wx.offAppHide</td> <td>取消监听小程序切后台事件</td> </tr> <tr> <td rowspan="4">调试</td> <td>wx.setEnableDebug</td> <td>设置是否打开调试开关。此开关对正式版也能生效</td> </tr> <tr> <td>wx.getLogManager</td> <td>获取日志管理器对象</td> </tr> <tr> <td>console</td> <td>向调试面板中打印日志</td> </tr> <tr> <td>LogManager</td> <td>日志管理器实例</td> </tr> <tr> <td rowspan="4">定时器</td> <td>setInterval</td> <td>设定一个定时器</td> </tr> <tr> <td>clearInterval</td> <td>取消由 setInterval 设置的定时器</td> </tr> <tr> <td>setTimeout</td> <td>设定一个定时器</td> </tr> <tr> <td>clearTimeout</td> <td>取消由 setTimeout 设置的定时器</td> </tr> <tr> <td rowspan="5">路由</td> <td></td> <td>wx.switchTab</td> <td>跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面</td> </tr> <tr> <td></td> <td>wx.reLaunch</td> <td>关闭所有页面,打开到应用内的某个页面</td> </tr> <tr> <td></td> <td>wx.redirectTo</td> <td>关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面</td> </tr> <tr> <td></td> <td>wx.navigateTo</td> <td>保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面</td> </tr> <tr> <td></td> <td>wx.navigateBack</td> <td>关闭当前页面,返回上一页面或多级页面</td> </tr> <tr> <td rowspan="32">界面</td> <td rowspan="6">交互</td> <td>wx.showToast</td> <td>显示消息提示框</td> </tr> <tr> <td>wx.hideToast</td> <td>隐藏消息提示框</td> </tr> <tr> <td>wx.showModal</td> <td>显示模态对话框</td> </tr> <tr> <td>wx.showLoading</td> <td>显示 loading 提示框</td> </tr> <tr> <td>wx.hideLoading</td> <td>隐藏 loading 提示框</td> </tr> <tr> <td>wx.hideLoading</td> <td>隐藏 loading 提示框</td> </tr> <tr> <td rowspan="4">导航栏</td> <td>wx.showNavigationBarLoading</td> <td>在当前页面显示导航条加载动画</td> </tr> <tr> <td>wx.setNavigationBarTitle</td> <td>动态设置当前页面的标题</td> </tr> <tr> <td>wx.setNavigationBarColor</td> <td>设置页面导航条颜色</td> </tr> <tr> <td>wx.hideNavigationBarLoading</td> <td>在当前页面隐藏导航条加载动画</td> </tr> <tr> <td rowspan="2">导航栏</td> <td>wx.setBackgroundTextStyle</td> <td>动态设置下拉背景字体、loading 图的样式</td> </tr> <tr> <td>wx.setBackgroundColor</td> <td>动态设置窗口的背景色</td> </tr> <tr> <td rowspan="8">Tab Bar</td> <td>wx.showTabBarRedDot</td> <td>显示 tabBar 某一项的右上角的红点</td> </tr> <tr> <td>wx.hideTabBarRedDot</td> <td>隐藏 tabBar 某一项的右上角的红点</td> </tr> <tr> <td>wx.showTabBar</td> <td>显示 tabBar</td> </tr> <tr> <td>wx.hideTabBar</td> <td>隐藏 tabBar</td> </tr> <tr> <td>wx.setTabBarStyle</td> <td>动态设置 tabBar 的整体样式</td> </tr> <tr> <td>wx.setTabBarItem</td> <td>动态设置 tabBar 某一项的内容</td> </tr> <tr> <td>wx.setTabBarBadge</td> <td>为 tabBar 某一项的右上角添加文本</td> </tr> <tr> <td>wx.removeTabBarBadge</td> <td>移除 tabBar 某一项右上角的文本</td> </tr> <tr> <td>字体</td> <td>wx.loadFontFace</td> <td>动态加载网络字体。文件地址需为下载类型。iOS 仅支持 https 格式文件地址</td> </tr> <tr> <td rowspan="2">下拉刷新</td> <td>wx.stopPullDownRefresh</td> <td>停止当前页面下拉刷新</td> </tr> <tr> <td>wx.startPullDownRefresh</td> <td>开始下拉刷新。调用后触发下拉刷新动画,效果与用户手动下拉刷新一致</td> </tr> <tr> <td>滚动</td> <td>wx.pageScrollTo</td> <td>将页面滚动到目标位置,支持选择器和滚动距离两种方式定位</td> </tr> <tr> <td>动画</td> <td>wx.createAnimation</td> <td>创建一个动画实例 animation。调用实例的方法来描述动画</td> </tr> <tr> <td>置顶</td> <td>wx.setTopBarText</td> <td>动态设置置顶栏文字内容</td> </tr> <tr> <td>自定义组件</td> <td>wx.nextTick</td> <td>延迟一部分操作到下一个时间片再执行</td> </tr> <tr> <td>菜单</td> <td>wx.getMenuButtonBoundingClientRect</td> <td>获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点</td> </tr> <tr> <td rowspan="2">窗口</td> <td>wx.onWindowResize</td> <td>监听窗口尺寸变化事件</td> </tr> <tr> <td>wx.offWindowResize</td> <td>取消监听窗口尺寸变化事件</td> </tr> <tr> <td rowspan="2">键盘</td> <td>wx.onWindowResize</td> <td>监听键盘高度变化</td> </tr> <tr> <td>wx.getSelectedTextRange</td> <td>在input、textarea等focus之后,获取输入框的光标位置</td> </tr> <tr> <td rowspan="21">网络</td> <td>发送请求</td> <td>wx.request</td> <td>发起 HTTPS 网络请求</td> </tr> <tr> <td>下载</td> <td>wx.downloadFile</td> <td>下载文件资源到本地</td> </tr> <tr> <td>上传</td> <td>wx.uploadFile</td> <td>将本地资源上传到服务器</td> </tr> <tr> <td rowspan="7">WebSocket</td> <td>wx.sendSocketMessage</td> <td>通过 WebSocket 连接发送数据</td> </tr> <tr> <td>wx.onSocketOpen</td> <td>监听 WebSocket 连接打开事件</td> </tr> <tr> <td>wx.onSocketMessage</td> <td>监听 WebSocket 接受到服务器的消息事件</td> </tr> <tr> <td>wx.onSocketError</td> <td>监听 WebSocket 错误事件</td> </tr> <tr> <td>wx.onSocketClose</td> <td>监听 WebSocket 连接关闭事件</td> </tr> <tr> <td>wx.connectSocket</td> <td>创建一个 WebSocket 连接</td> </tr> <tr> <td>wx.closeSocket</td> <td>关闭 WebSocket 连接</td> </tr> <tr> <td rowspan="10">mDNS</td> <td>wx.stopLocalServiceDiscovery</td> <td>停止搜索 mDNS 服务</td> </tr> <tr> <td>wx.startLocalServiceDiscovery</td> <td>开始搜索局域网下的 mDNS 服务</td> </tr> <tr> <td>wx.onLocalServiceResolveFail</td> <td>监听 mDNS 服务解析失败的事件</td> </tr> <tr> <td>wx.onLocalServiceLost</td> <td>监听 mDNS 服务离开的事件</td> </tr> <tr> <td>wx.onLocalServiceFound</td> <td>监听 mDNS 服务发现的事件</td> </tr> <tr> <td>wx.onLocalServiceDiscoveryStop</td> <td>监听 mDNS 服务停止搜索的事件</td> </tr> <tr> <td>wx.offLocalServiceResolveFail</td> <td>取消监听 mDNS 服务解析失败的事件</td> </tr> <tr> <td>wx.offLocalServiceLost</td> <td>取消监听 mDNS 服务离开的事件</td> </tr> <tr> <td>wx.offLocalServiceFound</td> <td>取消监听 mDNS 服务发现的事件</td> </tr> <tr> <td>wx.offLocalServiceDiscoveryStop</td> <td>取消监听 mDNS 服务停止搜索的事件</td> </tr> <tr> <td>UDP 通讯</td> <td>wx.createUDPSocket</td> <td>创建一个 UDP Socket 实例</td> </tr> <tr> <td rowspan="10">数据缓存</td> <td rowspan="10"></td> <td>wx.setStorage</td> <td>将数据存储在本地缓存中指定的 key 中</td> </tr> <tr> <td>wx.setStorageSync</td> <td>wx.setStorage 的同步版本</td> </tr> <tr> <td>wx.removeStorage</td> <td>从本地缓存中移除指定 key</td> </tr> <tr> <td>wx.removeStorageSync</td> <td>wx.removeStorage 的同步版本</td> </tr> <tr> <td>wx.getStorage</td> <td>从本地缓存中异步获取指定 key 的内容</td> </tr> <tr> <td>wx.getStorageSync</td> <td>wx.getStorage 的同步版本</td> </tr> <tr> <td>wx.getStorageInfo</td> <td>异步获取当前storage的相关信息</td> </tr> <tr> <td>wx.getStorageInfoSync</td> <td>wx.getStorageInfo 的同步版本</td> </tr> <tr> <td>wx.clearStorage</td> <td>清理本地数据缓存</td> </tr> <tr> <td>wx.clearStorageSync</td> <td>wx.clearStorage 的同步版本</td> </tr> <tr> <td rowspan="32">媒体</td> <td>地图</td> <td>wx.createMapContext</td> <td>创建 map 上下文 MapContext 对象</td> </tr> <tr> <td rowspan="6">图片</td> <td>wx.saveImageToPhotosAlbum</td> <td>保存图片到系统相册</td> </tr> <tr> <td>wx.previewImage</td> <td>在新页面中全屏预览图片</td> </tr> <tr> <td>wx.getImageInfo</td> <td>获取图片信息</td> </tr> <tr> <td>wx.compressImage</td> <td>压缩图片接口,可选压缩质量</td> </tr> <tr> <td>wx.chooseMessageFile</td> <td>从客户端会话选择文件</td> </tr> <tr> <td>wx.chooseImage</td> <td>从本地相册选择图片或使用相机拍照</td> </tr> <tr> <td rowspan="3">视频</td> <td>wx.saveVideoToPhotosAlbum</td> <td>保存视频到系统相册</td> </tr> <tr> <td>wx.createVideoContext</td> <td>创建 video 上下文 VideoContext 对象</td> </tr> <tr> <td>wx.chooseVideo</td> <td>拍摄视频或从手机相册中选视频</td> </tr> <tr> <td rowspan="7">音频</td> <td>wx.stopVoice</td> <td>结束播放语音</td> </tr> <tr> <td>wx.setInnerAudioOption</td> <td>设置 InnerAudioContext 的播放选项</td> </tr> <tr> <td>wx.playVoice</td> <td>开始播放语音</td> </tr> <tr> <td>wx.pauseVoice</td> <td>暂停正在播放的语音</td> </tr> <tr> <td>wx.getAvailableAudioSources</td> <td>获取当前支持的音频输入源</td> </tr> <tr> <td>wx.createInnerAudioContext</td> <td>创建内部 audio 上下文 InnerAudioContext 对象</td> </tr> <tr> <td>wx.createAudioContext</td> <td>创建 audio 上下文 AudioContext 对象</td> </tr> <tr> <td rowspan="9">背景音频</td> <td>wx.stopBackgroundAudio</td> <td>停止播放音乐</td> </tr> <tr> <td>wx.seekBackgroundAudio</td> <td>控制音乐播放进度</td> </tr> <tr> <td>wx.playBackgroundAudio</td> <td>使用后台播放器播放音乐</td> </tr> <tr> <td>wx.pauseBackgroundAudio</td> <td>暂停播放音乐</td> </tr> <tr> <td>wx.onBackgroundAudioStop</td> <td>监听音乐停止事件</td> </tr> <tr> <td>wx.onBackgroundAudioPlay</td> <td>监听音乐播放事件</td> </tr> <tr> <td>wx.onBackgroundAudioPause</td> <td>监听音乐暂停事件</td> </tr> <tr> <td>wx.getBackgroundAudioPlayerState</td> <td>获取后台音乐播放状态</td> </tr> <tr> <td>wx.getBackgroundAudioManager</td> <td>获取全局唯一的背景音频管理器</td> </tr> <tr> <td rowspan="2">实时音视频</td> <td>wx.createLivePusherContext</td> <td>创建 live-pusher 上下文 LivePusherContext 对象</td> </tr> <tr> <td>wx.createLivePlayerContext</td> <td>创建 live-player 上下文 LivePlayerContext 对象</td> </tr> <tr> <td rowspan="3">录音</td> <td>wx.stopRecord</td> <td>停止录音</td> </tr> <tr> <td>wx.startRecord</td> <td>开始录音</td> </tr> <tr> <td>wx.getRecorderManager</td> <td>获取全局唯一的录音管理器 RecorderManager</td> </tr> <tr> <td>相机</td> <td>wx.createCameraContext</td> <td>创建 camera 上下文 CameraContext 对象</td> </tr> <tr> <td rowspan="3">位置</td> <td rowspan="3"></td> <td>wx.openLocation</td> <td>使用微信内置地图查看位置</td> </tr> <tr> <td>wx.getLocation</td> <td>获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用</td> </tr> <tr> <td>wx.chooseLocation</td> <td>打开地图选择位置</td> </tr> <tr> <td rowspan="4">转发</td> <td rowspan="4"></td> <td>wx.updateShareMenu</td> <td>更新转发属性</td> </tr> <tr> <td>wx.showShareMenu</td> <td>显示当前页面的转发按钮</td> </tr> <tr> <td>wx.hideShareMenu</td> <td>隐藏转发按钮</td> </tr> <tr> <td>wx.getShareInfo</td> <td>获取转发详细信息</td> </tr> <tr> <td rowspan="13">开发接口</td> <td rowspan="2">登陆</td> <td>wx.login</td> <td>调用接口获取登录凭证(code)</td> </tr> <tr> <td>wx.checkSession</td> <td>检查登录态是否过期</td> </tr> <tr> <td rowspan="2">小程序跳转</td> <td>wx.navigateToMiniProgram</td> <td>打开另一个小程序</td> </tr> <tr> <td>wx.navigateBackMiniProgram</td> <td>返回到上一个小程序</td> </tr> <tr> <td>账户信息</td> <td>wx.getAccountInfoSync</td> <td>返回到上一个小程序</td> </tr> <tr> <td>用户信息</td> <td>wx.getUserInfo</td> <td>获取用户信息</td> </tr> <tr> <td>数据上报</td> <td>wx.reportMonitor</td> <td>自定义业务数据监控上报接口</td> </tr> <tr> <td>数据分析</td> <td>wx.reportAnalytics</td> <td>自定义分析数据上报接口</td> </tr> <tr> <td>支付</td> <td>wx.requestPayment</td> <td>发起微信支付</td> </tr> <tr> <td>授权</td> <td>wx.authorize</td> <td>提前向用户发起授权请求</td> </tr> <tr> <td rowspan="2">设置</td> <td>wx.openSetting</td> <td>调起客户端小程序设置界面,返回用户设置的操作结果</td> </tr> <tr> <td>wx.getSetting</td> <td>获取用户的当前设置</td> </tr> <tr> <td>收货地址</td> <td>wx.chooseAddress</td> <td>获取用户收货地址</td> </tr> <tr> <td rowspan="3">设备</td> <td rowspan="2">剪贴板</td> <td>wx.setClipboardData</td> <td>设置系统剪贴板的内容</td> </tr> <tr> <td>wx.getClipboardData</td> <td>获取系统剪贴板的内容</td> </tr> <tr> <td>电话</td> <td>wx.makePhoneCall</td> <td>拨打电话</td> </tr> </table> --- ## 微信小程序--API * 小程序开发框架提供丰富的微信原生 API * 多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题 --- ### 一、基础api ```php 1. wx.getSystemInfoSync 获取系统信息 2. console.debug 向调试面板中打印 debug 日志 3. console.log 向调试面板中打印 log 日志 4. console.info 向调试面板中打印 info 日志 5. LogManager.debug 写 debug 日志 6. LogManager.log 写 log 日志 7. LogManager.info 写 info 日志 ``` --- #### 1. `wx.getSystemInfoSync` 和 `wx.getSystemInfo` 获取系统信息 **属性**|**类型**|**描述** ---|---|--- success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > 成功返回值: **属性**|**类型**|**描述** ---|---|--- brand|string|设备品牌 model|string|设备型号 pixelRatio|string|设备像素比 screenWidth|string|屏幕宽度,单位px screenHeight|number|屏幕高度,单位px windowWidth|number|可使用窗口宽度,单位px windowHeight|number|可使用窗口高度,单位px statusBarHeight|number|状态栏的高度,单位px language|string|微信设置的语言 version|string|微信版本号 system|string|操作系统及版本 platform|string|客户端平台 fontSizeSetting|number|用户字体大小(单位px) albumAuthorized|boolean|允许微信使用相册的开关 cameraAuthorized|boolean|允许微信使用摄像头的开关 locationAuthorized|boolean|允许微信使用定位的开关 microphoneAuthorized|boolean|允许微信使用麦克风的开关 notificationAuthorized|boolean|允许微信通知的开关 bluetoothEnabled|boolean|蓝牙的系统开关 locationEnabled|boolean|地理位置的系统开关 wifiEnabled|boolean|Wi-Fi 的系统开关 > js示例: ```js Page({ onLoad: function (options) { wx.getSystemInfo({ success(){ console.log(res); console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 2. `console.debug` 向调试面板中打印 debug 日志 > js示例: ```js Page({ onLoad: function (options) { console.debug('欧阳克'); } }) ``` --- #### 3. `console.log` 向调试面板中打印 log 日志 > js示例: ```js Page({ onLoad: function (options) { console.log('欧阳克'); } }) ``` --- #### 4. `console.info` 向调试面板中打印 info 日志 > js示例: ```js Page({ onLoad: function (options) { console.info('欧阳克'); } }) ``` --- #### 5. `LogManager.debug` 写 debug 日志 > js示例: ```js Page({ onLoad: function (options) { LogManager.debug('欧阳克'); } }) ``` --- #### 6. `LogManager.log` 写 log 日志 > js示例: ```js Page({ onLoad: function (options) { LogManager.log('欧阳克'); } }) ``` --- #### 7. `LogManager.info` 写 info 日志 > js示例: ```js Page({ onLoad: function (options) { LogManager.info('欧阳克'); } }) ``` --- ### 二、路由api ```php 1. wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 2. wx.reLaunch 关闭所有页面,打开到应用内的某个页面 3. wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 4. wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 5. wx.navigateBack 关闭当前页面,返回上一页面或多级页面 ``` --- #### 1. `wx.switchTab` 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 **属性**|**类型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳转的 tabBar 页面的路径,路径后不能带参数。 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.switchTab({ url: 'a', success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` > app.json示例: ```json { "tabBar": { "list": [ { "pagePath": "index", "text": "首页" }, { "pagePath": "a", "text": "A页面" } ] } } ``` --- #### 2. `wx.reLaunch` 关闭所有页面,打开到应用内的某个页面 **属性**|**类型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳转的应用内页面路径,路径后可以带参数。 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.reLaunch({ url: 'a?id=1', success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 3. `wx.redirectTo` 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 **属性**|**类型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.redirectTo({ url: 'a?id=1', success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 4. `wx.navigateTo` 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 **属性**|**类型**|**必填**|**描述** ---|---|---|--- url|string|是|需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.navigateTo({ url: 'a?id=1', success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 5. `wx.navigateBack` 关闭当前页面,返回上一页面或多级页面 **属性**|**类型**|**必填**|**描述** ---|---|---|--- delta|string|是|返回的页面数,如果 delta 大于现有页面数,则返回到首页,最多10层 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.navigateBack({ delta: 10, success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- ### 三、界面api ```php 1. wx.showToast 显示消息提示框 2. wx.hideToast 隐藏消息提示框 3. wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 4. wx.hideLoading 隐藏 loading 提示框 5. wx.showModal 显示模态对话框 6. wx.showActionSheet 显示操作菜单 7. wx.showTabBarRedDot 显示 tabBar 某一项的右上角的红点 ``` --- #### 1. `wx.showToast` 显示消息提示框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- title|string|是|提示的内容 icon|string|否|图标 image|string|否|自定义图标的本地路径,image 的优先级高于 icon duration|number|否|提示的延迟时间 mask|boolean|否|是否显示透明蒙层,防止触摸穿透 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > icon合法值: **属性**|**描述** ---|--- success|显示成功图标,此时 title 文本最多显示 7 个汉字长度 loading|显示加载图标,此时 title 文本最多显示 7 个汉字长度 none|不显示图标,此时 title 文本最多可显示两行 > js示例: ```js Page({ onLoad: function (options) { wx.showToast({ title: '成功', icon: 'success', image: 'img/1.png', // 放在小程序根目录,icon就不会显示了 duration : 1000, mask : true, success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 2. `wx.hideToast` 隐藏消息提示框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.hideToast({ success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 3. `wx.showLoading` 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- title|string|是|提示的内容 mask|boolean|否|是否显示透明蒙层,防止触摸穿透 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.showLoading({ title: '加载中', mask : true, success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 4. `wx.hideLoading` 隐藏 loading 提示框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.hideLoading({ success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 5. `wx.showModal` 显示模态对话框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- title|string|是|提示的标题 content|string|是|提示的内容 showCancel|boolean|否|是否显示取消按钮 cancelText|string|否|取消按钮的文字,最多 4 个字符 cancelColor|string|否|取消按钮的文字颜色,必须是 16 进制格式的颜色字符串 confirmText|string|否|确认按钮的文字,最多 4 个字符 confirmColor|string|否|确认按钮的文字颜色,必须是 16 进制格式的颜色字符串 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.showModal({ title: '提示', content: '这是一个模态弹窗', showCancel : true, cancelText : '取消按钮', cancelColor : '#333', confirmText : '确定按钮', confirmColor : 'red', success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 6. `wx.showActionSheet` 显示模态对话框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- itemList|Array|是|按钮的文字数组,数组长度最大为 6 itemColor|string|否|按钮的文字颜色 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.showActionSheet({ itemList: [ '欧阳克', '黄蓉', '郭靖', '杨康', '穆念慈' ], itemColor: '#333', success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 7. `wx.showTabBarRedDot` 显示 tabBar 某一项的右上角的红点 **属性**|**类型**|**必填**|**描述** ---|---|---|--- index|number|是|tabBar 的哪一项,从左边算起,0开始 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.showTabBarRedDot({ index: 1, success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- ### 四、网络api ```php 1. wx.request 发起 HTTPS 网络请求 ``` --- #### 1. `wx.request` 发起 HTTPS 网络请求 **属性**|**类型**|**必填**|**描述** ---|---|---|--- url|number|是|开发者服务器接口地址 data|string/object/ArrayBuffer|否|请求的参数 header|Object|否|设置请求的 header,header 中不能设置 Referer method|string|否|HTTP 请求方法 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.request({ url: 'http://apis.juhe.cn/mobile/get', data : { key : '4d6cce531387deeedf359687fb04c163', phone : '13429667914' }, header: { 'content-type': 'application/json' }, method : 'POST', success(e){ console.log(e); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` > 接口返回的json数据不能使用,请看这里: >> 对于 POST 方法且 header['content-type'] 为 application/json 的数据,会对数据进行 JSON 序列化 >> 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换成 query string --- ### 五、媒体api ```php 1. wx.previewImage 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。 ``` --- #### 1. `wx.previewImage` 在新页面中全屏预览图片。 **属性**|**类型**|**必填**|**描述** ---|---|---|--- urls|Array|是|需要预览的图片链接列表 current|string|否|当前显示图片的链接 success|function|否|接口调用成功的回调函数 fail|function|否|接口调用失败的回调函数 complete|function|否|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.previewImage({ current: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326985&di=3386e412418b6826b3b1fcbf55f72165&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fsjbbs%2F7692%2Fa7691515_s.jpg', urls: [ 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326985&di=3386e412418b6826b3b1fcbf55f72165&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fsjbbs%2F7692%2Fa7691515_s.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326983&di=37ac9ac0c2c7dccaa914d5ebae940325&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140110%2F17563091_221827492154_2.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558711326983&di=e32936aa5551a260c99cb4deaaf6c141&imgtype=0&src=http%3A%2F%2Fpic35.nipic.com%2F20131115%2F13972544_160943053001_2.jpg' ] success(){ console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- ### 六、开放接口api ```php 1. wx.authorize 提前向用户发起授权请求 2. wx.chooseAddress 获取用户收货地址 3. wx.chooseInvoiceTitle 选择用户的发票抬头 4. wx.chooseInvoice 选择用户已有的发票 5. wx.getUserInfo 获取用户信息 ``` --- #### 1. `wx.authorize` 提前向用户发起授权请求 **属性**|**类型**|**描述** ---|---|--- scope|string|需要获取权限的 scope success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > scope合法值: **属性**|**对应接口**|**描述** ---|---|--- scope.address|wx.chooseAddress|通讯地址 scope.invoiceTitle|wx.chooseInvoiceTitle|发票抬头 scope.invoice|wx.chooseInvoice|获取发票 scope.userInfo|wx.getUserInfo|用户信息 > js示例: ```js Page({ onLoad: function (options) { wx.authorize({ scope: 'scope.address', success(e) { console.log(e); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 2. `wx.chooseAddress` 获取用户收货地址 **属性**|**类型**|**描述** ---|---|--- success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > js示例1: ```js Page({ onLoad: function (options) { wx.chooseAddress({ success(e) { console.log(e); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }); } }) ``` > js示例2: ```js Page({ onLoad: function (options) { wx.authorize({ scope: 'scope.address', success(e) { wx.chooseAddress({ success(e) { console.log(e); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 5. `wx.getUserInfo` 获取用户信息 **属性**|**类型**|**描述** ---|---|--- withCredentials|function|是否带上登录态信息 lang|string|显示用户信息的语言,en、zh_CN、zh_TW success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > js示例1: ```js Page({ onLoad: function (options) { // 这样调用,会失败 wx.getUserInfo({ success(e) { console.log(e); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }); } }) ``` > js示例2: ```js Page({ onLoad: function (options) { // 授权成功后,还是失败 // 因为微信已经禁止直接调用微信用户信息,需要用户主动请求 wx.authorize({ scope: 'scope.userInfo', success(e) { wx.getUserInfo({ success(e) { console.log(e); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` #### `button` 按钮 **属性**|**类型**|**描述** ---|---|---|--- open-type|string|微信开放能力 bindgetuserinfo|eventhandle|用户点击该按钮时,会返回获取到的用户信息,open-type="getUserInfo"时有效 bindcontact|eventhandle|客服消息回调,open-type="contact"时有效 bindgetphonenumber|eventhandle|获取用户手机号回调,open-type=getPhoneNumber时有效 > js示例3: ```js Page({ onLoad: function (options) { a(e){ console.log(e); } } }) ``` ```html <button open-type="getUserInfo" bindgetuserinfo='a'>登录</button> ``` --- ### 七、设备api ```php 1. wx.setClipboardData 设置系统剪贴板的内容 2. wx.getClipboardData 获取系统剪贴板的内容 3. wx.getNetworkType 获取网络类型 4. wx.makePhoneCall 拨打电话 5. wx.scanCode 调起客户端扫码界面进行扫码 ``` --- #### 1. `wx.setClipboardData` 设置系统剪贴板的内容 **属性**|**类型**|**描述** ---|---|--- data|string|剪贴板的内容 success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.setClipboardData({ data: '我是欧阳克', success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 2. `wx.getClipboardData` 获取系统剪贴板的内容 **属性**|**类型**|**描述** ---|---|--- success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.getClipboardData({ success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 3. `wx.getNetworkType` 获取网络类型 **属性**|**类型**|**描述** ---|---|--- success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.getNetworkType({ success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 4. `wx.makePhoneCall` 拨打电话 **属性**|**类型**|**描述** ---|---|--- phoneNumber|string|需要拨打的电话号码 success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > js示例: ```js Page({ onLoad: function (options) { wx.makePhoneCall({ phoneNumber : '13843843843', success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ``` --- #### 5. `wx.scanCode` 调起客户端扫码界面进行扫码 **属性**|**类型**|**描述** ---|---|--- onlyFromCamera|boolean|是否只能从相机扫码,不允许从相册选择图片 scanType|Array|扫码类型 success|function|接口调用成功的回调函数 fail|function|接口调用失败的回调函数 complete|function|接口调用结束的回调函数(调用成功、失败都会执行) > scanType合法值 **属性**|**描述** ---|--- barCode|一维码 qrCode|二维码 datamatrix|Data Matrix 码 pdf417|PDF417 条码 > js示例: ```js Page({ onLoad: function (options) { wx.scanCode({ onlyFromCamera : true, scanType : ['qrCode'], success(e) { console.log(e); console.log('成功'); }, fail(){ console.log('失败'); }, complete(){ console.log('成功或失败'); } }) } }) ```