uniapp php接口如何写,uni-app入门教程之接口的基本使用
文章目录前言
一、网络请求
二、图片处理
1.uni.chooseImage(OBJECT)
2.uni.previewImage(OBJECT)
3.uni.getImageInfo(OBJECT)
4.uni.saveImageToPhotosAlbum(OBJECT)
三、文件上传和下载
1.uni.uploadFile(OBJECT)
2.uni.downloadFile(OBJECT)
四、数据缓存
1.uni.setStorage(OBJECT)
2.uni.setStorageSync(KEY,DATA)
3.uni.getStorage(OBJECT)
4.uni.getStorageSync(KEY)
5.uni.removeStorage(OBJECT)
6.uni.removeStorageSync(KEY)
总结
前言
本文主要介绍uni-app提供的一些基础接口，包括：网络请求接口，用于通过指定的请求方法，携带特定的数据，向特定的地址请求并返回请求结果；图片处理接口，包括选择、预览、获取信息、保存到本地等接口；文件处理接口，包括文件上传和下载接口；数据缓存接口，包括以同步或异步的方式保存、获取或删除数据的接口。
一、网络请求
小程序要想正常运转，都需要与服务器端进行数据交互，一般都通过接口实现。
数据交互一般都会通过网络请求接口实现。
uni.request(OBJECT)是用于发起网络请求的接口。
OBJECT常见参数如下：参数名类型必填与否默认值说明urlString是无开发者服务器接口地址
dataObject/String/ArrayBuffer否无请求的参数
headerObject否无设置请求的 header，不能设置 Referer
methodString否GET请求方法，包括GET、POST、PUT、DELETE等方法
timeoutNumber否60000超时时间，单位 ms
dataTypeString否json如果设为 json，会尝试对返回的数据做一次 JSON.parse
responseTypeString否text设置响应的数据类型。合法值：text、arraybuffer
successFunction否无收到开发者服务器成功返回的回调函数
failFunction否无接口调用失败的回调函数
completeFunction否无接口调用结束的回调函数(调用成功、失败都会执行)
使用GET方法进行普通请求，index.vue如下：
{{res}}
export default {
data() {
return {
res:''
}
},
onLoad() {
uni.request({
url:'https://demo.hcoder.net',
method: 'GET',
success:function(res){
console.log(res)
}
})
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
}
}
显示：
可以看到，请求后返回了data数据。
说明：
在各个小程序平台运行时，网络相关的API在使用前需要配置域名白名单，因此在使用小程序进行测试时，需要在微信开发者中心设置域名，或者在项目的本地配置中不校验合法域名，如下：
再请求json数据和使用POST方法请求，如下：
{{res}}
export default {
data() {
return {
res: ''
}
},
onLoad() {
const request1 = uni.request({
url: 'https://demo.hcoder.net/index.php?m=getJson',
success: function(res) {
console.log(res.data);
}
});
//
const request2 = uni.request({
url: 'https://demo.hcoder.net/index.php',
data: {
name: 'Corley',
'age': 18
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function(res) {
console.log(res.data);
}
});
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {}
}
显示：
可以看到，也返回了数据。
二、图片处理
1.uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
OBJECT常见参数如下：参数名类型必填与否说明countNumber否最多可以选择的图片张数，默认9
sizeTypeArray否 original 原图，compressed 压缩图，默认二者都有
extensionArray否根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
sourceTypeArray否album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
successFunction是成功则返回图片的本地文件路径列表 tempFilePaths
failFunction否接口调用失败的回调函数 小程序、App
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
index.vue如下：
上传图片
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
img: function(){
uni.chooseImage({
count: 9,
sizeType:"compressed",
success:function(res){
console.log(res)
}
})
}
}
}
显示：
可以看到，上传成功后，结果返回了临时图片的路径链接。
2.uni.previewImage(OBJECT)
预览图片。
OBJECT常见参数如下：参数名类型必填说明currentString/Number因情况而定当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
urlsArray是需要预览的图片链接列表
indicatorString否图片指示器样式，可取值：“default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器
loopBoolean否是否可循环预览，默认值为 false
longPressActionsObject否长按图片显示操作菜单，如不填默认为保存相册
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
index.vue如下：
上传图片
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
img: function(){
uni.chooseImage({
count: 9,
sizeType:"compressed",
success:function(res){
console.log(res);
uni.previewImage({
urls: res.tempFilePaths,
})
}
})
}
}
}
显示：
可以看到，在调用uni.chooseImage上传图片后，成功时的回调函数中再调用uni.previewImage，即可实现预览。
被预览的图片链接，除了可以是uni.chooseImage上传生成的内部临时图片，还可以是自定义的外部图片，如下：
显示图片
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
img: function(){
uni.previewImage({
urls: ['https://bkimg.cdn.bcebos.com/pic/95eef01f3a292df56f9e63a6b2315c6034a87320?x-bce-process=image/resize,m_lfit,w_220,h_220,limit_1', 'https://bkimg.cdn.bcebos.com/pic/83025aafa40f4bfb112d51e70d4f78f0f6361880?x-bce-process=image/resize,m_lfit,w_220,h_220,limit_1', 'https://bkimg.cdn.bcebos.com/pic/622762d0f703918f8453f4795f3d269758eec487?x-bce-process=image/resize,m_lfit,w_220,h_220,limit_1']
})
}
}
}
显示：
可以看到，外部图片也可以正常显示。
3.uni.getImageInfo(OBJECT)
获取图片信息。
OBJECT常见参数和含义如下：参数名类型必填说明srcString是图片的路径，可以是相对路径、临时文件路径、存储文件路径、网络图片路径
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
index.vue如下：
获取图片信息
export default {
data() {
return {
}
},
onLoad() {
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
img: function(){
uni.getImageInfo({
src: 'https://cn.bing.com/th?id=OHR.HolidayNubble_ZH-CN8122183595_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
success: function(res){
console.log(res)
}
})
}
}
}
显示：
可以看到，获取到了图片的大小、类型和方向等信息。
4.uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册。
OBJECT常见参数如下：参数名类型必填说明filePathString是图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
index.vue如下：
上传图片并下载
export default {
data() {
return {}
},
onLoad() {
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
img: function() {
uni.chooseImage({
count: 9,
sizeType: "compressed",
success: function(res) {
console.log(res);
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success:function(){
console.log('save success');
}
})
}
})
}
}
}
显示：
可以看到，可以实现将图片保存到本地，并且图片信息一致。
三、文件上传和下载
1.uni.uploadFile(OBJECT)
将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
OBJECT常见参数如下：参数名类型必填说明urlString是开发者服务器 url
filesArray否需要上传的文件列表。使用 files 时，filePath 和 name 不生效
fileTypeString平台之间存在关系文件类型，image/video/audio
fileFile否要上传的文件对象
filePathString是要上传文件资源的路径
nameString是文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
headerObject否HTTP 请求 Header, header 中不能设置 Referer
timeoutNumber否超时时间，单位 ms
formDataObject否HTTP 请求中其他额外的 form data
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
index.vue如下：
上传文件
var _self;
export default {
data() {
return {
percent: 0
}
},
onLoad() {
_self = this;
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
img: function() {
uni.chooseImage({
count: 1,
sizeType: ["compressed"],
success: function(res) {
var imgFile = res.tempFilePaths[0];
console.log(imgFile);
var uper = uni.uploadFile({
url: "https://demo.hcoder.net/index.php?c=uperTest",
filePath: imgFile,
name: 'file',
success:function(upres){
console.log(upres)
}
});
uper.onProgressUpdate(function(prores){
_self.percent = prores.progress;
console.log('上传进度'+prores.progress);
console.log('已上传数据长度'+prores.totalBytesSent);
console.log('预期需要上传数据总长度'+prores.totalBytesExpectedToSend);
})
}
})
}
}
}
显示：
可以看到，在上传图片文件之后，获取到了实时的上传进度、并在进度条中同步显示。
除了使用uni.uploadFile(OBJECT)，还可以使用更好的APIuniCloud.uploadFile，uniCloud提供了免费CDN和更好的易用性，包括安全的cdn直传。
2.uni.downloadFile(OBJECT)
下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
OBJECT常见参数如下：参数名类型必填与否说明urlString是下载资源的 url
headerObject否HTTP 请求 Header, header 中不能设置 Referer
timeoutNumber否超时时间，单位 ms
successFunction否下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: ‘文件的临时路径’}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
index.vue如下：
下载文件
var _self;
export default {
data() {
return {
percent: 0,
}
},
onLoad() {
_self = this;
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
img: function() {
const down = uni.downloadFile({
url: 'https://bkimg.cdn.bcebos.com/pic/95eef01f3a292df56f9e63a6b2315c6034a87320?x-bce-process=image/resize,m_lfit,w_220,h_220,limit_1',
success: function(res) {
if (res.statusCode === 200) {
console.log(res);
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
console.log('save success');
}
})
}
}
});
down.onProgressUpdate((prores) => {
_self.percent = prores.progress;
console.log('下载进度' + prores.progress);
console.log('已下载数据长度' + prores.totalBytesWritten);
console.log('预期下载数据总长度' + prores.totalBytesExpectedToWrite);
});
}
}
}
显示：
可以下载图片到本地并保存。
四、数据缓存
在APP或者小程序中，可以利用本地存储来保存一些数据，比如用户登录数据，在使用用户名密码或者第三方登录方式进行登录后，会将用户信息保存到服务器端，会将用户id和用户随机码(与用户匹配)以键值对的形式到本地，每次与远程进行交互时，都会将保存下来的用户数据发送到远程进行校验。
1.uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口，可以在存储的同时进行其他操作。
OBJECT参数及其意义如下：参数名类型必填与否说明keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
2.uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口，需要在数据存储完成之后才能进行其他操作。
参数及其意义如下：参数名类型必填与否说明keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
在使用uni.setStorageSync(KEY,DATA)存储数据时，需要使用try...catch...语句块捕捉异常。
setStorage和setStorageSync的简单使用如下：
异步保存数据
同步保存数据
export default {
data() {
return {}
},
onLoad() {
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
asyncsave: function(){
uni.setStorage({
key: 'name',
data: 'Corley',
fail:function(){
console.log('Save failed')
}
});
},
syncsave: function(){
try{
uni.setStorageSync('age', '18')
}catch(e){
console.log(e)
}
}
}
}
显示：
可以看到，两种方式都将数据保存下来。
3.uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
OBJECT 参数及其含义如下：参数名类型必填与否说明keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数，res = {data: key对应的内容}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
4.uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
参数及其含义如下：参数名类型必填与否说明keyString是本地缓存中的指定的 key
getStorageSync也需要使用try...catch...语句块捕捉异常。
getStorage和getStorageSync的简单使用如下：
异步获取数据
同步获取数据
export default {
data() {
return {}
},
onLoad() {
uni.setStorage({
key: 'name',
data: 'Corley',
fail:function(){
console.log('Save failed')
}
});
try{
uni.setStorageSync('age', '18')
}catch(e){
console.log(e)
}
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
asyncget: function(){
uni.getStorage({
key: 'age',
success: function (res) {
console.log('age:'+res.data);
}
})
},
syncget: function(){
try{
const name = uni.getStorageSync('name');
if (name){
console.log('name:'+name);
}
}catch(e){
console.log(e);
}
}
}
}
显示：
可以获取到之前保存下来的数据。
5.uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
OBJECT 参数及其含义如下：参数名类型必填与否说明keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
6.uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。
参数说明：参数名类型必填与否说明keyString是本地缓存中的指定的 key
removeStorage和removeStorageSync的简单使用如下：
异步删除数据
同步删除数据
export default {
data() {
return {}
},
onLoad() {
uni.setStorage({
key: 'name',
data: 'Corley',
fail:function(){
console.log('Save failed')
}
});
try{
uni.setStorageSync('age', '18')
}catch(e){
console.log(e)
}
},
onShow() {
console.log('index onshow')
},
onHide() {
console.log('index onhide')
},
methods: {
asyncremove: function(){
uni.removeStorage({
key: 'age',
success: function (res) {
console.log('async remove success');
}
})
},
syncremove: function(){
try{
uni.removeStorageSync('name');
console.log('sync remove success');
}catch(e){
console.log(e);
}
}
}
}
显示：
此时可以删除指定的数据。
uni.getStorageInfo(OBJECT)和uni.getStorageInfoSync()用于异步和同步获取当前 storage 的相关信息，uni.clearStorage()和uni.clearStorageSync()用于异步和同步清理本地数据缓存，它们的用法与前3组接口类似。
总结
uni-app提供的的js接口包括标准ECMAScript的js API 和 uni 扩展 API 两部分，每个接口都能实现特定的功能，可以根据具体需要选择使用，来进一步加快开发效率。
uniapp php接口如何写,uni-app入门教程之接口的基本使用相关推荐
- 同事写的FreeRTOS入门教程Mark一下
Mark以下同事大佬写的FreeRTOS入门教程 翻译的FreeRTOS入门教程,不过后面几章基本机翻,大佬只做了确认. 链接:RTOS入门 官方文档,因为大佬翻的都没有例子,具体用法和例子要看官方文 ...
- 用TypeScript来写React官方入门教程 .tsx后缀文件，同时入门typescript和React
用TypeScript来写React官方入门教程 .tsx后缀文件,同时入门typescript和React 1. 项目说明: 这是React官网上那个下井字棋的入门教程,但是我把它换了typesci ...
- java接口可以写方法体吗_JDK1.8接口中可以写方法体
在Java中,接口里只能写方法的声明,而不能写方法的具体实现,方法的实现要在实现接口的类中编写.但在JDK1.8中,接口可以对方法的声明写具体实现,个人觉得这有点违背接口的设计初衷. 下面我们来具体看 ...
- SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 基于SpringBoot+uniapp简单通讯聊天软件
- 最新uni-app实战仿糗事百科app开发教程完整版
课程概述: 本季度为uni-app实战项目第一季度,将实战开发仿糗事百科app,其中会包括发布到安卓端app,IOS端app.微信小程序和支付宝小程序. 章节1项目介绍(买前必看) 课时1项目介绍(买 ...
- 手写springboot_Spring Boot 入门教程 | 图文讲解
目录 一.Spring Boot 是什么 二.为什么要使用 Spring Boot 三.快速入门 3.1 创建 Spring Boot 项目 3.2 项目结构 3.3 引入 Web 依赖 3.4 编写 ...
- android studio 安卓制作app入门教程,Android开发：AndroidStudio安卓APP入门教程
轻松学会Android,让工作主动找你 即使你是零基础,也能掌握真正的技术 低风险.低投入,随时随地学习 全方位的技术支持:高清视频.源码.资料.技术指导 课程目录 章节1:初识篇 课时1开发环境搭建 ...
- item_password-获得淘口令真实url接口，淘宝app短链接商品接口，1688商品淘口令url接口
一.接口参数说明: 通过把淘宝或者是1688中分享的短链接,通过接口:item_password - 获得淘口令真实url中可以转换得到转换后的商品链接,然后再通过调用商品链接中num_iid:淘宝商 ...
- eclipse制作app入门教程
从上面下载好软件,并解压 步骤阅读 2 打开里面的eclipse文件夹,找到运行文件 步骤阅读 3 双击打开,然后启动开发软件页面.开始开发软件了,是不是蛮激动?淡定点,后面慢慢来! 步骤阅读 步骤阅 ...
- c语言x的n次方怎么写_C语言入门教程（三）进制与操作符
Hello,小伙伴们大家好,今天开始进入C语言第三课时的学习.进入今天正式内容之前呢,先来看一下上次课程中的留下的一道练习题. 练习: 1.编写程序计算半径为任意浮点数的圆周长并把结果打印在屏幕上 1 ...
最新文章
- Swing 实现聊天系统 私发与群发
- Java 加密 AES 对称加密算法
- Fedora再次安装手记-－很爽的Wine工具
- [Python人工智能] 七.加速神经网络、激励函数和过拟合
- 被黑客盯上了…数据都给打包带走了…
- JLBH示例3 –吞吐量对延迟的影响
- 前端学习（2737）：重读vue电商网站47之生成打包报告
- 我是如何自学 Python 的，分享一下经验
- NWT失败反省：说别人脑子进水了，汝脑子有没有进水？
- effective c# 明白几个相等运算
- python模拟网页上传文件_python模拟网页上传文件
- 华为云计算ie学习一IA部分（1）
- Photoshop CS2 视频教程-PS自定义形状工具(转)
- php mysql 考勤系统_考勤问题思路和解决
- oracle常见异常——io异常，connection reset
- Bugku-CTF之login3(SKCTF)（基于布尔的SQL盲注）
- leetcode 799. 香槟塔 (Champagne Tower)
- python——Matplotlib饼图、直方图的绘制
- 最简单优雅修改jupyter自带主题字体大小颜色（不需要插件不需要第三方theme）
- 隐函数存在定理1及求导公式_20160505