# 微信小程序--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('成功或失败');
}
})
}
})
```
- 序言
- PHP基础
- 认识PHP
- 环境安装
- PHP语法
- 流程控制
- PHP数组
- PHP函数
- PHP类与对象
- PHP命名空间
- PHP7新特性
- PHP方法库
- PHP交互
- 前后端交互
- 项目常规开发流程
- MySQL数据库
- 会话控制
- Ajax分页技术
- 细说函数
- 类与对象
- 对象进阶
- 类与对象进阶
- OOP面向对象
- 设计模式
- 路由与模板引擎
- 异常类
- PHP爬虫
- PHP抓取函数
- PHP匹配函数
- 正则表达式
- PHP字符串函数
- 抓取实战
- PHP接口
- 了解接口
- PHP插件
- PHPSpreadsheet
- ThinkPHP6
- 安装
- 架构
- 数据库
- 数据库操作
- 视图
- 模版
- 模型
- 杂项
- 命令行
- 交互
- 微信小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- 百度小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- Linux
- 服务器上线流程
- 安装svn
- MySQL
- 认识MySQL
- MySQL函数
- 杂项
- composer依赖管理工具