一、网络请求
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 对应的内容，这是一个异步接口
2.2 uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口
2.3 uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容
2.4 uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容
2.5 uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key
2.6 uni.removeStorageSync(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)
从本地相册选择图片或使用相机拍照
3.2 uni.previewImage(OBJECT)
预览图片
可直接查看 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>
