通过这几天的学习,已经初步能够了解小程序的目录结构、程序配置、界面设置,以及对其api的简单使用;
现在我们在继续学习几种在小程序中常用的api:
一、获取系统信息:
1)wx.getSystemInfo(Object object):其参数为回调函数,常用的有三种success(成功)、fail(失败)、complete(完成);
对于success函数,其有一个默认参数res,可以获取当前机型的数据信息,以解决小程序对不同机型的适配问题;
screenWidth | number | 屏幕宽度,单位px |
screenHeight | number | 屏幕高度,单位px |
windowWidth | number | 可使用窗口宽度,单位px |
windowHeight | number | 可使用窗口高度,单位px |
一般我们就是用上述的几个参数结合setData方法来实现小程序页面的动态渲染;
2)console.log():向调试面板中打印日志。console 是一个全局对象,可以直接访问。(类似于输出函数,一般用于调试)
3)微信小程序的交互api:
①wx.showToast(Object object) 用于显示消息提示框,与wx.hideToast(Object object)连用;
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 提示的内容 | |
icon | string | 'success' | 否 | 图标 |
image | string | 否 | 自定义图标的本地路径,image 的优先级高于 icon | |
duration | number | 1500 | 否 | 提示的延迟时间 |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
注:对于上表中的属性对于wx.hideToast(Object object)只有最后三种(三种回调函数)实际测试就散没有其在延时之后
提示信息也会自己消失;
②wx.showModal(Object object):显示模态对话框(类似于选项对话框true和false)
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 否 | 提示的标题 | |
content | string | 否 | 提示的内容(提示内容信息,开发者定义) | |
showCancel | boolean | true | 否 | 是否显示取消按钮 |
cancelText | string | '取消' | 否 | 取消按钮的文字,最多 4 个字符(一般不需要修改) |
confirmText | string | '确定' | 否 | 确认按钮的文字,最多 4 个字符(一般不需要修改) |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
对于success回调函数其res属性列表如下所示:
属性 | 类型 | 说明 |
---|---|---|
confirm | boolean | 为 true 时,表示用户点击了确定按钮 |
cancel | boolean | 为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭) |
③wx.showLoading(Object object):显示 loading 提示框。需主动调用 wx.hideLoading ()才能关闭提示;
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 是 | 提示的内容 | |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
4)请求响应:
①RequestTask wx.request(Object object) 发起 HTTPS 网络请求;
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 开发者服务器接口地址(必填,请求服务器的url) | |
data | string/object/ArrayBuffer | 否 | 请求的参数(一般用于传递参数信息) | |
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。content-type 默认为 application/json |
|
method | string | GET | 否 | HTTP 请求方法(get和post) |
dataType | string | json | 否 | 返回的数据格式(一般使用默认不需要修改) |
responseType | string | text | 否 | 响应的数据类型 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
在success回调函数中,一般实现数据的动态渲染(res属性表如下所示)、失败回调函数中一般返回提示信息;
属性 | 类型 | 说明 |
---|---|---|
data | string/Object/Arraybuffer | 开发者服务器返回的数据(常用用于获取数据) |
statusCode | number | 开发者服务器返回的 HTTP 状态码 |
header | Object | 开发者服务器返回的 HTTP Response Header |
②DownloadTask wx.downloadFile(Object object):下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径,单次下载允许的最大文件为 50MB。
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
url | string | 是 | 下载资源的 url(服务器地址) |
header | Object | 否 | HTTP 请求的 Header,Header 中不能设置 Referer |
filePath | string | 否 | 指定文件下载后存储的路径(存储的本地路径) |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数其参数res的属性列表如下所示:(一般不会使用,通过状态码判断文件是否传输正确)
属性 | 类型 | 说明 |
---|---|---|
tempFilePath | string | 临时文件路径。没传入 filePath 指定文件存储路径时会返回,下载后的文件会存储到一个临时文件 |
filePath | string | 用户文件路径。传入 filePath 时会返回,跟传入的 filePath 一致 |
statusCode | number | 开发者服务器返回的 HTTP 状态码 |
③UploadTask wx.uploadFile(Object object):将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type
为 multipart/form-data
。
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
url | string | 是 | 开发者服务器地址(上传地址,一般开发者写死在js中) |
filePath | string | 是 | 要上传文件资源的路径(用户本地文件路径,即上传的文件) |
name | string | 是 | 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 |
header | Object | 否 | HTTP 请求 Header,Header 中不能设置 Referer |
formData | Object | 否 | HTTP 请求中其他额外的 form data |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数的res属性列表如下所示:(一般也不会主动调用,用户不可见)
属性 | 类型 | 说明 |
---|---|---|
data | string | 开发者服务器返回的数据 |
statusCode | number | 开发者服务器返回的 HTTP 状态码 |
综上所述对于有回调函数的api其都有三种类型的函数(成功、失败、完成),对于成功的回调函数一般通过参数res来
获取从服务器返回的数据信息并在该函数中使用setData方法对页面进行动态渲染;
(好多api呀,还得在看几天,加油^_^,充实自己!!!)