uni-app- 网络请求、数据缓存、图片上传和预览

一、网络请求

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>