一、网络请求

1.1 发送get请求

二、数据缓存

2.1 uni.setStorage(OBJECT)

2.2 uni.setStorageSync(KEY,DATA)

2.3 uni.getStorage(OBJECT)

2.4 uni.getStorageSync(KEY)

2.5 uni.removeStorage(OBJECT)

2.6 uni.removeStorageSync(KEY)

2.7 案例练习

三、图片上传和预览

3.1 uni.chooseImage(OBJECT)

3.2 uni.previewImage(OBJECT)

3.3 案例练习

一、网络请求

在uni中可以调用uni.request方法进行网络请求

需要注意的是：小程序中网络相关API在使用前需要配置域名白名单

uni-app官方文档 - 发起网络请求

1.1 发送get请求

用 express创建api服务器（接口）用于测试 uni-app 中的 get请求

express创建api服务器可查看笔记：AJAX知识点整理 - 第一节和第二节内容

server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request,response)=>{// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 设置响应体response.send('HELLO AJAX');});// 4. 监听端口启动服务
app.listen(8000, ()=>{ console.log('服务已经启动, 8000端口监听中');
});

在 detail.vue 页面中为按钮配置点击事件，并点击按钮后发送get请求

<template><view><button @click="sendGet">发送Get请求</button></view>
</template><script>export default {data() {return {}},methods: {sendGet(){uni.request({// method不写的话，默认为GET请求method:"GET",url:"http://127.0.0.1:8000/server",success(res) {console.log(res);}})}}}
</script>

由图示可看出，点击按钮后成功向服务器发送了get请求

二、数据缓存

uni-app官方文档 - 数据缓存

2.1 uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

OBJECT 参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

2.2 uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口

参数说明
参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

2.3 uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容

OBJECT 参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明
参数	类型	说明
data	Any	key 对应的内容

2.4 uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容

参数说明
参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

2.5 uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key

OBJECT 参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行

2.6 uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key

参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key

2.7 案例练习

在 detail.vue 页面中设置三个按钮，分别用于将 data 存储在本地缓存中、取指定 key 对应的内容、移除指定 key

<template><view><button @click="sendGet">发送Get请求</button><button type="primary" @click="setStorage">存储数据</button><button type="primary" @click="getStorage">获取数据</button><button type="primary" @click="removeStorage">移除数据</button></view>
</template><script>export default {data() {return {}},methods: {sendGet(){// 异步uni.request({// method不写的话，默认为GET请求method:"GET",url:"http://127.0.0.1:8000/server",success(res) {console.log(res);}})},setStorage(){// 异步uni.setStorage({key:'id',data:'No.9527',success:function(){console.log('存储数据成功');}})// 同步// uni.setStorageSync('id','No.9527')},getStorage(){// 异步uni.getStorage({key:'id',success:function(res){console.log('获取数据成功',res.data);}})// 同步// const res = uni.getStorageSync('id')// console.log(res);},removeStorage(){// 异步uni.removeStorage({key:"id",success:function(){console.log('移除数据成功');}})// 同步// uni.removeStorageSync('id')}}}
</script>

三、图片上传和预览

uni-app官方文档 - 媒体 - 图片

3.1 uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照

OBJECT 参数说明
参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

crop 参数说明
参数名	类型	必填	说明
quality	Number	否	取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
width	Number	是	裁剪的宽度，单位为px，用于计算裁剪宽高比。
height	Number	是	裁剪的高度，单位为px，用于计算裁剪宽高比。
resize	Boolean	否	是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示

3.2 uni.previewImage(OBJECT)

预览图片

OBJECT 参数说明
参数名	类型	必填	说明	平台差异说明
current	String/Number	详见下方说明	详见下方说明
urls	Array<String>	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。	App
loop	Boolean	否	是否可循环预览，默认值为 false	App
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册	App 1.9.5+
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

current 参数说明

可直接查看 uni-app官方文档 - 媒体 - 图片，更为细致

3.3 案例练习

在 message.vue 页面添加上传图片按钮，并配置点击事件
上传图片后，图片会显示出来
点击图片可以预览图片

message.vue

<template><view>message页面<button type="primary" @click="chooseImg">上传图片</button><img v-for="img in imgArr" :src="img" @click="previewImg(img)"></view>
</template><script>export default {data() {return {imgArr:[]}},methods: {chooseImg(){uni.chooseImage({count:9,success: (res) => {console.log(res);this.imgArr = res.tempFilePaths;}})},previewImg(current){console.log(current);uni.previewImage({current,urls:this.imgArr})}}}
</script>

uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览相关推荐

php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
flutter dio网络请求 get post 图片上传
Dio下载地址github:dio 初始化网络请求 BaseOptions option = BaseOptions(); //初始化cotentType option.contentType = C ...
android上传头像 sockettimeoutexception,Kotlin - Retrofit2和Rxjava2封装的网络请求类(含图片上传)...
阅读建议:本文适合熟悉Retrofit与Rxjava2的同学阅读,其中也包含一丢丢的RxLifecycle,文中不包含这两个库的使用说明.不熟悉RxJava的同学,建议去这里了解,里面包含3篇文章,均 ...
Android 利用an框架快速实现网络请求（含下载上传文件）
作者:Bgwan 链接:https://zhuanlan.zhihu.com/p/22573081 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. an框架的网络框架 ...
ios app 上传之预览、屏幕快照尺寸规范
App 预览规范 (iOS.tvOS) 您可以提供 tH.264 和 ProRes 422(仅限 HQ)格式的 App 预览,并且需要具有如下规格: 视频规格表头 H.264 格式 ProRes 4 ...
请上传sku预览图后重新操作_拼多多商家版APP新增商品操作步骤
① 点击右下角"添加商品"按钮,进入创建商品页面: ② 快速创建商品:目前手机版支持快速上传商品啦:仅通过上传商品标题.商品轮播图.商品分类.价格和库存,点击创建按 ...
Go语言练习：网络编程实例——简易图片上传网站
1.代码结构 $ tree . ├── photoweb.go ├── public │ ├── css │ ├── images │ └── js ├── uploads └── views├── ...
react native 开发APP（六）网络请求，列表的使用
官网 https://reactnative.cn/ 项目下载地址:https://github.com/hebiao6446/DemoProject 陆续更新中... 在移动端开发的时候,我们基本上 ...
网络请求数据demo
主类 package com.bwie.yuekaoa; import android.os.AsyncTask; import android.support.v7.app.AppCompatAct ...

uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览

一、网络请求

1.1 发送get请求

二、数据缓存

2.1 uni.setStorage(OBJECT)

2.2 uni.setStorageSync(KEY,DATA)

2.3 uni.getStorage(OBJECT)

2.4 uni.getStorageSync(KEY)

2.5 uni.removeStorage(OBJECT)

2.6 uni.removeStorageSync(KEY)

2.7 案例练习

三、图片上传和预览

3.1 uni.chooseImage(OBJECT)

3.2 uni.previewImage(OBJECT)

3.3 案例练习

uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览相关推荐

最新文章

热门文章